JSFiddle - React, Tailwind, and code Playground

by sebleedelisle

HTML

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>RoboTree</title>
</head>
<body>
</body>
</html>

CSS

body {
        background-color: #000000;
        margin: 0px;    
        text-align:center;
    }

JavaScript

// canvas element and 2D context
var canvas = document.createElement( 'canvas' ),
    context = canvas.getContext( '2d' );

canvas.width = 400; 
canvas.height = 400; 
document.body.appendChild(canvas);

var c = context, 
    generation = 0, 
    tree; 


makeTree(); 

canvas.addEventListener("mousedown", makeTree, false); 

function makeTree(){
     tree = new BranchObject(0.6, 0, 1);
}

setInterval(loop, 1000/30);

function loop() { 
    c.save();
    c.clearRect(0,0,800,600); 
    c.translate(200,380); 
    c.rotate(-Math.PI/2);
    c.scale(1,1);
    tree.updateGrowth();
    tree.updateRotation(); 
    tree.render(c);
    c.restore();
}


function randomRange(min, max) { 
    return Math.random()*(max-min) + min; 
}

function BranchObject(scale, angle, generation) { 
    
    this.children = []; 
    this.scale = scale; 
    this.angle = angle; 
    this.generation = generation; 
    this.growth = 0; 
    this.growthVel = 0; 
    this.growDelay = randomRange(0,8); 
    this.growSpeed = randomRange(0.01,0.05); 
    this.growSpring = 0.8; 
    
    this.rotation = 0; 
    this.rotationVel = 0; 
    this.rotationDelay = this.growDelay; 
    this.rotationSpeed = randomRange(0.02,0.05); 
    this.rotationSpring = 0.9; 
    
    if(generation<10){
         
        this.children.push(new BranchObject(randomRange(0.7,0.99), randomRange(-Math.PI/7,-Math.PI/6), generation+1));
        this.children.push(new BranchObject(randomRange(0.7,0.99), randomRange(Math.PI/7,Math.PI/6), generation+1));
    }
    
    this.updateGrowth = function() { 
        if(this.growDelay>0) {
            this.growDelay--; 
        } else { 
            this.growthVel*=this.growSpring; 
            this.growthVel+=((1- this.growth) * this.growSpeed);
            this.growth+=this.growthVel; 
            
            for(var i=0;i<this.children.length; i++) { 
                this.children[i].updateGrowth(); 
            }
        }
    
    };

    this.updateRotation = function() { 
       ...