JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<canvas id="canvas1"></canvas>

JavaScript

//helper functions ----------------------------------------
/*function random(m, M) {
    if(M==undefined||M==null) {
        M=m;
        m=0;
    }
    return Math.random()*(M-m)+m;
}
*/

//class ----------------------------------------------------

function sketchProc($) {
    var dimx = 750;
    var dimy = 750;
    var num = 0;
    var maxnum = 100;

    //grid of cracks
    var cgrid = []; // int[]
    var cracks = []; //Crack[]
    
    //color parameters
    var maxpal = 512;
    var numpal = 0;
    var goodcolor = []; //color[], length:maxpal
    
    //sand painters
    var sands = []; //SandPainter[]
    console.log($);

    //main methods ----------------------------------------------
    $.setup = function() {
        $.size(dimx, dimy)
        $.background(255);
        takecolor();
       
        console.log(goodcolor);
        
        cgrid = new Array(dimx*dimy);
        cracks = new Array(maxnum);
        
        var n=document.createElement("button");
        n.onclick=function(){$.noLoop()};
        n.innerHTML="Stop";
        document.body.appendChild(n);
        
        var l=document.createElement("button");
        l.onclick=function(){$.loop()};
        l.innerHTML="Start";
        document.body.appendChild(l);
        
        begin();
    };

    $.draw = function() {
        for(var n=0;n<num;n++) {
            cracks[n].move();
        }
    };
    
    $.mousePressed = function() {
        begin();
    };
    
    //methods --------------------------------------------
        
    function makeCrack() {
        if(num<maxnum) {
            cracks[num] = new Crack();
            num++;
        }
    }
    
    function begin() {
        for(var y=0;y<dimy;y++) {
            for(var x=0;x<dimx;x++) {
                cgrid[y*dimx+x] = 10001;
            }
        }
        //console.log(goodcolor);
        
        for(var k=0;k<16;k++) {
            var i = $.int($.random(dimx*dimy-1));
            //console.log(i);
           ...