Animating Blobs 2
by sirfizx
HTML
<canvas id="c"/>
JavaScript
ig = document.getElementById("c");
ig.width = 320;
ig.height = 240;
// dammit opera...
if (!("createImageData" in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.createImageData = function(sw,sh) { return this.getImageData(0,0,sw,sh);}}
var p1 = 0,
p2 = 0,
p3 = 0,
p4 = 0,
// t vars are indices which will be used to grab
// values from the imageSpawnArray to then be added
// together
t1, t2, t3, t4,
imageSpawnArray = [],
ti = 15,
cv = ig.getContext('2d'),
cd = cv.createImageData(320, 240),
rad,
i, j, x,
idx,
as = 2.6, fd = 0.4, as1 = 4.4, fd1 = 2.2, ps = -4.4, ps2 = 3.3;
function init() {
var i = 512;
while (i--) {
rad = (i * 0.703125) * 0.0174532;
imageSpawnArray[i] = Math.cos(rad)*Math.cos(rad) * 1024;
}
}
function main() {
init();
draw();
}
function rand(va) {
return Math.random(va);
}
document.onclick = function(){
as = rand(300)*5;
fd = rand(300)*10;
as1 = rand(200)*50;
fd2 = rand(300)*50;
ps = (rand(200)*20)-10;
ps2 = (rand(200)*40)-20;
};
function draw() {
cdData = cd.data;
t4 = p4;
t3 = p3;
//loop thru horizontal pixels along canvas width
i = 320; while(i--) {
t1 = p1 + 5;
t2 = p2 + 3;
// use bitwise and operator with assignment operator
// the result is the number represented by the common
// 1's in binary notation
t3 &= 511;
t4 &= 511;
//nested loop from bottom to top
//starting at far right of canvas
j = 240; while(j--) {
t1 &= 511;
t2 &= 511;
x = imageSpawnArray[t1] + imageSpawnArray[t2] +
imageSpawnArray[t3] + imageSpawnArray[t4];
idx = (i + j * ig.width) * 4;
cdData[idx] = x/as;//as
cdData[idx + 1] = x/fd;//fd
cdData[idx + 2] = x/ps;//ps
// 255 gives full contrast
cdData[idx + 3] = 255;
t1 += 5;
t2 += 3;
}
t4 += as1;
t3 += fd1;
}
cd.data =...