<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
var c=document.getElementById('demo');
var cc=c.getContext("2d");
c.style.backgroundColor="#222";
window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);
var x,y;
setInterval(draw,40); //takes care of the drawing
function setDimensions() {
c.width=window.innerWidth;
c.height=window.innerHeight;
blobarray=[ ]; //removes all items in array)
x=c.width/2;
y=c.height/2;
};
var blobarray = [ ];
var red=250;
var green=0;
var blue=0;
//this script returns colors that follow the red - yellow - green - cyan - blue - purple - red cycle
//in theory this would return 1536 different colors, but as I step through by 5, it only returns 307 different colors
function getNextColor() {
if (red==250 && green<250 && blue==0) {
green+=5;
};
if (green==250 && red>0) {
red-=5;
};
if (green==250 && red==0 && blue<250) {
blue+=5;
};
if (red==0 && blue==250) {
green-=5;
};
if (blue==250 && green==0) {
red+=5;
};
if (red==250 && green==0 && blue!=0) {
blue-=5;
};
return "rgb(" + red + "," + green + "," + blue + ")";
}
function draw() { //wordt om de 50 milliseconden uitgevoerd
var blob = {color:getNextColor(),radius:40,line:0};
blobarray.push(blob);
for (var i=0;i<blobarray.length;i++) {
if (blobarray.length>100) {
blobarray.splice(0,1);
}
else
{
var cblob=blobarray[i];
cc.beginPath();
if (cblob.radius==40) {cc.fillStyle = "black"; } else {cc.fillStyle = cblob.color; };
cc.arc(x, y, cblob.radius, 0, Math.PI*2,true);
cc.fill();
cblob.radius=cblob.radius+15;
cc.clearRect(0,0,160,50);
cc.fillStyle="black";
cc.fillRect(0,0,160,50);
cc.fillStyle="white";
cc.font="15px Arial";
cc.fillText (cblob.color,30,30);
};
};
};
</script>
</body>
</html>