JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

//configurable variables
boolean
	exportMode = false; //set to true when exporting, false when designing
String
	folderPrefix = "e-7680";
int
	fps = 24,
	outputScale = 1, //set to 2 or 4 when exporting, 1 when designing
	windowSize = 480 * outputScale,
	numFrames = 48,
	samplesPerFrame = 8; //set to 64 or 128 when exporting, 4 or 8 when designing

float
	motionBlurFactor = 1.0;


//you should probably leave these variables alone
int
	currentFrame = 0,
	preserveAlpha = 0xff000000;
int[][]
	motionBlurBuffer;
float
	time = 0,
	half = windowSize / 2,
	pi = PI,
	tau = pi * 2.0,
	deg = pi / 180.0;



int
	numStaticDots = 6,
	numOrbitingDots = 3;
float
	lumBling = 1.0,
	lumLine = 0.25,
	staticDotRotaryOffset = tau / (float) numStaticDots,
	orbitingDotRotaryOffset = tau / (float) numOrbitingDots;


StaticDot[] staticDotList = new StaticDot[numStaticDots];
OrbitingDot[] orbitingDotList = new OrbitingDot[numOrbitingDots];

float range(float startPoint, float stopPoint, float value){
	return min(1, max(0, map(value, startPoint, stopPoint, 0.0, 1.0)));
}

//reference: https://github.com/sole/tween.js/blob/master/src/Tween.js
float sinusoidalInOut(float k){
	return 0.5 * ( 1.0 - cos( pi * k ) );
}

float cubicIn(float k){
	return k * k * k;
}

float cubicOut(float k){
	return --k * k * k + 1;
}

float cubicInOut(float k){
	if ( ( k *= 2.0 ) < 1.0 ) return 0.5 * k * k * k;
	return 0.5 * ( ( k -= 2.0 ) * k * k + 2.0 );
}


class OrbitingDot{
	int index;
	float
		distanceFromCenter = 90,
		maxLineDistance = 300,
		minLineDistance = 90,
		maxRadiusDistance = 170,
		minRadiusDistance = 40,
		outerRadius = 15,
		rotaryOffset,
		x, y,
		innerRadius;
	OrbitingDot(int id){
		index = id;
	}
	void update(){
		int i;
		float
			distance,
			fractionalOpacity,
			fractionalRadius;
		StaticDot staticDot;

		rotaryOffset = tau / (float)numOrbitingDots * time + ((float)index * orbitingDotRotaryOffset);

		distanceFromCenter = cos(rotaryOffset * (float)numOrbitingDots - pi * 0.5) * 100 +...