JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="https://github.com/lmccart/p5.js/releases/download/0.3.13/p5.min.js"></script>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    overflow:hidden;
}

JavaScript

var setup = function () {
   frameRate(300);
    createCanvas(document.body.getBoundingClientRect().width, document.body.getBoundingClientRect().height);
};
var count = 0;
var draw;
var canvas = document.getElementsByTagName('canvas');[0];
var backupcanvas = document.createElement('canvas');
backupcanvas.width = screen.width;
backupcanvas.height = screen.height;
addEventListener('resize',function(){
    backupcanvas.getContext('2d').drawImage(canvas,0,0);
    resizeCanvas(document.body.getBoundingClientRect().width, document.body.getBoundingClientRect().height);
    canvas.getContext('2d').drawImage(backupcanvas,0,0);
});
var c;
var r =255;
var g=100;
var b = 0;
setTimeout(function timer() {
    count++;
                 r=Math.abs(r+((Math.random()*512)-256))%256;
g=Math.abs(g+((Math.random()*512)-256))%256
b=Math.abs(b+((Math.random()*512)-256))%256
    draw = (function () {
        return function () {
            c = color(0, 0, 0, Math.abs((count - 255) % 100) / 2);

            background(c);
            stroke(color(r, g, b , 255));
            text(count + "", 100, 100);
            fill(255-r,255-g,255-b,255);
            

            ellipse(Math.random() * width,Math.random() * height,Math.random()*50, Math.random()*50);
        }
    })( )
    setTimeout(timer,1000)
}, 50);