JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<canvas id = "canvas" width = "480" height = "360" style = "border: 1px solid;"></canvas>

JavaScript

let ctx = document.getElementById("canvas").getContext("2d");
let count = 0;
function line(x, y, x2, y2, s) {
	ctx.beginPath();
  ctx.lineWidth = s;
	ctx.moveTo(x, y);
	ctx.lineTo(x2, y2);
	ctx.stroke();
	ctx.closePath();
}
let count2 = 0;
let pox = [];
let poy = [];
let ogx = [];
let ogy = [];
let clicksx = [Math.floor(Math.random()*480)];
let clicksy = [Math.floor(Math.random()*360)];
let clicksd = [-15];
let multiply = -1.55;
let dim = 50;
let space = 8;
for (let i1 = 0; i1 < dim; i1++) {
	for (let i2 = 0; i2 < dim; i2++) {
  	pox.push(i1 * space);
    poy.push(count2 * space);
    ogx.push(i1 * space);
    ogy.push(count2 * space);
    count2 += 1;
  }
  count2 = 0;
}
function render() {
	ctx.clearRect(0, 0, 1000, 1000);
  for (let i = 0; i < ogx.length; i++) {
  	let c = 0;
    pox.splice(i, 1, ogx[i]);
    poy.splice(i, 1, ogy[i]);
    for (let i2 = 0; i2 < clicksx.length; i2++) {
   		let dist = distance(ogx[i] / 1.2, ogy[i] / 1.2, clicksx[i2], clicksy[i2]);
			pox.splice(i, 1, pox[i] + (Math.sin((dist * multiply) + count) * (dim / clicksd[i2])));
      poy.splice(i, 1, poy[i] + (Math.sin((dist * multiply) + count) * (dim / clicksd[i2])));
    }
  }
  count += .05;
  draw();
}
function draw() {
	for (let i = 0; i < (dim * dim); i++) {
  	if (i != Math.floor(i / dim) * dim ) {
  		line(pox[i - 1], poy[i - 1], pox[i], poy[i]);
    }
  }
  for (let i = 0; i < (dim * dim); i++) {
  	//line(pox[(i + ((Math.floor(Math.sqrt(i))) * dim)) - 1], poy[(i + ((Math.floor(Math.sqrt(i))) * dim)) - 1], pox[i + ((Math.floor(Math.sqrt(i))) * dim)], poy[i + ((Math.floor(Math.sqrt(i))) * dim)]);
  }
}
function distance(x, y, x2, y2) {
	return Math.sqrt(((x-x2)*(x-x2))+((y-y2)*(y-y2)));
}
setInterval(render, 10);