Altered circle hsl 2

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) {
  console.log(radius, amplitude, period, color);

  ctx.strokeStyle = color;

  var sides = 10;
  ctx.beginPath();
  for (var i = 0; i <=sides; i++) {
    var angle = 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 = 100;
var colorRange = 90;

for (var i = 1; i < layers; i++) {
  var radius = 20 + i * 4;
  var amplitude = 2 + i * Math.sin(i / 5);
  var period = 40; // + Math.sin(i/10);

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

  draw(radius, amplitude, period, color);
}