Deforming a 2d space

by asemahle

HTML

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

JavaScript

let canvas = document.getElementById('canvas');
let width = canvas.width;
let height = canvas.height;
let ctx = canvas.getContext('2d');

/* CONSTANTS */
let radsPerDivision = 1000;
let offsetx = width/2;
let offsety = height/2;
//

/* FUNCS */
tx = (x,t) => x * (x/100) * (x/(500-t));
ty = (y,t) => y * (((y/(100)) * (y/(500)))*t + 1) ;
tdx = (x, t) => x * Math.exp(0.01 * t * Math.sin(x - t));
tdy = (y, t) => y * Math.exp(0.01 * t * Math.cos(-y - t));
td = (x,y,t) => [
  	x * Math.exp(0.01 * t * (y - t)),
  	y * Math.exp(0.01 * t * (-x - t))
  ];
ta = (x,y,t) => [
		x * Math.log(1 + Math.cos(0.0001*x*y*t) * Math.sin(y/x*t)),
    y * Math.log(1 + Math.sin(0.0001*y*x*t) * Math.cos(x/y*t))
];
//

let circles = [];
for (let r = 0; r < 200; r += 10) {
	let newCircle = [];
  for (let i = 0; i < 2 * Math.PI; i += 2 * Math.PI / radsPerDivision) {
		newCircle.push([
    	Math.cos(i) * r,
      Math.sin(i) * r
    ]);
  }
  circles.push(newCircle);
}

let drawCompound = (pts, ctx, transformx, transformy, inputs) => {
	let count = 0;
  ctx.beginPath();
  for (let pt of pts) {
  	let x = offsetx + transformx(pt[0], inputs);
    let y = offsety + transformy(pt[1], inputs);
  	if (count == 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
    count++;
  }
  ctx.stroke();
}

let drawCompound2 = (pts, ctx, transform, inputs) => {
	let count = 0;
  ctx.beginPath();
  for (let pt of pts) {
  	let p = transform(pt[0], pt[1], inputs);
    let x = offsetx + p[0];
    let y = offsety + p[1];
    if (count == 0) ctx.moveTo(x,y);
    else ctx.lineTo(x,y);
    count++;
  }
  ctx.stroke();
}

let dt = 0;
let t = Date.now();
let loop = () => {
	ctx.clearRect(0,0,width,height);
  ctx.strokeStyle = 'black';
	for (let circle of circles) {
    /* drawCompound(circle, ctx, tdx, tdy, Math.sin(dt/1000)*1.5); */
    drawCompound2(circle, ctx, ta, Math.sin(dt/10000)*3.5);
  }
  dt += Date.now() - t;
  t = Date.now();
  requestAnimationFrame(loop);
};
requestAnimationFrame(loop);