Background Color:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="motionCanvas.js"> </script>
</head>
<body>
<h1>Moving Dots</h1>
<script>
// create a default canvas.
var canvas = new MotionCanvas(400,400);
canvas.SetClearColor("white");
canvas.NewPattern();
</script>
<p>
Background Color:
<select id="BGColor" onchange="canvas.SetClearColor(this.value); canvas.Redisplay()">
<option value="white">white</option>
<option value="black">black</option>
</select>
<p>
<button type="button" onclick="canvas.Redisplay()">Redraw</button>
<button type="button" onclick="canvas.Move()">Move One Step</button>
<button type="button" onclick="canvas.NewPattern()">New Pattern</button>
<p>
This is a demo to show how to use arrays, a select element and discuss HSL.
</body>
</html>
function MotionCanvas(width, height) {
// make sure that widht and height are good.
if (width == undefined || width < 0) {
width = 300;
}
if (height == undefined || height < 0) {
height = 300;
}
// create the canvas
var canvas = document.createElement('canvas')
canvas.height = height;
canvas.width = width;
// add it to the document
document.body.appendChild(canvas);
// save some info as local values
this.width = width;
this.height = height;
this.clearColor = "#000000";
this.points = 100;
this.lightChange = 2;
this.ctx = canvas.getContext("2d");
// build and fill a new array
this.data = new Array(this.width);
for(var x =0; x < this.width; x++) {
this.data[x] = new Array(this.height);
for(y =0; y< this.height;y++) {
this.data[x][y] = {'hue': 0, 'saturation': 0,
'light': 100, 'age': -1}
}
}
return this;
}
MotionCanvas.prototype = {
SetClearColor: function(color) {
this.clearColor = color;
if (color == "white") {
this.lightChange = 1;
} else {
this.lightChange = -1;
}
return;
},
Clear: function() {
this.ctx.fillStyle=this.clearColor;
this.ctx.fillRect(0,0,this.width,this.height);
return;
},
Redisplay: function() {
var color, x,y;
this.Clear();
for(x =0; x < this.width; x++) {
for(y=0; y < this.height;y++) {
// only draw cells age 0 or older
if (this.data[x][y].age >= 0) {
color = "hsl(" + this.data[x][y].hue + ', '
+ this.data[x][y].saturation + '%, '
+ this.data[x][y].light + '%)'
this.ctx.fillStyle = color
this.ctx.fillRect(x,y,2,2);
}
}
}
return;
},
Move0: function(x,y) {
this.data[x+1][y].age = 0;
this.data[x+1][y].hue = this.data[x][y].hue;
this.data[x+1][y].saturation = 100;
this.data[x+1][y].light = 50;
return;
},
Move1: function(x,y) {
if (this.data[x][y].age >= 0) {
this.data[x][y].light += this.lightChange;
if (this.data[x][y].light <= 0 || this.data[x][y].light >= 100) {
this.data[x][y].age = -1;
} else {
this.data[x][y].age++;
}
}
return;
},
Move: function() {
var x,y, nextX;
for(y=0;y<this.height;y++) {
this.Move1(this.width-1, y);
}
for(x=this.width-2;x>=0;x--) {
for(y=0;y<this.height;y++) {
if (this.data[x][y].age == 0) {
this.Move0(x,y);
}
this.Move1(x,y);
}
}
this.Redisplay();
return;
},
BlankArray: function() {
var x,y;
for(x =0; x < this.width; x++) {
for(y=0; y < this.height;y++) {
this.data[x][y] = {'hue': 0,
'saturation': 0,
'light': 50, 'age': -1}
}
}
},
NewPattern: function() {
var x,y;
var count;
var hue;
this.BlankArray();
for(count = 0; count < this.points; count++) {
x = Math.floor(Math.random()*this.width);
y = Math.floor(Math.random()*this.height);
hue = Math.floor(Math.random()* 360);
this.data[x][y].age = 0;
this.data[x][y].hue = hue;
this.data[x][y].saturation = 100;
this.data[x][y].light = 50;
}
this.Redisplay();
return;
},
}