Efek Adalah Halaman Web

Efek dalam SignalRGB, yang dikenal sebagai Lightscript, pada dasarnya adalah halaman web yang berinteraksi dengan SignalRGB API, dan harus mematuhi beberapa aturan sederhana agar dapat berfungsi dengan baik. Setiap Lightscript memerlukan tiga tag HTML esensial: <head>, <body>, dan <script>.

<head>

Bagian ini harus berisi tag <meta> yang diperlukan. Seperti yang dirinci dalam bagian “Referensi API”, tag-tag ini dapat membuat kolom input pengguna (seperti slider hue, pemilih angka, dll.) atau mengakses SignalRGB API untuk menarik input visual dari aplikasi utama Anda. Selain itu, tag <title> di bagian ini akan memberikan label pada efek Anda di dalam aplikasi Signal.

Mari kita tinjau kembali contoh sebelumnya untuk pemahaman yang lebih jelas:

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

Header ini mencakup empat tag: sebuah tag <title>, dan tiga tag <meta>, yang mencakup deskripsi, publisher, dan slider angka dasar. Sementara header efek statis biasanya kecil, efek yang merespons tindakan di layar mungkin melibatkan puluhan meter, masing-masing dengan beberapa pengaturan resolusi. Penting untuk tetap terorganisir dan mengikuti konvensi penamaan yang baik.

<head>

<body>

Body hanya berisi satu elemen - tag <canvas>. Atribut penting untuk tag ini adalah id, digunakan untuk mengambil canvas dalam script, serta width dan height. Dimensi standar untuk SignalRGB adalah 320px untuk lebar dan 200px untuk tinggi.

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

<body>

<script>

Tag ini adalah tempat keajaiban terjadi. Ada tiga bagian dasar dalam script ini, beserta dua fungsi yang harus dianggap STANDAR bagi pengembang Lightscript: update dan window.requestAnimationFrame.

Deklarasi Variabel

Semua variabel berlingkup script harus dideklarasikan bersama untuk menyederhanakan proses pengembangan Anda. Di masa mendatang, ini juga akan mencakup deklarasi meter, tetapi untuk saat ini, kita memiliki pilihan yang sederhana.

var c: Ini digunakan untuk mengambil tag canvas dari sebelumnya.
var ctx: Konteks 2D dari elemen canvas, yang merupakan area yang dapat diedit untuk efek Anda.
height, width dan hue: Ini dideklarasikan di sini untuk menyederhanakan prosesnya.

Panggilan Update Awal

Di bagian bawah blok kode, saya mereferensikan window.requestAnimationFrame(update). “Update” adalah nama fungsi yang menangani spesifik animasi. Status yang diperbarui di setiap frame menciptakan ilusi gerak bagi penonton.

Metode yang digunakan di sini sangat penting: Karena setiap operasi dalam fungsi update Anda membutuhkan sedikit waktu untuk dieksekusi, memanggil update() secara langsung dapat menyebabkan penundaan dalam animasi. Misalnya, callback pertama mungkin berpikir 100ms telah berlalu, berikutnya 110ms, dan seterusnya.

Dengan menggunakan window.requestAnimationFrame, timestamp saat ini diteruskan ke fungsi callback dan callback bersarangnya, mempertahankan status animasi meskipun ada celah eksekusi kecil.

Singkatnya, gunakan metode window.requestAnimationFrame(callback) untuk memperbarui animasi Anda!

Fungsi Update

Fungsi ini merupakan inti dari Lightscript yang berfungsi dan harus sesederhana dan seefisien mungkin karena berjalan setiap frame. Setelah pemuatan script awal dan panggilan fungsi, update akan terus berjalan melalui panggilan window.requestAnimationFrame internalnya.

Dalam contoh ini, setiap frame melakukan empat operasi utama:

Atur gaya fill canvas dengan ctx.fillStyle. Ini bisa berupa warna, pola, atau gradien, dan akan bertahan hingga ditimpa oleh panggilan ctx.fillStyle berikutnya.
Buat persegi panjang (dengan gaya fill yang telah ditetapkan sebelumnya) dengan ctx.fillRect(x, y, width, height). Dalam kasus ini persegi panjang mewakili seluruh canvas.
Iterasi hue dengan speed, variabel input pengguna yang terletak di header.
Ikat hue ke rentang 0-360 agar sesuai dengan standar 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>

Pola umum ini (atur fill, gambar bentuk, edit variabel) adalah standar untuk animasi canvas.

Jika warnanya salah, Anda melewatkan style fill.
Jika bentuknya salah, Anda melewatkan shape fill.
Jika tidak ada yang berubah seiring waktu, Anda tidak mengedit variabel Anda.

Untuk lebih detail dan saran pemecahan masalah, lihat halaman berikutnya tentang HTML5 + JS.

<script>