JSFiddle - React, Tailwind, and code Playground

by John Doe

JavaScript

/* initialize stuff */
/* inspiration from https://www.redblobgames.com/x/2122-shape-transition/shape-transition.js*/

var cvs = document.createElement('canvas')
cvs.width = 500
cvs.height = 500
var ctx = cvs.getContext('2d')
cvs.clear = function() {
  ctx.fillStyle = `rgb(${200}, ${200}, ${200})`
  ctx.fillRect(0, 0, cvs.width, cvs.height)
}
document.body.appendChild(cvs)
cvs.clear()


var CIRCLE_COUNT = 7
var ELENDIA_FACTOR = 1 //default = 1
var ELENDIA_OFFSET = 0 //default = 0
var ATAN_ARG_FACTOR = 0.9 //default 1
var ALPHA = 0.2
var PARTICLE_COUNT = 50000
var COUNTER = 0
var MULTIPLIER = 14
var FRAME_LENGTH = 32 //in MS
var PHASE_LENGTH = 200
var JITTER_AMOUNT = 30 //1= one frame
var RADIUS = 150
var RADIUS_BIG_FACTOR = 0.7 //default = 1
var REST_FACTOR = 1.3 // <=1 no rest, 2 = normal rest
var startPoints = []
var endPoints = []
var jitter = []

ctx.fillStyle = 'black'
for(var i=0, angle=0, circleAngle=0; i<PARTICLE_COUNT; i++){
	angle = Math.random()*6.283
  startPoints.push([
  	cvs.width/2 + RADIUS_BIG_FACTOR *Math.cos(angle)*RADIUS, 
  	cvs.height/2 + RADIUS_BIG_FACTOR *Math.sin(angle)*RADIUS
  ])
  circleNr = Math.round(Math.random()*CIRCLE_COUNT)
  circleAngle = circleNr*2*Math.PI/CIRCLE_COUNT
  angle = angle * MULTIPLIER // Math.random()*6.283
  endPoints.push([
  	cvs.width/2 +  Math.cos(angle)*RADIUS/2 + Math.cos(circleAngle)*RADIUS/2,
  	cvs.height/2 + Math.sin(angle)*RADIUS/2  + Math.sin(circleAngle)*RADIUS/2
  ])
  jitter.push(Math.random())
}
function triangle(x){
	if(x<0.5){
  	return 2*x
	} else {
  	return 2-2*x
  }
}
function linearizedSine(x){
	x %= 1
	return Math.min(1, Math.max(-1, REST_FACTOR*triangle(1.5*triangle(x))))/2 + 0.5
}
function sine(x){
	return ELENDIA_FACTOR * (Math.sin(x*Math.PI*2)/2 + 0.5) + ELENDIA_OFFSET
}
function cosine(x){
	return Math.cos(x*Math.PI*2)/2 + 0.5
}
function phase2color(x){
	var c = Math.round(200*x)
	return `rgb(${c}, ${c}, ${c})`
}
function sCurve(x, n){
	if(n<=0){
  	return x
  } else {
		var x2 = x*x
 ...