JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="drawingboard" height="400px" width="400px">Your browser doesn't support canvas so this is pretty boring</canvas>
<footer>inspired by creative js's vid: <a href="http://vimeo.com/36278748">http://vimeo.com/36278748</a>
</footer>
CSS
body {
font-family: Verdana, sans serif;
}
#drawingboard {
display: block;
margin: auto;
background-color: #f0f0f0;
}
footer {
margin: 10px;
text-align: center;
}
JavaScript
var INTERVALRATE = 30,
isRunning = false;
var Debug = {
stop: function () {
clearInterval(interval);
isRunning = false;
},
start: function () {
var ir = INTERVALRATE,
fn = drawLyrics;
if (isRunning) return;
if (arguments.length === 1) {
// interval
ir = arguments[0];
} else if (arguments.length === 2) {
// fn, interval
fn = arguments[0];
ir = arguments[1];
}
interval = setInterval(fn, ir);
isRunning = true;
return interval;
},
toggle: function () {
if (isRunning) {
this.stop();
} else {
this.start();
}
}
};
function makeBlob() {
return {
x: 240,
y: 240,
xSpeed: randomRange(-4, 4),
ySpeed: randomRange(-4, 4),
fillColor: {
r: randomRange(0, 255),
g: randomRange(0, 255),
b: randomRange(0, 255),
a: parseFloat(randomRange(0, 1000) / 1000)
}
};
}
function makeBlob() {
var _xSpeed = _ySpeed = 0;
while ((_xSpeed === 0) && (_ySpeed === 0)) {
_xSpeed = randomRange(-7, 7);
_ySpeed = randomRange(-7, 7);
}
return {
x: 240,
y: 240,
xSpeed: _xSpeed,
ySpeed: _ySpeed,
color: {
r: randomRange(0, 255),
g: randomRange(0, 255),
b: randomRange(0, 255),
a: parseFloat(randomRange(0, 1000) / 1000)
}
};
}
function randomRange(start, end) {
// start & end are inclusive
// eg: randomRange(1,2) produces results in range [1,2]
// pre-condition: emd > start
var delta = Math.abs(end - start);
return Math.round(Math.abs(Math.random() * (delta + 1)) + start);
}
var counter = countsToWait = 10,
curWord = 0,
lyricArray = [];
function drawLyrics() {
if (counter !== countsToWait) {
counter++;
...