star circle spin - canvas

forked from GitNoise's block: square to star

forked from GitNoise's block: grid squares to star circle

forked from GitNoise's block: grid squares to star circle spin

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

canvas { margin: 50px 50px }
  </style>
</head>

/* ----- size of canvas ------ */
    const length = 120;

/* -----  number of shapes and size of shape  ------- */
    const noShapes = 9;
    const scalingFactor = 0.1;

/* -----  positions around the circle  ------- */
    const compensate = 238 * scalingFactor / 2;
    const angle = 360 / noShapes;
    const radian = angle * (Math.PI / 180);
    const radius = length / 2 - compensate;

/* ----- shapes ------ */
    const starData   = "M119,0  148,86  238,86  166,140  192,226  119,175  46,226  72,140  0,86  90,86z";

/* ------ virtual canvas -------- */
    var customBase = document.createElement('custom');

let iteration = 0;
    function drawStar() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, length+1, length+1); // Clear the canvas.

const yOffset = 100;

d3.select(customBase).selectAll("shape")
        .each(function(el,i) {
        	const shape = d3.select(this);
                                  
         	// get pervious step
        	const radianAngleStart = +shape.attr("radianAngleStart");
        	const radianAngleAdd = +shape.attr("radianAngleAdd");
        
        	// calculate new position
          const xOffset = length / 2 + (radius * Math.cos(radianAngleStart * i + radianAngleAdd) - compensate);
          const yOffset = length / 2 + (radius * Math.sin(radianAngleStart * i + radianAngleAdd) - compensate);
       
          // draw star	
          ctx.beginPath();
          ctx.moveTo(119 * scalingFactor + xOffset, 0           + yOffset);
          ctx.lineTo(148 * scalingFactor + xOffset, 86  * scalingFactor + yOffset);
          ctx.lineTo(238 * scalingFactor + xOffset, 86  * scalingFactor + yOffset);
          ctx.lineTo(166 * scalingFactor + xOffset, 140 * scalingFactor + yOffset);
          ctx.lineTo(192 * scalingFactor + xOffset, 226 * scalingFactor + yOffset);
          ctx.lineTo(119 * scalingFactor + xOffset, 175 * scalingFactor + yOffset);
          ctx.lineTo(46  * scalingFactor + xOffset, 226 * scalingFactor + yOffset);
          ctx.lineTo(72  * scalingFactor + xOffset, 140 * scalingFactor + yOffset);
          ctx.lineTo(0           + xOffset, 86  * scalingFactor + yOffset);
          ctx.lineTo(90  * scalingFactor + xOffset, 86  * scalingFactor + yOffset);
          ctx.closePath();
          ctx.fillStyle = "red";
          ctx.fill();

// update shape with new angular data 
          const radian2 = (0.1 * iteration) * (Math.PI / 180);
          shape.attr("radianAngleAdd", radian2);
      	})

iteration++;
    }

function addShapes() {
      const radianAngle = Math.PI / 180 + radian;

var custom = d3.select(customBase); 
      custom.selectAll("shape")
        .data(d3.range(0, noShapes, 1))
        .enter()
        .append("shape")
        .attr("xStart", (d,i) => radius * Math.cos(radianAngle * i))
        .attr("yStart", (d,i) => radius * Math.sin(radianAngle * i))
      	.attr("radianAngleStart", radianAngle)
    } 
 
    addShapes();
    const interval = setInterval(drawStar, 5)

</script>
</body>

https://d3js.org/d3.v4.min.js