Les Effets sont des Pages Web

Les effets dans SignalRGB, connus sous le nom de Lightscripts, sont essentiellement des pages web qui interagissent avec l’API SignalRGB, et ils doivent respecter quelques règles simples pour fonctionner correctement. Chaque Lightscript nécessite trois balises HTML essentielles : <head>, <body>, et <script>.

<head>

Cette section doit contenir toutes les balises <meta> nécessaires. Comme détaillé dans la section “Référence API”, ces balises peuvent créer des champs de saisie utilisateur (comme des curseurs de teinte, des sélecteurs de nombre, etc.) ou accéder à l’API SignalRGB pour extraire des données visuelles de votre application principale. De plus, une balise <title> dans cette section assignera une étiquette à votre effet dans l’application Signal.

Reprenons l’exemple précédent pour une meilleure compréhension :

<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>

Cet en-tête comprend quatre balises : une balise <title>, et trois balises <meta>, qui couvrent la description, l’éditeur, et un curseur numérique de base. Bien que les en-têtes d’effets statiques soient généralement petits, les effets qui réagissent aux actions à l’écran peuvent impliquer des dizaines de compteurs, chacun avec plusieurs paramètres de résolution. Il est important de rester organisé et de suivre de bonnes conventions de nommage.

<head>

<body>

Le body ne contient qu’un seul élément - la balise <canvas>. Les attributs essentiels pour cette balise sont id, utilisé pour récupérer le canvas dans le script, et width et height. Les dimensions standard pour SignalRGB sont 320px pour la largeur et 200px pour la hauteur.

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

<body>

<script>

C’est dans cette balise que la magie opère. Il y a trois sections de base dans ce script, ainsi que deux fonctions qui devraient être considérées comme STANDARD pour les développeurs Lightscript : update et window.requestAnimationFrame.

Déclarations de Variables

Toutes les variables de portée de script doivent être déclarées ensemble pour simplifier votre processus de développement. À l’avenir, cela inclura également les déclarations de compteurs, mais pour l’instant, nous avons une sélection simple.

var c : Utilisé pour récupérer la balise canvas de tout à l’heure.
var ctx : Le contexte 2D de l’élément canvas, qui est la zone éditable pour votre effet.
height, width et hue : Ceux-ci sont déclarés ici pour simplifier le processus.

Appel Initial de Mise à Jour

Au bas du bloc de code, je référence window.requestAnimationFrame(update). “Update” est le nom de la fonction qui gère les spécificités de l’animation. L’état mis à jour dans chaque image crée l’illusion de mouvement pour les spectateurs.

La méthode utilisée ici est cruciale : Puisque chaque opération dans votre fonction update prend un peu de temps à s’exécuter, appeler update() directement peut causer un délai dans les animations. Par exemple, le premier callback pourrait penser que 100ms se sont écoulées, le suivant 110ms, et ainsi de suite.

En utilisant window.requestAnimationFrame, l’horodatage actuel est passé à la fonction de callback et à ses callbacks imbriqués, préservant l’état de l’animation malgré les petits écarts d’exécution.

En bref, utilisez la méthode window.requestAnimationFrame(callback) pour mettre à jour votre animation !

La Fonction Update

Cette fonction est centrale pour un Lightscript fonctionnel et doit être aussi simple et optimisée que possible puisqu’elle s’exécute à chaque image. Après le chargement initial du script et l’appel de fonction, update continuera à s’exécuter via son appel interne window.requestAnimationFrame.

Dans cet exemple, chaque image effectue quatre opérations principales :

Définir le style de remplissage du canvas avec ctx.fillStyle. Cela peut être une couleur, un motif ou un dégradé, et persistera jusqu’à ce qu’il soit écrasé par le prochain appel ctx.fillStyle.
Créer un rectangle (avec le style de remplissage précédemment défini) avec ctx.fillRect(x, y, width, height). Dans ce cas, le rectangle représente tout le canvas.
Incrémenter hue par speed, la variable de saisie utilisateur située dans l’en-tête.
Lier hue à la plage 0-360 pour s’adapter au standard HSL (hue, saturation, lightness).

<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>

Ce modèle général (définir le remplissage, dessiner la forme, modifier les variables) est le standard pour les animations canvas.

Si la couleur est incorrecte, vous avez manqué un remplissage de style.
Si la forme est incorrecte, vous avez manqué un remplissage de forme.
Si rien ne change au fil du temps, vous n’avez pas modifié vos variables.

Pour plus de détails et de conseils de dépannage, consultez notre prochaine page sur HTML5 + JS.

<script>