Нестандартные градиентные заливки

[Alex_beginner]

Уважаемые форумчане!

Окажите помощь начинающему Flash'ру.

У меня такой вопрос. Имеется абстрактный триангл, цвета вершин которого заданы (3 вершины). Необходимо прорисовать сей триангл с градиентной заливкой так, чтобы цвета всех вершин триангла соответствовали заданным.

Заранее благодарен !

[Psycho Tiger]

Ам... Рисуем 3 круга, центры которых совпадают с вершинами треуголника.
Градиент радиальный - в центре этого круга цвет тот, что должен быть, на концах круга цвета идут с альфой=0

[Wolsh]

Дело в том что градиент может быть только линейный или радиальный, в любом случае модификаторы цвета располагаются на одной прямой. Поэтому такой треугольник можно закрасить за два прохода - линейный градиент от вершины а к b и радиальный градиент из вершины с до центра противолежащей стороны, причем этот градиент будет одного цвета но с альфой от 100 до 0, и таким образом "наложится".
Как альтернативный вариант - рассчитать всю красоту попиксельно и нарисовать битмапдату.

2 Psycho Tiger: а в центре триангла у тебя какая альфа получится? Что если меньше 100?

[Alex_beginner]

1. Psycho Tiger ! Ваш вариант я предполагал, однако у него есть некоторые недостатки. Поясню.
Введу обозначения для легкости изъяснения. Вершины треугольника - а, b, c.
Зададимся цветом каждой вершины - точка a -0xFF0000, точка b -0x00FF00, точка с -0x0000FF, т.е. чистые красный, зеленый и синий цвета, соответственно.
Рассмотрим радиал расположенный в точке с. Теоретически для правильного отображения требуемого градиента необходимо чтобы значение синей цветовой составляющей точки c на противоположной стороне треугольника (во всех точках линии от a до b) должно быть равно нулю. В случае радиала это значение может совпасть непосредственно в точках a и b, а в других точках на линии от a до b оно явно будет ненулевое (хотя близкое к нулю).

2. Wolsh ! Ваш вариант наиболее интересен. Щас буду его реализовывать.
Пока немогу его понять теоретически.
Вопрос: Это вариант был вами практически опробован ?

[Wolsh]

Да, на прямоугольнике с градиентом
Б Ц
Ч Ч
где Б - белый, Ч - черный, Ц - какойто цвет. Это квадрат выбора цвета как в фотошопе)))

[Alex_beginner]

Wolsh! Я извоял микрокод:) согласно Вашему варианту (как я понял!). Однако я не добился желаемого результата. Возможно я чего-то не понял в Вашей теории. Прилагаю написанный мною код. Если Вас незатруднит исправьте в коде баги.



import flash.geom.Matrix;
//Линейная заливка
this.beginGradientFill("linear",[0xFF0000,0x000000],[100,100],[0,0xFF],{matrixType:"box",x:0,y:0,w:350,h:400,r:0},"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();
//Радиал
var myMatrix = new Matrix();
myMatrix.tx=175;
myMatrix.ty=400;
myMatrix.a=0.4878048;
myMatrix.d=0.4878048;
this.beginGradientFill("radial",[0xFF0000,0xFF0000],[100,0],[0,0xFF],myMatrix,"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();

[Alex_beginner]

Спасибо за помощь Wolsh и Psycho Tiger!

Искомый алгоритм был незамедлительно наден:yahoo:

Ларчик просто открывался !:)

Нужно было просто использовать линейный градиент из каждой вершины
с изменением альфы от 100 до 0. При этом угол градиента должен рассчитыватся исходя из угла наклона противоположной стороны триангла (допустим градиент из точки а, тогда угол градиента = углу стороны b-c), т.е. они должны быть равны. В результате во всех точках стороны b-c значение соответствующей составляющей будет одно и тоже, что и требовалось доказать. Потом повторив градиентную заливку для каждой вершины с соответсвующим цветом, получаем красиво залитый триангл. Красота !:)

[Wolsh]

OK, только два замечания)))
Во-первых, таки про альфу в центре и в центрах сторон. Грызут меня сомнения, даже при линейном градиенте. А уж при градиенте не из вершины к вершине, а из вершины к стороне - и подавно. Я бы чисто для теста отрисовал полученное в битмап 32бита и проверил альфу каждого пикселя гетПикселом.
Во-вторых, мне кажется возможно несколько вариантов, как залить треугольник градиентами из вершин. Линейные и радиальные, к вершинам или к сторонам - перпендикулярно или к центру и т.д. и т.п. Может быть еще такой, наверняка нереализуемый вариант расходящегося из вершины градиента, т.е. градиент из а в b линейный, но угол его меняется соответственно двум сторонам - ас и bc, и визуальные линии модификаторов сходятся в с (во намудрил) - такой градиент мы видим на конусе при виде сбоку.
Вот Ваш первый вариант, чем он плох?
import flash.geom.Matrix;
//Линейная заливка
this.beginGradientFill("linear",[0xff0000,0x0000ff],[100,100],[0,0xFF],{matrixType:"box",x:0,y:0,w:350,h:400,r:0},"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();
//Радиал
var myMatrix = new Matrix();
myMatrix.tx=175;
myMatrix.ty=400;
myMatrix.a=0.4878048;
myMatrix.d=0.4878048;
this.beginGradientFill("radial",[0x00ff00,0x00ff00],[100,0],[0,0xFF],myMatrix,"pad","linearRGB",0);
this.moveTo(0,0);
this.lineTo(350,0);
this.lineTo(175,400);
this.lineTo(0,0);
this.endFill();

[Alex_beginner]

В принципе он нормально работает, но опять же возникают искажения цвета за краями радиального градиента, которые в принципе незаметны, но, однако, присутствуют.

А на счет теста в BitmapData методом getPixel - попробую. Право же это чрезвычайно интересно.

[Wolsh]

Совсем Вы меня запутали. Вот в этом коде, что я привел выше, треугольник рисуется в два прохода полностью, три цвета. Вы говорили о втором варианте, где рисуется градиент одного цвета с альфой 100 - 0 : соответственно ТРИ прохода + неровная альфа (хотя для данного конкретного случая может и ровная, не утверждаю)
Покажите второй код, может я чего-то не понимаю из Ваших желаний)))
-----
ОК, тогда и я допишусь))
Если не хотите показывать второй код, ладно))
Упростим проверку - сделайте все три прохода белым цветом на черном фоне документа. Если альфа лажает, думаю будет видно.
И попробуйте сделать треугольник с двумя очень острыми углами, вытянутый.

[Ostgur]

рисуйте любые фигуры разных цветов, потом blur на них, снимаем мувиклип и клонируем до тех пор пока при наложении одинаковых снимков не получим то что требуется.

[Alex_beginner]

Wolsh !

Разъясняю.

В вашем варианте выполняется заливка триангла в 2 прохода путем совмещения 1 линейной и 1 радиальной заливки. Получается конечный продукт - триангл залитый тремя "градиентыми цветами".

Мой вариант - результат "почти" тот же, но выполняется в 3 прохода 3-мя линейнми градиентами.

Рассмотрим Ваш вариант.

По моим предположениям, область за гранью градиента, а именно
угловые точки a и b, а так же прилегающие к ним некоторые области не имеют корректные значения альфы, а следовательно, и цветовые составляющие(нетрудно выяснить, отключив линейный градиент).
Это обусловлено режимом заливки за границами градиента - "pad", т.е. градиент за границами заполняется крайним цветом градиента. Или другими словами градиента за границами радиала вообще нет, есть только однородный цвет(альфа). Из всего из этого можно сделать, печальный, но единственный вывод:) - цвета у облостей точек а и b искажены(правда несильно). Но в случае использвания данного триангла в качестве карты смещения для фильтра DisplacementMapFilter эти искажения будут фатальными.

Если посмотреть мой вариант, то из него видно, что все точки противоположной стороны (в том числе и угловые точки) будут иметь точное нулевое значение соответствующей цветовой составляющей. Т.е. указанных выше искажений не будет.

Когда я найду подтверждение моего предположения на практике приложу код в массовое использование:)

[Alex_beginner]

Ostgur!

Поясните по-подробнее плиз!

[Wolsh]

О да, да, Ваша модель математически верна, по крайней мере в равностороннем треугольнике всё должно быть ОК. С радиальным я прогнал, конечно, и с углами облажался))) Надо было сначала почертить, потом писать. Примите мои извинения за написанный бред и Удачи!

[Alex_beginner]

Нет! Нет ! Необижайтесь! Ваша идея мне очень пригодиться в будущем!
Это быстрый альтернативный вариант создания градиента в триангле (если, конечно, неиспользовать в DisplacementMapFilter).

Wolsh!
И огромное спаcибо за оказанную Вами помощь:drinks: