<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,50); //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=255;
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==255 && green<255 && blue==0) {
green+=5;
};
if (green==255 && red>0) {
red-=5;
};
if (green==255 && red==0 && blue<255) {
blue+=5;
};
if (red==0 && blue==255) {
green-=5;
};
if (blue==255 && green==0) {
red+=5;
};
if (red==255 && green==0 && blue!=0) {
blue-=5;
};
return "rgb(" + red + "," + green + "," + blue + ")";
}
function draw() { //wordt om de 50 milliseconden //uitgevoerd
cc.clearRect(0,0,c.width,c.height);
var blob = {color:getNextColor(),radius:5,line:1,opacity:1};
blobarray.push(blob);
for (var i=0;i<blobarray.length;i++) {
if (blobarray.length>40) {
blobarray.splice(0,1);
}
else
{
blob=blobarray[i];
cc.beginPath();
cc.globalAlpha=blob.opacity;
cc.lineWidth=blob.line;
cc.strokeStyle = blob.color;
cc.arc(x, y, blob.radius, 0, Math.PI*2);
cc.stroke();
blob.line+=2;
blob.opacity-=0.025;
blob.radius+=blob.line + blob.line/5;
cc.clearRect(0,0,160,50);
cc.globalAlpha=1;
cc.fillStyle="black";
cc.fillRect(0,0,160,50);
cc.fillStyle="white";
cc.font="15px Arial";
cc.fillText (blob.color,30,30);
}
};
};
</script>
</body>
</html>