JSFiddle - React, Tailwind, and code Playground

by Tyler Hogsett

HTML

<div>
    <b>Doodler</b>
</div>
<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; }

html, body { width:100%; height:100%; }

canvas { display:block; }

div {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: helvetica;
}

JavaScript

var SPEED = {
    RANGE: {
        MIN: 1,
        MAX: 3
    }
}
var COLOR_TIMER = {
    RANGE: {
        MIN: 30,
        MAX: 50
    },
    VELOCITY: 5
};
var ANGLE_TIMER = {
    RANGE: {
        MIN: 30,
        MAX: 50
    }
};
var RESET_TIMER = {
    RANGE: {
        MIN: 60,
        MAX: 180
    }
};

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();

setLineWidth();
var speed = getSpeed();
var position = getPosition();
var angle = getAngle();
var angleVelocity = getAngleVelocity();
var color = getColor();
var colorVelocity = getColorVelocity();

var timers = [];
var timersToAdd = [];

timers.push(createColorTimer());
timers.push(createAngleTimer());
timers.push(createResetTimer());

function Timer(ticks, callback, ticker) {
    this.ticks = ticks;
    this.callback = callback;
    this.ticker = ticker;
}

function createColorTimer() {
    return new Timer(
        COLOR_TIMER.RANGE.MIN + Math.round(Math.random() * (COLOR_TIMER.RANGE.MAX - COLOR_TIMER.RANGE.MIN)),
        function() {
            colorVelocity = getColorVelocity();
            timersToAdd.push(createColorTimer());
        },
        function() {
            this.ticks--;
            if(this.ticks === 0) {
                return true;
            }
            
            /*for(var i = 0; i < 3; i++) {
                if(color[i] === 0 || color[i] == 255) {
                    return true;
                }
            }*/
            
            return false;
        });
}

function createAngleTimer() {
    return new Timer(
        ANGLE_TIMER.RANGE.MIN + Math.round(Math.random() * (ANGLE_TIMER.RANGE.MAX - ANGLE_TIMER.RANGE.MIN)),
        function() {
            angleVelocity = getAngleVelocity();
            timersToAdd.push(createAngleTimer());
        });
}

var...