Фильтр LIGHT

Фильтр light создает впечатление освещения объекта источником света.

Свойства. нет

Методы.

addAmbient – добавляет источник рассеянного света к "сцене" фильтра.
addCone – добавляет источник конического света (cone light) к "сцене" фильтра, который обрасывает направленный цвет на сцену (направленный источник).
addPoint – добавляет источник света, который позиционирован (заданы координаты) и излучает во все направления (точечный источник).
changeColor – меняет цвет любого источника в сцене
changeStrength – изменяет яркость света.
clear – удаляет все источники света для сцены фильтра.
moveLight – передвигает источник света для сцены фильтра.

Описание. Этот фильтр наиболее сложный из всех визуальных эффектов, т.к. его настройка требует использования методов и написания сценария (т.к. нет свойств). Кроме того требуется иметь представление о источниках света и геометрии.

Без настройки действует фильтр с источником по умолчанию. Источник по умолчанию, представляющий собой рассеянный источник света (ambient light), заменяется при первом же создании (и добавлении к сцене) любого источника света. Как видно, из описания методов можно создавать источники трех типов, контролировать их положение, позицию светового фокуса, цвет, яркость. Максимально возможное количество источников света для одного фильтра – 10. При необходимости большего включения источников цвета необходимо добавлять большее количество фильтров.

Можно применять фильтр для одного объекта (например, для картинки). Для применения светового эффекта к другому объекту (например, к тексту), надо применять другой фильтр. Однако при "оборачивании" нескольких объектов в "оболочку" (например, в тэг <DIV>), можно применить один эффект ко всем объектам, содержащимся в контейнере.

Для применения методов можно поступить насколькими способами. Наиболее распространенный – переопределение функции-обработчика window.onload или onload тэга <BODY>, вызываемого при загрузке документа, например:


<body onload="init()">
  <script language="javascript">
    function init(){
      //инициализация фильтра: добавление источников цвета и пр.
      ...
      some_object.filters.light.addCone(0,0,10,30,50, 255, 145, 56, 60, 80);
      ...
    }
  </script>
...
<div id=some_object style="...; filter:light(); ...">
  <!--объект, к которому применяется фильтр -->
   ...
</div>
....
</body>

Можно не ждать загрузки всего документа и применять фильтр на лету, например:


<body onload="init()">
...
<div id=some_object style="...; filter:light(); ...">
  <!--объект, к которому применяется фильтр -->
  ...
</div>
<script language="javascript">
  some_object.filters.light.addCone(0,0,10,30,50, 255, 145, 56, 60, 80);
</script>
....
</body>

При этом необходимо не забывать, что для объекта желательно, чтобы был определен индентификатор id, иначе прийдется "добираться" до объекта через различного рода коллекции. Следует также помнить, что тело документа загружается быстрее графических файлов картинок, поэтому при инициализации необходимо проверять состояния загрузки графического файла, иначе фильтр не будет иметь эффекта.

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

addAmbient(Red, Green, Blue, Strength)
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100). Она определяется для точки, на которую направлен источник света.

Примеры. для 

1. 2.

addAmbient(255, 255, 255, 100) – рассеянный свет 100%-ой яркости;
addAmbient(255, 0, 0, 50) – красный рассеянный свет 50%-ой яркости

addCone(X1, Y1, Z1, X2, Y2, Red, Green, Blue, Strength, Spread)
X1, Y1, Z1 – целые числа, определяющие положение источника направленного света над плоскостью визуального объекта.
X2, Y2 – целые числа, определяющие координаты на плоскости визуального объекта, куда направлен центр конуса источника направленного цвета.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100).
Spread – степень рассеяния светового конуса. Задается в градусах (0..90^o), как угол между осью конуса и его образующей. Интенсивность распределяется в области отражения неравномерно. Поэтому для более размытых конусов (угол больше), область отражения больше и отсутствует резкая граница. Менее размытые конусы (угол меньше) имеют меньшую площадь отражения, более четкую границу и более яркое отражение.

Примеры. для 

1. 2. 3. 4.

addCone(25,75,90,25,75, 255, 255, 255, 100, 30) – направленный перпендикулярно поверхности свет; коодинаты x и y для источника и цели совпадают;
addCone(25,75,90,25,75, 255, 255, 255, 100, 70) – величину фокуса можно менять степенью рассеянья;
addCone(25,75,30,25,75, 255, 255, 255, 100, 30) – величину фокуса можно менять также z-координатой источника;
addCone(15,75,25,35,65, 255, 255, 255, 100, 30) – форму фокуса можно менять, сдвигая координаты источника (x,y) относительно координат "приемника";

addPoint(X, Y, Z, Red, Green, Blue, Strength)
X, Y, Z – целые числа, определяющие положение точечного источника над плоскостью визуального объекта.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Strength – целое число, определяющее яркость светового фильтра (0..100). Она определяется для точки, на которую направлен источник света.

Примеры. для 

1. 2.

addPoint(25, 25, 15, 255, 255, 255, 50) – белый точечный источник света 50%-ой интенсивности;
addPoint(25, 25, 90, 255, 0, 0, 100) – более далекий, но более мощный точечный источник красного цвета;

changeColor(LightNumber, Red, Green, Blue, Absolute)
LightNumber – номер источника света, для которого меняется цвет.
Red, Green, Blue – целые числа, составляющие красного, зеленого и синего цветов соответственно (0..255).
Absolute – флаг, показывающий, являются ли составляющие цвета абсолютными значениями и будут замещать текущие цвета (ненулевое значение (true)) или относительными и будут прибавляться к текущим значениям цвета (нуль (false)).

changeStrength(LightNumber, Strength, Absolute)
LightNumber – номер источника света, для которого меняется яркость.
Strength – яркость, которую надо установить.
Absolute – флаг, показывающий, является ли Strength абсолютным значением или относительным.

clear()
Метод не имеет параметров.

moveLight(LightNumber, X, Y, Z, Absolute)
не эффективен для источников рассеяного света (ambient light)
LightNumber – номер источника света, для которого меняются координаты.
X, Y, Z – новые координаты источника света над плоскостью визуального объекта.
Absolute – флаг, показывающий, будет ли движение абсолютным или относительным.

Примечания.

Программист сам должен заботиться о правильном индексировании источников света (LightNumber в примерах). Методов определения типа источника по индексу и общее число источников света не существует. Индексирование начинается с 0 и соответствует источникам согласно порядку их добавления к сцене. Неверно употребленный номер (например, больше общего числа источников) не производит никакого эффекта.
Последние четыре метода скорее всего Вам понадобяться для оживления страницы от события таймера или мышки (см. пример 1 и пример 2).

В начало: Создание визуальных эффектов фильтрами и превращениями

Назад: Описание свойств и методов фильтров