Магия Без'E

Когда впервые запустил только что написанный скрипт я обалдел от эффекта, который просто ударил по моему сознанию. Начал пробывать и менять и в результате Вы видите что получилось





Я ее назвал - Магия Без'Е...
Здесь используется сразу несколько новинок стандарта HTML5. Это

• CANVAS - тег графики браузеров
• Прозрачность - возможность задания прозрачности цвета объекта
• HSL-цвет - определение цвета объекта по реальному представлению - яркость, насыщеность цетовая гамма
• Тень - возможность задания цветотени объекта

Параметры
===============
# width - ширина окна шоу
# height - высота окна шоу
-------------------------
их иожно задать при первой инсталяции объекта, как это сделано в примере.
Если эти параметры опущены то их выбирают из размерности заданые в элементе., который задается в вмде тэга CANVAS

# line - начальная ширина кривой безье (5)
# size - конечная ширина линии (40)
------------------
эти параметры задают начальное и конечное значение толщины линии кривой Безье, которая и представляется источником нашего шоу.
Величина в пикселах каждый раз генерируется из псевдослучайного генератора. по которому так же задаются и другие параметры линии, начальное значение которых определяется шириной и высотой окна шоу с наложенным параметром collapse (0.9) - сжатие шоу относительно окна, который определяет внутреннюю рамку нашего шоу.
*** значения в скобках, здесь и в дальнейшем, соответствуют значениям по-умолчанию.

* shadow - цвет тени(black)
* blur - величина размытия(1000)
---------------------------------
Эти параметры задают около линии цвет тени . Параметр размытие создает дополнительную ауру при самом шоу..Величинв фыьрана случайно.
# draw - цикл отрисовки (50ms)
----------------------------------
Этот параметр определяет цикличность отрисовки самих линий
...................................................
# blank - цикл очистки (40ms)
# pole - цвет окна прозрачной маски
(rgba(255,255,250,0.05))
---------------------------------------------
Первый параметр определяет цикл стирания фона цветом заданным вторым параметром.
Таким образом достигается эффект глубины, т.е рисунок созданый до стирания накладывается практически полно прозрачной маской, с определенным оттенком. Кстати прозрачность есть и у белого цвета, и это дает особый шарм. Я позже расскажу в отдельной заметки физики человеческого восприятия цвета, и его воспроизводстве в веб-представлении. Но сейчас Иы мой читатель должен довериться тому что есть
****
Ну вот я и подошел к самой трудной части своего объяснения эьлшл эффекта . А именно представление цвета в HSL-координатах. Обычно мы задаем цвет в RGB-координатах. Но это удобно для цветного кинескопа нашего монитора, и там фактически машина определяем и уровень и насыщенность простой раскладки цветов на основные составляющие. В обычной жизни чистых цветов не бывает. и мы все видим в цветотенях одних и других оттенков мнгократно отражающихся друг от друга. И поэтому управлять этим живым цыетом очень сложно имея раскладку на RGB. - т.е цвет определяется яркость. насыщеностью и своей цветогаммой или цветностью. Управлять такими параметрами очень легко. К примеру есои Тебе нужен спектор с одним параметром яркости и насыщености, но с разной цветностью, то достаточно только этот параметр и изменять . Что мы и делаем в шоу. И последнее - цветность в этих координатах задается в виде угла от 0 до 360 градусов в любую сторону с периодом в 360 градусов, т.е ее управление сродни колеса велосипеда - крути куда хочешь. и на сколько угодно., все равно ты вернешься обязательно к своему старому значеню.

# start - начальный цвет в цикле(0 = красный)
# step - шаг цвета по гамме(+10град)
# end - конечный цвет(0=красный)

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