Ga naar inhoud
SignalRGB

Kleurcyclus

Deze tutorial verkent enkele variaties op het kleurcyclus-voorbeeld uit “Maak kennis met het canvas”. Het bevat instructies over animatie en enkele basisbesturingen voor de gebruiker.

Basiskleurcyclus

Section titled “Basiskleurcyclus”

Dit effect bestaat uit een rechthoek die het volledige canvas vult en van kleur verandert in de tijd. De gebruiker kan de snelheid van de kleurwisseling aanpassen.

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
  <!-- 1. Create numeric slider to edit the animation speed -->
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>


<body style="margin: 0; padding: 0;">
  <!-- 2. Create the canvas element inside of the body tag -->
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // 3. Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    // 4. Declare script variables
    var width = 320;
    var height = 200;
    var hue = 0;


    // 5. Write update function to render each frame
    function update() {
    // 6. Set fillstyle, hue is variable over time
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
    // 7. Use the fillRect method to create the path and draw in the same command
      ctx.fillRect(0, 0, width , height);
    // 8. Iterate the hue by the speed set by the user. Small adjustment made for better user slider.
      hue+=(speed / 4);
    // 9. Limit hue to the 0-360 range for use with hsl
      if (hue > 360) { hue = hue % 360; }
    // 10. Re-call the update function at the end of every update
      window.requestAnimationFrame(update);
    }


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

Het resultaat is kleurrijk maar eenvoudig. We kunnen meer doen met het canvas!

Verloopkleurcyclus

Section titled “Verloopkleurcyclus”

Hier heb ik de enkelvoudige kleur vervangen door een kleurverloop dat in de tijd verschuift. De gebruiker kan de snelheid van de kleurwisseling aanpassen, evenals de afstand van elk kleurverlooopunt tot de rest.

<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. Create numeric slider to edit the color width of the gradient -->
    <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 is set to 0
    var hue1 = 0;


    function update() {


      // 3. Create two more colors for use with the gradient by adding the user's color width.
      hue1+=(speed / 4);
      hue2 = hue1 + distance;
      hue3 = hue2 + distance;
      // 4. Limit each individual hue to the 0-360 range
      if (hue1 > 360) { hue1 = hue1 % 360; }
      if (hue2 > 360) { hue2 = hue2 % 360; }
      if (hue3 > 360) { hue3 = hue3 % 360; }


      // 5. Create a linear gradient. Mine starts at (0, 0) and is translated directly horizontally by the width. Changing the last 0 to an integer would add a vertical component to the gradient.
      var grd = ctx.createLinearGradient(0, 0, width, 0);
      //6. Set gradient color stops with the hues. I have one at far left, one middle, and one far right.
      grd.addColorStop(0, `hsl(${hue1}, 100%, 50%)`);
      grd.addColorStop(.5, `hsl(${hue2}, 100%, 50%)`);
      grd.addColorStop(1, `hsl(${hue3}, 100%, 50%)`);


      // 7. Set fillstyle and draw rectangle
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, width , height);




      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

Gepixelde kleurcyclus

Section titled “Gepixelde kleurcyclus”

Deze is wat complexer geworden, dus even geduld met de wiskunde. Onze laatste kleurcyclus is een gepixelde, slangachtige kleurkruip.

<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. Create numeric slider to edit the pixel density of the cycle -->
    <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. Draw a white background to overwrite previous frames
      ctx.fillStyle = "white"
      ctx.fillRect(0, 0, width, height)


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


      // 3. Calculate the square size from user input. Based on our 320x200 screen ratio, my 4 possible values are 5px, 10px, 20px, and 40px squares. You can calculate size with the equation 10 * 2 ^ density.
      var size = 10 * Math.pow(2, density);
      // 4. Calculate the total number of squares by dividing the screen pixel area (320 * 200) by the square pixel area.
      var goal = 64000 / (size * size);


      // 5. While loop will run until we hit the specified number of squares
      var i = 0;
      while(i < goal){
        // 6. Calculate row and column multiplyer, same as grid example in HTML5+JS
        var iRow = Math.floor(i / (width / size));
        var iCol = i % (width / size);
        // 7. Calculate (x ,y) for each square based on row and column multiplyer
        var ix = iCol * size;
        var iy = iRow * size;
        // 8. Calculate the variable color of each square based on user input. Make sure to include the index in your calculation so each square is different from the next.
        var iHue = hue + (i * distance);
        if(iHue > 360){
          iHue = iHue % 360;
        }


        // 9. If the iRow calculation is odd, flip the horizontal draw direction.
        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>

We hopen dat u plezier heeft gehad met het werken aan kleurcycli! Voor een tutorial met klassegebaseerd gedrag en wat eenvoudige fysica, bekijk de pagina Ball-klasse.