Эффекты — это веб-страницы

Эффекты в SignalRGB, известные как Lightscripts, — это по существу веб-страницы, взаимодействующие с API SignalRGB. Для корректной работы они должны соответствовать нескольким простым правилам. Каждый Lightscript требует трёх обязательных HTML-тегов: <head>, <body> и <script>.

<head>

В этом разделе должны находиться необходимые теги <meta>. Как описано в разделе «Справочник API», эти теги могут создавать поля ввода для пользователя (например, слайдеры оттенка, числовые поля и т. д.) или обращаться к API SignalRGB для получения визуального ввода из основного приложения. Кроме того, тег <title> в этом разделе назначит метку вашему эффекту в приложении SignalRGB.

Рассмотрим предыдущий пример для более чёткого понимания:

<head>
    <title>Hue Cycle</title>
    <meta description="Stock hue cycle."/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>

В этом заголовке четыре тега: тег <title> и три тега <meta>, охватывающие описание, издателя и базовый числовой слайдер. Хотя заголовки статичных эффектов обычно небольшие, эффекты, реагирующие на действия на экране, могут содержать десятки счётчиков с несколькими настройками разрешения. Важно сохранять организованность и следовать хорошим соглашениям об именовании.

<head>

<body>

Тело содержит лишь один элемент — тег <canvas>. Обязательные атрибуты этого тега — id, используемый для получения canvas в скрипте, а также width и height. Стандартные размеры для SignalRGB: ширина 320px и высота 200px.

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

В этом теге происходит вся магия. Скрипт состоит из трёх основных разделов, а также двух функций, которые должны считаться СТАНДАРТНЫМИ для разработчиков Lightscript: update и window.requestAnimationFrame.

Объявление переменных

Все переменные уровня скрипта следует объявлять вместе, чтобы упростить разработку. В будущем сюда также войдут объявления счётчиков, но пока у нас простой набор.

var c: используется для получения тега canvas, объявленного ранее.
var ctx: двухмерный контекст элемента canvas — редактируемая область для вашего эффекта.
height, width и hue: объявляются здесь для упрощения работы.

Первоначальный вызов обновления

В нижней части блока кода используется window.requestAnimationFrame(update). «Update» — это имя функции, которая управляет анимацией. Обновлённое состояние в каждом кадре создаёт иллюзию движения для зрителей.

Использованный здесь метод важен: поскольку каждая операция в функции обновления занимает небольшое время, прямой вызов update() может привести к задержкам анимации. Например, первый обратный вызов может зафиксировать прошедшие 100мс, следующий — 110мс и так далее.

Используя window.requestAnimationFrame, текущая временная метка передаётся в функцию обратного вызова и её вложенные вызовы, сохраняя состояние анимации несмотря на небольшие задержки выполнения.

Вкратце: используйте метод window.requestAnimationFrame(callback) для обновления анимации!

Функция обновления

Эта функция является центральной в работающем Lightscript и должна быть максимально простой и эффективной, поскольку выполняется каждый кадр. После первоначальной загрузки скрипта и вызова функции update будет продолжать работу через внутренний вызов window.requestAnimationFrame.

В данном примере каждый кадр выполняет четыре основные операции:

Установить стиль заливки canvas с помощью ctx.fillStyle. Это может быть цвет, паттерн или градиент; значение сохраняется до следующего вызова ctx.fillStyle.
Создать прямоугольник (с ранее установленным стилем заливки) с помощью ctx.fillRect(x, y, width, height). В данном случае прямоугольник представляет весь canvas.
Увеличить hue на speed — переменную пользовательского ввода из заголовка.
Привязать hue к диапазону 0–360 в соответствии со стандартом HSL (оттенок, насыщенность, яркость).

<script>
    // Variable Declarations -------------------------
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update function --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // Re-call the function
      window.requestAnimationFrame(update);
    }

    // Initial update call ----------------------------
    window.requestAnimationFrame(update);
</script>

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

Если цвет неверный — вы пропустили установку стиля заливки.
Если фигура неверная — вы пропустили отрисовку фигуры.
Если ничего не меняется со временем — вы не изменили переменные.

Для получения дополнительной информации и советов по устранению неполадок перейдите на следующую страницу HTML5 + JS.

<script>