Altered circle hsl (animation)

by blackpolygon

HTML

<html>

  <head>
    <title>Altered circles</title>
  </head>

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

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  background: #121222;
}

JavaScript

var canvas, ctx

function init() {
  canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx = canvas.getContext('2d');
  ctx.lineWidth = 1;

}

function draw(radius, amplitude, period, color, sides) {

  ctx.strokeStyle = color;


  ctx.beginPath();
  for (var i = 0; i <= sides; i++) {
    var angle = Math.PI / 2 + i * ((Math.PI * 2) / sides);

    var newRadius = radius + Math.cos(i / period) * amplitude;
    var x = (canvas.width / 2) + Math.cos(angle) * newRadius;
    var y = (canvas.height / 2) + Math.sin(angle) * newRadius;
    ctx.lineTo(x, y);
  }

  ctx.stroke();
  ctx.closePath();
}

init();

var startHue = 40;
var sat = 100;
var layers = 50;
var colorRange = 100;
var period = 40; // + Math.sin(i/10);
var xx = 5;
var sides = 1500;

function animate() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  xx += 1;
  startHue += 1;
  sides += 10;
  xx = xx % 300;

  for (var i = 1; i < layers; i++) {
    var radius = 10 + i * 6;
    var amplitude = 2 + Math.sin(xx / 10) * Math.abs((layers / 2 - i) * 3);

    hue = startHue + (colorRange / layers) * i;
    var color = 'hsl(' + hue + ', ' + sat + '%, 50%)';

    draw(radius, amplitude, period, color, sides);
  }
  window.requestAnimationFrame(animate);
}

animate();