<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="#000";
window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);
var x,y,radius,pupilX;
setInterval(draw,10); //takes care of the drawing
function setDimensions() {
c.width=window.innerWidth;
c.height=window.innerHeight;
radius=Math.floor(c.height/3);
x=c.width/2;
y=c.height/2;
pupilX=x;
};
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++;
};
if (green==255 && red>0) {
red--;
};
if (green==255 && red==0 && blue<255) {
blue++;
};
if (red==0 && blue==255) {
green--;
};
if (blue==255 && green==0) {
red++;
};
if (red==255 && green==0 && blue!=0) {
blue--;
};
return "rgb(" + red + "," + green + "," + blue + ")";
}
function draw() {
cc.clearRect(0,0,c.width,c.height);
drawEllipse(x,y,c.width,c.height,"white");
cc.beginPath();
cc.fillStyle = getNextColor();
cc.arc(pupilX, y, radius, 0, Math.PI*2);
cc.fill();
cc.closePath();
drawEllipse(pupilX, y, radius/2, radius,"black")
movePupilX();
};
var movePos=true;
//this is where the pupil will move left to right (and back)
function movePupilX () {
if (pupilX < x + x/4 && movePos) {
return pupilX++;
}
else
{
movePos=false;
if (pupilX < x - x/4) {movePos=true;}
return pupilX--;
}
}
//copyright http://www.williammalone.com/briefs/how-to-draw-ellipse-html5-canvas/
function drawEllipse(centerX, centerY, width, height, fillStyle) {
cc.beginPath();
cc.moveTo(centerX, centerY - height/2); // A1
cc.bezierCurveTo(
centerX + width/2, centerY - height/2, // C1
centerX + width/2, centerY + height/2, // C2
centerX, centerY + height/2); // A2
cc.bezierCurveTo(
centerX - width/2, centerY + height/2, // C3
centerX - width/2, centerY - height/2, // C4
centerX, centerY - height/2); // A1
cc.fillStyle = fillStyle;
cc.fill();
cc.closePath();
}
</script>
</body>
</html>