JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<script src="http://jaggedsoft.net/demo/mersenne-twister.js"></script>
<script src="http://jaggedsoft.net/demo/universal.js"></script>
<script src="http://jaggedsoft.net/demo/gdi.js"></script>
<canvas id="canvas"></canvas>

CSS

body {
margin:0;
background:#000;
} #canvas {
z-index:1;
position:absolute;
left:0px;
top:0px;
}

JavaScript

var mtrand = new MersenneTwister();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var _w = 1200, _h = 800;
canvas.setAttribute('width',_w);
canvas.setAttribute('height',_h);
setInterval('draw()',1);
var rgb,_r,_g,_b;
var switched = false;
var c = [];
c[0] = Rand(5,250);
c[1] = Rand(5,250);
c[2] = Rand(5,250);
var d = [];
d[0] = RandB();
d[1] = RandB();
d[2] = RandB();
var size = 1;
var size2 = 4;
var i = 27;
var i2 = 0;
var i3 = 0;
var z = 27;
var radians = 0;
var points = 600;
var cx = parseInt(_w / 2);
var cy = parseInt(_h / 2);
var changeno = Rand(50,100);
var dirup = true;
var factor = 0.50;
var bgmode = 0; //2
var bgmax = 2; 
function draw() {
	if ( bgmode == 1 ) {
		canvas.width = _w;
		//ctx.clearRect(0, 0, _w, _h);
	} else if ( bgmode != 0 ) {
		ctx.fillStyle = 'rgba(0,0,0,0.02)';
		ctx.fillRect(0,0,_w,_h);
	}
	ctx.strokeStyle = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
	ctx.lineWidth = size;
	//for ( var dy = 0 ; dy < _h ; dy+=size ) {
		//for ( var dx = 0 ; dx < _w ; dx+=size ) {
			ctx.fillStyle = 'rgb(255,255,255)';
			var lx = cx;
			var ly = cy;
			if ( Rand(0,16) == 1 ) {
				if ( Rand(0,3) == 1 ) d[0] = !d[0];
				if ( Rand(0,3) == 1 ) d[1] = !d[1];
				if ( Rand(0,3) == 1 ) d[2] = !d[2];
			}
			for ( var p = 0 ; p < points ; ++p ) {
				if ( Rand(0,30) == 1 ) {
					if ( Rand(0,3) == 1 ) {
						if ( d[0] ) ++c[0]; else --c[0];
					}
					if ( Rand(0,3) == 1 ) {
						if ( d[1] ) ++c[1]; else --c[1];
					}
					if ( Rand(0,3) == 1 ) {
						if ( d[2] ) ++c[2]; else --c[2];
					}
				}
				for ( var ci = 0 ; ci < 3 ; ++ci ) {
					if ( c[ci] > 254 ) {
						c[ci] = 255;
						d[ci] = !d[ci];
					}
					if ( c[ci] < 16 ) {
						c[ci] = 16;
						 d[ci] = !d[ci];
					}
				}
				ctx.strokeStyle = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
				var radians = i*p;
				var x = DPointX(cx,radians,size+(p*factor));
				var y = DPointY(cy,radians,size+(p*factor));
				//var c =...