Hoppa till innehåll
SignalRGB

Färgcykel

Den här handledningen utforskar några variationer på färgcykelexemplet från “Möt Canvas”. Den innehåller instruktioner om animation och några grundläggande användarkontroller.

Grundläggande färgcykel

Section titled “Grundläggande färgcykel”

Den här effekten består av en rektangel som fyller hela canvas och ändrar färg över tid. Användaren kan redigera hastigheten för färgskiftet.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
  <!-- 1. Skapa numeriskt reglage för att redigera animationshastigheten -->
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>


<body style="margin: 0; padding: 0;">
  <!-- 2. Skapa canvas-elementet inuti body-taggen -->
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // 3. Hämta canvas-elementet från DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    // 4. Deklarera skriptvariabler
    var width = 320;
    var height = 200;
    var hue = 0;


    // 5. Skriv update-funktion för att rendera varje bildruta
    function update() {
    // 6. Ange fillstyle, hue är variabel över tid
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
    // 7. Använd fillRect-metoden för att skapa stig och rita i samma kommando
      ctx.fillRect(0, 0, width , height);
    // 8. Öka hue med speed angiven av användaren. Liten justering gjord för bättre användarreglage.
      hue+=(speed / 4);
    // 9. Begränsa hue till intervallet 0-360 för användning med hsl
      if (hue > 360) { hue = hue % 360; }
    // 10. Anropa update-funktionen igen i slutet av varje uppdatering
      window.requestAnimationFrame(update);
    }


    // 11. Initialt uppdateringsanrop
    window.requestAnimationFrame(update);
</script>

Resultatet är färgglatt men grundläggande. Vi kan göra mer med canvas!

Gradientfärgcykel

Section titled “Gradientfärgcykel”

Här har jag ersatt den enda färgen med en gradient som förskjuts över tid. Användaren kan redigera hastigheten för färgskiftet samt avståndet mellan varje gradientpunkt från resten.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
  <!-- 1. Skapa numeriskt reglage för att redigera färgbredden i gradienten -->
    <meta property="distance" label="Color Distance" type="number" min="1" max="160" default="50">
</head>


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


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;


    // 2. Initial hue sätts till 0
    var hue1 = 0;


    function update() {


      // 3. Skapa ytterligare två färger för användning med gradienten genom att lägga till användarens färgbredd.
      hue1+=(speed / 4);
      hue2 = hue1 + distance;
      hue3 = hue2 + distance;
      // 4. Begränsa varje enskild hue till intervallet 0-360
      if (hue1 > 360) { hue1 = hue1 % 360; }
      if (hue2 > 360) { hue2 = hue2 % 360; }
      if (hue3 > 360) { hue3 = hue3 % 360; }


      // 5. Skapa en linjär gradient. Min börjar vid (0, 0) och översätts direkt horisontellt med bredden. Att ändra den sista 0 till ett heltal lägger till en vertikal komponent i gradienten.
      var grd = ctx.createLinearGradient(0, 0, width, 0);
      // 6. Ange gradientfärgstopp med huetonen. Jag har en längst till vänster, en i mitten och en längst till höger.
      grd.addColorStop(0, `hsl(${hue1}, 100%, 50%)`);
      grd.addColorStop(.5, `hsl(${hue2}, 100%, 50%)`);
      grd.addColorStop(1, `hsl(${hue3}, 100%, 50%)`);


      // 7. Ange fillstyle och rita rektangel
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, width , height);




      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

Pixelerad färgcykel

Section titled “Pixelerad färgcykel”

Den här blev lite komplicerad, så ha tålamod med mig på matematiken. Vår sista färgcykel är en pixelerad, ormlikt krypande färgcykel.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
    <meta property="distance" label="Color Distance" type="number" min="1" max="10" default="2">
  <!-- 1. Skapa numeriskt reglage för att redigera pixeldensiteten i cykeln -->
    <meta property="density" label="Pixel Density" type="number" min="0" max="2" default="1">
</head>


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


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;
    var hue = 0;


    function update() {


      // 2. Rita en vit bakgrund för att skriva över tidigare bildrutor
      ctx.fillStyle = "white"
      ctx.fillRect(0, 0, width, height)


      hue += (speed/4);
      if(hue > 360) {
        hue = hue % 360;
      }


      // 3. Beräkna kvadratstorleken från användarinmatning. Baserat på vårt 320x200-skärmförhållande är mina 4 möjliga värden 5px, 10px, 20px och 40px kvadrater. Du kan beräkna storlek med ekvationen 10 * 2 ^ density.
      var size = 10 * Math.pow(2, density);
      // 4. Beräkna det totala antalet kvadrater genom att dividera skärmens pixelyta (320 * 200) med kvadratens pixelyta.
      var goal = 64000 / (size * size);


      // 5. While-loop körs tills vi når det angivna antalet kvadrater
      var i = 0;
      while(i < goal){
        // 6. Beräkna rad- och kolumnmultiplikator, samma som rutnätsexempel i HTML5+JS
        var iRow = Math.floor(i / (width / size));
        var iCol = i % (width / size);
        // 7. Beräkna (x, y) för varje kvadrat baserat på rad- och kolumnmultiplikator
        var ix = iCol * size;
        var iy = iRow * size;
        // 8. Beräkna den variabla färgen för varje kvadrat baserat på användarinmatning. Se till att inkludera indexet i din beräkning så att varje kvadrat skiljer sig från nästa.
        var iHue = hue + (i * distance);
        if(iHue > 360){
          iHue = iHue % 360;
        }


        // 9. Om iRow-beräkningen är udda, vänd den horisontella ritriktningen.
        if(iRow % 2 != 0){
          ix = (width - size) - iCol * size;
        }


        ctx.beginPath();
        ctx.rect(ix, iy, size, size);


        ctx.fillStyle = `hsl(${iHue}, 100%, 50%)`;
        ctx.fill();
        i++;
      }


      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

Hoppas du hade lite kul med färgcykler! För en handledning med klassbaserat beteende och lite grundläggande fysik, kolla in sidan Ball Class.