콘텐츠로 이동
SignalRGB

색상 순환

이 튜토리얼에서는 “캔버스 소개”의 색상 순환 예시에 대한 몇 가지 변형을 살펴봅니다. 애니메이션과 기본 사용자 컨트롤에 대한 지침이 포함되어 있습니다.

기본 색상 순환

섹션 제목: “기본 색상 순환”

이 효과는 전체 캔버스를 채우고 시간이 지남에 따라 색상이 변경되는 직사각형으로 구성됩니다. 사용자는 색상 전환 속도를 편집할 수 있습니다.

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

결과는 다채롭지만 기본적입니다. 캔버스로 더 많은 것을 할 수 있습니다!

그라디언트 색상 순환

섹션 제목: “그라디언트 색상 순환”

여기서는 단색을 시간이 지남에 따라 변화하는 그라디언트로 대체했습니다. 사용자는 색상 전환 속도와 각 그라디언트 지점 사이의 거리를 편집할 수 있습니다.

<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.
      var grd = ctx.createLinearGradient(0, 0, width, 0);
      //6. Set gradient color stops with the hues.
      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>

픽셀화된 색상 순환

섹션 제목: “픽셀화된 색상 순환”

이 부분은 약간 복잡해졌으니 수학 부분을 잘 따라오십시오. 마지막 색상 순환은 픽셀화된 뱀 같은 색상 이동입니다.

<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.
      var size = 10 * Math.pow(2, density);
      // 4. Calculate the total number of squares
      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
        var iRow = Math.floor(i / (width / size));
        var iCol = i % (width / size);
        // 7. Calculate (x ,y) for each square
        var ix = iCol * size;
        var iy = iRow * size;
        // 8. Calculate the variable color of each square
        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>

색상 순환 작업이 즐거우셨기를 바랍니다! 클래스 기반 동작과 간단한 물리학을 포함한 튜토리얼은 볼 클래스 페이지를 확인하십시오.