เอฟเฟกต์คือหน้าเว็บ

เอฟเฟกต์ใน SignalRGB หรือที่เรียกว่า Lightscripts โดยพื้นฐานแล้วคือหน้าเว็บที่โต้ตอบกับ SignalRGB API และต้องปฏิบัติตามกฎง่าย ๆ บางข้อเพื่อให้ทำงานได้อย่างถูกต้อง Lightscript ทุกตัวต้องมีแท็ก HTML ที่จำเป็นสามแท็ก ได้แก่ <head>, <body> และ <script>

<head>

ส่วนนี้ควรมีแท็ก <meta> ที่จำเป็นทั้งหมด ตามที่อธิบายไว้ในส่วน “เอกสารอ้างอิง API” แท็กเหล่านี้สามารถสร้างช่องรับอินพุตจากผู้ใช้ (เช่น แถบเลื่อนเฉดสี ตัวเลือกตัวเลข ฯลฯ) หรือเข้าถึง SignalRGB API เพื่อดึงอินพุตภาพจากแอปพลิเคชันหลักของคุณ นอกจากนี้ แท็ก <title> ในส่วนนี้จะกำหนดชื่อให้กับเอฟเฟกต์ของคุณภายในแอป Signal

ลองย้อนกลับไปดูตัวอย่างก่อนหน้าเพื่อให้เข้าใจชัดเจนยิ่งขึ้น:

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

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: บริบท 2D ขององค์ประกอบ canvas ซึ่งเป็นพื้นที่ที่แก้ไขได้สำหรับเอฟเฟกต์ของคุณ
• height, width และ hue: ประกาศไว้ตรงนี้เพื่อให้กระบวนการง่ายขึ้น

การเรียก Update ครั้งแรก

ที่ด้านล่างของโค้ดบล็อก เราอ้างอิงถึง window.requestAnimationFrame(update) “Update” คือชื่อของฟังก์ชันที่จัดการรายละเอียดของแอนิเมชัน สถานะที่อัปเดตในแต่ละเฟรมจะสร้างภาพลวงตาของการเคลื่อนไหวให้กับผู้ชม

วิธีที่ใช้ในที่นี้มีความสำคัญมาก: เนื่องจากแต่ละการดำเนินการในฟังก์ชัน update ใช้เวลาเล็กน้อยในการทำงาน การเรียก update() โดยตรงอาจทำให้แอนิเมชันเกิดความล่าช้า ตัวอย่างเช่น callback แรกอาจคิดว่าผ่านไป 100ms ตัวถัดไป 110ms และต่อไปเรื่อย ๆ

เมื่อใช้ window.requestAnimationFrame เวลาปัจจุบัน (timestamp) จะถูกส่งไปยังฟังก์ชัน callback และ callback ที่ซ้อนกันอยู่ ซึ่งช่วยรักษาสถานะของแอนิเมชันไว้แม้จะมีช่องว่างเล็ก ๆ ในการทำงาน

สรุปสั้น ๆ คือ ให้ใช้เมธอด window.requestAnimationFrame(callback) เพื่ออัปเดตแอนิเมชันของคุณ!

ฟังก์ชัน Update

ฟังก์ชันนี้เป็นหัวใจของ Lightscript ที่ใช้งานได้ และต้องเรียบง่ายและกระชับที่สุดเท่าที่จะทำได้ เนื่องจากทำงานทุกเฟรม หลังจากโหลดสคริปต์และเรียกฟังก์ชันครั้งแรกแล้ว update จะทำงานต่อไปเรื่อย ๆ ผ่านการเรียก window.requestAnimationFrame ภายในตัวมันเอง

ในตัวอย่างนี้ แต่ละเฟรมจะดำเนินการหลักสี่อย่าง:

1. กำหนดรูปแบบการเติมสีของ canvas ด้วย ctx.fillStyle ซึ่งอาจเป็นสี ลวดลาย หรือการไล่ระดับสี และจะคงอยู่จนกว่าจะถูกเขียนทับด้วยการเรียก ctx.fillStyle ครั้งถัดไป
2. สร้างสี่เหลี่ยม (ด้วยรูปแบบการเติมสีที่กำหนดไว้ก่อนหน้า) ด้วย ctx.fillRect(x, y, width, height) ในกรณีนี้สี่เหลี่ยมแทน canvas ทั้งหมด
3. เพิ่มค่า hue ตาม speed ซึ่งเป็นตัวแปรอินพุตจากผู้ใช้ที่อยู่ในส่วนหัว
4. จำกัดค่า hue ให้อยู่ในช่วง 0-360 เพื่อให้เข้ากับมาตรฐาน 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>

รูปแบบทั่วไปนี้ (กำหนดการเติมสี วาดรูปทรง แก้ไขตัวแปร) คือมาตรฐานสำหรับแอนิเมชันบน canvas

• หากสีไม่ถูกต้อง แสดงว่าคุณลืมกำหนดรูปแบบการเติมสี
• หากรูปทรงไม่ถูกต้อง แสดงว่าคุณลืมกำหนดการวาดรูปทรง
• หากไม่มีอะไรเปลี่ยนแปลงตามเวลา แสดงว่าคุณไม่ได้แก้ไขตัวแปร

ดูรายละเอียดเพิ่มเติมและคำแนะนำในการแก้ไขปัญหาได้ในหน้าถัดไปของเราเรื่อง HTML5 + JS

<script>