Code With Me #1

Code-With-Me-#1.markdown

Code With Me #1

I recorded the process for creating this at https://www.youtube.com/watch?v=H7Z6napwjW4

Fork it and see where you can take it from here.

A Pen by John Brown on CodePen.

License.

index.html

<canvas id="canvas"></canvas>

script.js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var cWHalf = canvas.width / 2;
var cHHalf = canvas.height / 2;
var radius = 300;
var points = 6;
var steps = 5;
var tick = 0;
var speed = 4;
var reverse = false;

function animate() {
  tick++;
  context.fillStyle='rgba(0, 0, 0, .05)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  /*var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  
  if (x < canvas.width / 3) {
    context.fillStyle='red';
    context.strokeStyle = 'red';
  } else if (x < canvas.width / 3 * 2) {
    context.fillStyle='green';
    context.strokeStyle = 'green';
  } else {
    context.fillStyle='blue';
    context.strokeStyle = 'blue';
  }
  context.fillRect(x, y, 3, y + 10);
  */
  
  context.strokeStyle = 'white';
  context.beginPath();
  context.arc(cWHalf, cHHalf, 300, Math.PI * 2, false);
  context.stroke();
  
  var tickPerc = 1 + ((1 + Math.sin(tick/ (100 / speed))) / 2 * 10);
  
  //var tickPerc = 1;
  
  for (var i = 0; i < points; i++) {
    for (var j = 0; j < steps + 1; j++) {
      context.beginPath();
      var offset = ((i%points)/points) * ( Math.PI * 2);
      var nextOffset = (((i + 1)%points)/points) * ( Math.PI * 2);
      context.moveTo(
        cWHalf + Math.sin(offset) * radius,
        cHHalf + Math.cos(offset) * radius
      );
      context.lineTo(
        cWHalf + Math.sin(nextOffset) *
        //radius/2,
        (((radius/tickPerc)/steps) * (j)),
        cHHalf + Math.cos(nextOffset) *
        //radius/2
        (((radius/tickPerc)/steps) * (j))
      );
      context.stroke();
    }
  }
  
  requestAnimationFrame(animate);
}

animate();

style.css

body {
  margin: 0;
  padding: 0;
}

#canvas {
  background-color:black;
  width: 100%;
  height: 100%;
  padding:0;
  margin: 0;
}