<script>
// DEFINE YOUR GLOBAL VARIABLES HERE
var canvas;
var context;
var counter;
counter = 0;
var inc;
inc = 10;
// INITIALIZE THE STARTING FUNCTION
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
// CALL SUBSEQUENT FUNCTIONS, as many as you need
setup();
return setInterval(create, 10 ); // THIS IS WHERE AL HAPPENS
}
function clearCanvas() {
context.clearRect(0,0,canvas.width,canvas.height);
}
function drawBkgd() { // USE THIS AREA TO MODIFY BKGD
context.fillStyle = "pink";
context.fillRect(0,0,canvas.width,canvas.height);
}
function setup() {
clearCanvas();
drawBkgd();
}
function create() {
// >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
counter += inc;
//setup();
if (counter > 255) {
inc = -10;
}
if (counter < 0 ) {
inc = 10;
}
square(counter);
document.getElementById("display").innerHTML = counter + " / " + inc;
// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE
}
function square(counter) {
/*context.strokeStyle = "rgb("+(255-counter)+",0,0)";
context.strokeRect(0,0,counter,counter);*/
context.save();
context.translate(canvas.width/2,canvas.height/2);
context.rotate( Math.PI* 2 * (counter/255) );
context.fillStyle = "rgb("+counter+",0," + (255-counter)+")";
//context.fillRect(canvas.width/2-counter/2,canvas.height/2-counter/2,counter,counter);
context.fillRect(-counter/2,-counter/2,counter,counter);
context.restore();
}
</script>
<style type="text/css">
body,td,th {
font-family: "Lucida Console", Monaco, monospace;
font-size: 10px;
color: #FFF;
}
body {
background-color: #000;
}
</style>
</head>
<body onload="init()">
<canvas id="myCanvas" width="800" height="600"></canvas>
<div id="display">()</div>