Web
Playing with animated randomized patterns in canvas
<canvas id="canvas"></canvas>
<canvas id="canvas"></canvas>
body {
body {
background-color: #666;
margin: 0;
padding: 0;
width: 100%;
}
#canvas{
background-color: black;
}
window.onload = function(){
window.onload = function(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
FPS = 24,
FRAME_MSEC = 1000 / FPS >> 0,
count = 0,
max = 500, // iterations before shade change
shade = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.moveTo(0, 0);
ctx.strokeStyle = 'white';
setInterval(intervalHandler, FRAME_MSEC);
function intervalHandler(){
count++;
if(count%max === 0){
shade = random(255);
// set new stroke color and start new path
ctx.strokeStyle = "rgb("+shade+","+shade+","+shade+")";
ctx.beginPath();
};
ctx.lineTo(canvas.width, random(canvas.height));
ctx.lineTo(random(canvas.width), canvas.height);
ctx.lineTo(0, random(canvas.height));
ctx.lineTo(random(canvas.width), 0);
ctx.stroke();
};
// helper function for random numbers
// returns a random integer between 0 and n
function random(n){
return Math.floor(Math.random() * n);
};
};