Circle Function Definer

by asemahle

HTML

<canvas id="canvas" 
        width="400px" 
        height="400px"
        ></canvas>

CSS

canvas {
  border:1px solid #d3d3d3;
}

JavaScript

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 fA = function(i, t) {
	let maxRad = 100;
  let speed = 0.1;
  let minRad = Math.cos(t*speed * 0.1) * 20 + 100;
	let density = 20;

	let rm = (Math.sin(t*speed + i*density) * (maxRad - minRad)) + minRad;
  rm += (Math.sin(t*speed*5 + i*density*10) * (maxRad - minRad) * 5);
  
  return rm;
}

let fB = function(i,t) {
	return Math.pow(i,2);
}

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let rads = (2*Math.PI)/3600;
let t = 0;
setInterval(() => {
		ctx.clearRect(0,0,canvas.width,canvas.height);
    
    let points = [];
    for(let i = 0; i < 4*Math.PI; i+= rads) {
    	//let radius = fA(i, t);
      let radius = fB(i, t);
      points.push({
      	x: Math.cos(i) * radius + canvas.width/2,
    		y: Math.sin(i) * radius + canvas.height/2
  		});
    }
		drawPolygon(ctx, points);
    
    t++;
}, 33);