Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Flash > ActionScript 3.0

Версия для печати  Отправить по электронной почте    « Предыдущая тема | Следующая тема »  
Опции темы Опции просмотра
 
Создать новую тему Ответ
Старый 18.12.2014, 16:14
AlexDesinger вне форума Посмотреть профиль Отправить личное сообщение для AlexDesinger Посетить домашнюю страницу AlexDesinger Найти все сообщения от AlexDesinger
  № 1  
Ответить с цитированием
AlexDesinger

Регистрация: Feb 2007
Сообщений: 563
По умолчанию Смешивание пикселов (эффект смешивания красок)

Всем привет, не нашел на эту тему на форуме подходящего обсуждения, поэтому решил спросить здесь)

И так передо мной стоит задача создать эффект смешивания красок, так как это происходит скажем на холсте или при рисовании фломастерами. Конечно сверхреалистичности не требуется, но все же хочется создать рисовалку на flash что бы можно было не только выбирать цвет, но и создавать "замес", а так же чтобы при рисовании линии одного цвета поверх другой линии другого цвета, эти линии соответствующим образом смешивались.
Если у кого-либо есть ссылки на подобные вещи, скиньте плиз, буду рад. Сам в интернете я нашел несколько таких попыток, но они все коммерческие или с привлечением pixelbender, который я не знаю.

Итак хотелось бы начать с разбора простых вещей, чтобы определиться с тем как это реализовать.

Для начала я приведу простенький код, который накидал для начала, чтобы начать с этим разбираться. Сразу хочу сказать, чтоя художник и аниматор и некоторые математические и абстрактные вещи с трудом укладываются в голове)

Код AS3:
import flash.events.MouseEvent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Matrix;
 
import flash.geom.Rectangle;
import flash.utils.ByteArray;
 
var bounds:Rectangle = new Rectangle(0, 0,2,2);
 
var canvas_bd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x0000ff);
var canvas_bm:Bitmap = new Bitmap(canvas_bd);
 
var brush_bd:BitmapData = new BitmapData(30, 30, false, 0xffff00);
var brush_bm:Bitmap = new Bitmap(brush_bd);
 
var mat:Matrix = new Matrix();
 
addChild(canvas_bm);
 
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
 
function onDown(e:MouseEvent):void
{
}
 
function onMove(e:MouseEvent):void
{
	if(e.buttonDown)
	{
		bounds.x = mouseX;
		bounds.y = mouseY;
 
		mat.tx = mouseX;
		mat.ty = mouseY;
 
		calcualteColor(canvas_bm, brush_bm, bounds);
 
	}
}
 
function calcualteColor(_canvas:Bitmap, _brush:Bitmap, _bounds:Rectangle):void
{
	var pixels:ByteArray = _canvas.bitmapData.getPixels(bounds);
}
Вобщем тут все просто - есть холст синего цвета(просто для теста) + кисточка желтого + матрица (ибо без нее не рисуется рисование + прямоугольник, ибо без него не считаются пикселы в массив)

на данном этапе прошу подсказать как реализовать простое смешивание цветов в соответствии с цветовым кругом + рисование этим цветом.

Старый 18.12.2014, 17:16
Gerbert вне форума Посмотреть профиль Найти все сообщения от Gerbert
  № 2  
Ответить с цитированием
Gerbert
Banned
[+1 06.12.14]
[+1 18.12.14]
[+1 30.12.14]

Регистрация: Aug 2014
Сообщений: 461
Да простят меня за заимствование и рекламу, но Вы вот такой эффект хотите?


Старый 18.12.2014, 17:50
Dima_DPE вне форума Посмотреть профиль Отправить личное сообщение для Dima_DPE Найти все сообщения от Dima_DPE
  № 3  
Ответить с цитированием
Dima_DPE

блогер
Регистрация: Aug 2005
Сообщений: 178
Записей в блоге: 4
чтото типа этого http://as3adventure.blogspot.com.au/...between-2.html ?

Старый 19.12.2014, 05:49
AlexDesinger вне форума Посмотреть профиль Отправить личное сообщение для AlexDesinger Посетить домашнюю страницу AlexDesinger Найти все сообщения от AlexDesinger
  № 4  
Ответить с цитированием
AlexDesinger

Регистрация: Feb 2007
Сообщений: 563
Цитата:
Да простят меня за заимствование и рекламу, но Вы вот такой эффект хотите?
Да да именно, это было бы шикарно)

Старый 19.12.2014, 13:55
Gerbert вне форума Посмотреть профиль Найти все сообщения от Gerbert
  № 5  
Ответить с цитированием
Gerbert
Banned
[+1 06.12.14]
[+1 18.12.14]
[+1 30.12.14]

Регистрация: Aug 2014
Сообщений: 461
Цитата:
Да да именно, это было бы шикарно)
Я только раз видел такое на флаш, да и то сейчас не уверен,
что это был флеш. Но если честно я даже в голове не могу
понять, как так сделать.

Старый 19.12.2014, 14:06
neonoviiwolf вне форума Посмотреть профиль Отправить личное сообщение для neonoviiwolf Найти все сообщения от neonoviiwolf
  № 6  
Ответить с цитированием
neonoviiwolf

Регистрация: Jun 2014
Сообщений: 558
http://www.programmersforum.ru/showthread.php?p=991604
тут что-то вроде решение в делфяг, может натолкнёт на мысль

Старый 19.12.2014, 19:05
AlexDesinger вне форума Посмотреть профиль Отправить личное сообщение для AlexDesinger Посетить домашнюю страницу AlexDesinger Найти все сообщения от AlexDesinger
  № 7  
Ответить с цитированием
AlexDesinger

Регистрация: Feb 2007
Сообщений: 563
Цитата:
RsltF.A := ClrF.A + (1 - ClrF.A) * SrcF.A;

RsltF.R := (ClrF.R * ClrF.A + SrcF.R * SrcF.A * ( 1 - ClrF.A)) / RsltF.A;
RsltF.G := (ClrF.G * ClrF.A + SrcF.G * SrcF.A * ( 1 - ClrF.A)) / RsltF.A;
RsltF.B := (ClrF.B * ClrF.A + SrcF.B * SrcF.A * ( 1 - ClrF.A)) / RsltF.A;
Ооо... круто, надо попробовать я и не думал что так сложно может быть, спасибо)

Цитата:
Я только раз видел такое на флаш, да и то сейчас не уверен,
что это был флеш. Но если честно я даже в голове не могу
понять, как так сделать.
Ну я видел, например тут -
http://wonderfl.net/tag/WaterColor
но там код с неведомыми библиотеками, с которыми я не разобрался, да и вообще "их" код это просто с ума сойти можно, да и не в том смысл чтобы попытаться вытащить от туда код, хочется разобраться и уже создать свое, чтобы можно было легко всем управлять. Хотя если кто разберет их код и сможет рассказать как сделать смешивание буду признателен, самостоятельно у меня мало что получилось)

Старый 19.12.2014, 20:08
Gerbert вне форума Посмотреть профиль Найти все сообщения от Gerbert
  № 8  
Ответить с цитированием
Gerbert
Banned
[+1 06.12.14]
[+1 18.12.14]
[+1 30.12.14]

Регистрация: Aug 2014
Сообщений: 461
Ну Вы же художник, почему Вы не знаете как смешивать шестнадцетиричные цвета?)
Я бы на Вашем месте начал с чтения о смешивании цветов и научился бы этому в чистом виде.
Есть формулы в инете похожие на те, которые Вы привели в цитате, но про них написано, что
они не точные, а лишь усреднение цветов. Вам обязательно нужно узнать, как делать чистое смешивание
и поделиться с нами!) Это прям обязательно!)))

Старый 19.12.2014, 21:03
AlexDesinger вне форума Посмотреть профиль Отправить личное сообщение для AlexDesinger Посетить домашнюю страницу AlexDesinger Найти все сообщения от AlexDesinger
  № 9  
Ответить с цитированием
AlexDesinger

Регистрация: Feb 2007
Сообщений: 563
Цитата:
Ну Вы же художник, почему Вы не знаете как смешивать шестнадцетиричные цвета?)
Я бы на Вашем месте начал с чтения о смешивании цветов и научился бы этому в чистом виде.
Нет нет, как смешать цвета и получить нужный цвет или оттенок красками будь то акварель или масло, я как раз знаю, а вот с шеснадцатиричной арифметикой мне сложновато. Но я надеюсь во всем разобраться. Пока что есть неплохая ссылка для начала, попробую разобраться)

Старый 19.12.2014, 22:11
Gerbert вне форума Посмотреть профиль Найти все сообщения от Gerbert
  № 10  
Ответить с цитированием
Gerbert
Banned
[+1 06.12.14]
[+1 18.12.14]
[+1 30.12.14]

Регистрация: Aug 2014
Сообщений: 461
Немного попробовал и получилось вот что..
Что получилось, я не знаю, но должно смешивать красный и синий.
У меня сиреневый чтоль получился... Какой должен получится цвет?
Код AS3:
package {
import flash.display.Shape;
import flash.display.Sprite;
 
public class Main extends Sprite {
 
        public function Main() {
//            Cc.startOnStage(this, '');
            var color: Number = this.fold10color( this.converter16to10(0xff0000), this.converter16to10(0x0000ff));
 
            var shape: Shape = new Shape( );
            shape.graphics.beginFill( color );
            shape.graphics.drawRect(0,0,100,100);
            shape.graphics.endFill();
            super .addChild(shape);
        }
 
    private function converter16to10( color: uint ): Object
    {
        var chanals10: Object = {};
 
        chanals10.alpha = uint( ( color >>> 24 ) & 0xff );
        chanals10.red   = uint( ( color >>> 16) & 0xff );
        chanals10.green = uint( ( color >>>  8) & 0xff );
        chanals10.blue = uint( color & 0xff );
 
        return chanals10;
    }
 
    private function converter10to16( red: int, green: int, blue: int, alpha: int = 0 ): Number
    {
        var color: Number = ( red << 16 ) + ( green << 8 ) + blue;
 
        if( alpha > 0 ){
            return parseFloat( ( alpha.toString( 16 ) + color.toString( 16 ) ) );
        }
 
        return color;
    }
 
    private function fold10color( colorLeft: Object, colorRight: Object ): Number
    {
        //(255,0,0)+(0,0,255)=((255+0) div 2,(0+0) div 2,(0+255) div 2)=(127,0,127).
        return this.converter10to16( Math.floor( ( colorLeft.red + colorRight.red ) / 2 ), Math.floor( ( colorLeft.green + colorRight.green ) / 2 ), Math.floor( ( colorLeft.blue + colorRight.blue ) / 2 ) );
    }
}
}
Добавлено через 6 минут
Вот статейку ещё сюда вставлю
Цитата:
Градиентная заливка и сложение цветов

Градиентная заливка и сложение цветов.

Иногда бывает нужно сложить два или более цветов для получения что-то типа переходного цвета.
Делается это весьма просто. Координаты получаемого цвета будут равны среднему значению
соответствующих координат всех цветов.

Например, нужно сложить красный и синий. Получаем
(255,0,0)+(0,0,255)=((255+0) div 2,(0+0) div 2,(0+255) div 2)=(127,0,127).

В результате получаем сиреневый цвет. Та2: сложить соответствующие координаты,
потом каждую сумму разделить нацело на количество цветов.

Поговорим теперь о градиентной заливке. Градиентная заливка - это заливка цветом с плавным
переходом от одного цвета к другому.

Итак, пусть заданы 2 цвета своими координатами ((a1, a2, a3) и (b1, b2, b3)) и
линия (длиной h пикселов), по которой нужно залить. Тогда каждый цвет каждого пиксела,
находящегося на расстоянии x пикселов от начала будет равен
(a1-(a1-b1)/h*x, a2-(a2-b2)/h*x, a3-(a3-b3)/h*x). Теперь, имея линию с
градиентной заливкой, можно таким образом залить
совершенно любую фигуру: будь то прямоугольник, круг или просто произвольная фигура.

Вот как выглядит описанный алгоритм:

{Считается, что координаты первого цвета равны (a1, a2, a3), а второго (b1, b2, b3)}
{Кроме того, линия начинается в координатах (x1,y1), а заканчивается в (x2,y1)}

var h,i: integer;

begin
h:=x2-x1-1;
for i:=0 to h do begin
paintbox1.canvas.pen.color:=rgb(a1-(a1-b1)/h*i, a2-(a2-b2)/h*i, a3-(a3-b3)/h*i);
paintbox1.canvas.pen.rectangle(i,y1,i+1,y1);
end;
end.
статейка

Создать новую тему Ответ Часовой пояс GMT +4, время: 12:13.
Быстрый переход
  « Предыдущая тема | Следующая тема »  
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


 


Часовой пояс GMT +4, время: 12:13.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.