Circle?

by asemahle

HTML

<canvas id="canvas" 
        width="400px" 
        height="400px"
        ></canvas>
<div>
  <label for="fader">Rads Per Division</label>
  <input type="range" 
         min="1" max="5" 
         value="1" 
         id="fader" 
         step="0.01" 
         oninput="outputUpdate(value)">
  <output for="fader" id="volume">1</output>
</div>
<div>
  <label for="fader2">Speed</label>
  <input type="range" 
         min="1" max="100" 
         value="100" 
         id="fader2" 
         step="1" 
         oninput="outputUpdate2(value)">
  <output for="fader2" id="volume2">0.1</output>
</div>

CSS

canvas {
  border:1px solid #d3d3d3;
}

JavaScript

var outputUpdate = function(vol) {
	rads = (2*Math.PI)/(vol*vol*vol*vol*vol);
	document.querySelector('#volume').value = vol*vol*vol*vol*vol;
}

var outputUpdate2 = function(vol) {
	speed = vol * 0.001;
	document.querySelector('#volume2').value = vol * 0.001;
}

let drawPolygon = function(ctx, pts) {
  ctx.beginPath();
  ctx.moveTo(pts[0].x, pts[0].y);
  for(let i = 1; i < pts.length; i++) {
  	ctx.lineTo(pts[i].x, pts[i].y);
  }
  ctx.closePath();
  ctx.stroke();
}


let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let rads = (2*Math.PI)/3.1;
let maxRad = 100;
let minRad = 0;
let t = 0;
let speed = 0.1;
let density = 10;

setInterval(() => {
		ctx.clearRect(0,0,canvas.width,canvas.height);
    
    let points = [];
    minRad = Math.cos(t * 0.1) * 20 + 100;
    for(let i = 0; i < 2*Math.PI; i+= rads) {
      let rm = (Math.sin(t + i*density) * (maxRad - minRad)) + minRad;
      rm += (Math.sin(t*5 + i*density*10) * (maxRad - minRad) * 5);
      points.push({
        x: Math.cos(i) * rm + canvas.width/2,
        y: Math.sin(i) * rm + canvas.height/2
      });
    }
		drawPolygon(ctx, points);
    
    t+=speed;
}, 33);