JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<input type="range" id="range" min="1" max="10" value="10" />
<canvas id="canvas"></canvas>

CSS

html, body, #canvas{
  width: 100%;
  margin: 0;
  padding: 0;
}

canvas {
	height: 1900px;
}

JavaScript

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');

w = parseInt($("canvas").width(), 10);
h = parseInt($("canvas").height(), 10);

canvas.width = w;
canvas.height = h;

var mousex = -10000;
var mousey = -10000;

var maxLength = 150;
  
cntr = 0;

var CircleArr = new Array();

var reset = function () {
	CircleArr = new Array();
	CircleArr[0] = {
		x: w / 2,
		y: h,
		s: w/50,
		color: "#ffffff"
	};
}

var update = function () {
	var range = document.querySelector("#range").value;

	if(cntr++ % range == 0){
		createCircle();
	}

	for(var circle in CircleArr){
		circle = CircleArr[circle];
		circle.x += Math.random()*10-5;
		circle.y -= Math.random()+5;
	}

	while(CircleArr.length > 2 && (CircleArr[0].x + CircleArr[0].s > w || CircleArr[0].x + CircleArr[0].s < 0 || CircleArr[0].y + CircleArr[0].s > h || CircleArr[0].y + CircleArr[0].s < 0) ){
		CircleArr.shift();

	}
};

function createCircle(){

	tmp = CircleArr[CircleArr.length-1];
	
	if (CircleArr.length >= maxLength) {
		CircleArr.shift();
	}

	CircleArr[CircleArr.length] = {
		x: mousex,
		y: mousey,
		s: Math.random()*w/50,
		color: "#ffffff"
	};
}

var render = function () {
	// wipe the canvas
	ctx.fillStyle = "#4BF";
	ctx.fillRect(0,0,10000,100000);

	// draw the data
	for(var circle in CircleArr){
		current = CircleArr[circle];
		drawCircle(ctx,current.color,current.x,current.y,current.s,0,"#FFF");
	}

};

function drawCircle(ctx, fillColor, x, y, radius, strokeWidth, strokeColor){
	/*ctx.fillStyle = colorToHex("rgb("+fillColor[0].toFixed(0)+","+fillColor[1].toFixed(0)+","+fillColor[2].toFixed(0)+")");*/
	ctx.fillStyle = "#EEEEEE";
	ctx.beginPath();
	ctx.arc(x,y,radius,0,Math.PI*2,false);
	ctx.closePath();
	if(strokeWidth != 0){
		ctx.lineWidth = strokeWidth;
		ctx.strokeStyle=strokeColor;
		ctx.stroke();
	}
	ctx.fill();
}

var main = function () {
	var now = Date.now();
	var delta = now - then;

	update(delta / 1000);
	render();

	then = now;
};

reset();
var then =...