Cubes
Bunch of cubes move in and out randomly
One of my first js1k experiments. This is from the js1k era before any shim was provided, so a few extra bytes were taken by getting the canvas context, etc.
No true 3D logic is applied here. Instead it’s single point perspective, and the cubes are assembled much like you would draw them on paper, tapering down to a central vanishing point. Using this same simple drawing methods the cubes can simply be scaled towards the same centre point to achieve animation.
All that’s left is some simple z-sorting. With this one point perspective the cubes are simply rendered from the outside inwards to achieve correct z-sorting.
Compressed code (1018 bytes):
var a=document.getElementById("c"),b,c,d,e,f=8,h=600,i=300,j=30,k=j*0.95,l,m=[],n=Math,o,p,q,r,s,t,u,v,w,x,y,z,A;for(d=0;d<256;d++){b=d%16;c=~~(d/16);o=f-n.abs(f-b-0.5)+f-n.abs(f-c-0.5)-1;m[o]||(m[o]=[]);m[o].push({x:b,y:c,c:1,a:1})}a.height=a.width=h;a=a.getContext("2d");a.d=a.moveTo;a.b=a.lineTo;a.a=a.setTransform;a.e=a.beginPath;a.f=a.closePath;a.c=a.fill;B();function B(){a.a(1,0,0,1,0,0);a.clearRect(0,0,h,h);for(d=0;m[d];){for(e=0;m[d][e];){l=m[d][e];b=l.x;c=l.y;p=b-f;q=c-f;r=p+1;s=q+1;t=j*r;u=j*q;v=k*r;w=k*q;x=k*s;y=j*s;z=j*p;A=k*p;l.c+=(n.random()-l.a*0.5)*0.2;l.a-=(l.a-l.c)*0.01;l.a=l.a<0.1?0.1:l.a;a.a(l.a,0,0,l.a,i,i);C(l.a,0.4);a.e();if(b<f){a.d(t,u);a.b(v,w);a.b(v,x);a.b(t,y)}else{a.d(z,u);a.b(A,w);a.b(A,x);a.b(z,y)}a.f();a.c();a.e();if(c<f){C(l.a,0.6);a.d(t,y);a.b(v,x);a.b(A,x);a.b(z,y)}else{C(l.a,0.2);a.d(t,u);a.b(v,w);a.b(A,w);a.b(z,u)}a.f();a.c();C(l.a,0.5);a.fillRect(z,u,j,j);e++}d++}setTimeout(B,1)}function C(D,E){g=1-D*E;g=g<0.1?0.1:g>1?1:g;g=~~(g*255);a.fillStyle="rgb(0,"+g+","+g+")"};
Expanded code:
var a = document.getElementById("c"),
b,
c,
d,
e,
f = 8,
h = 600,
i = 300,
j = 30,
k = j * 0.95,
l,
m = [],
n = Math,
o,
p,
q,
r,
s,
t,
u,
v,
w,
x,
y,
z,
A;
for (d = 0; d < 256; d++) {
b = d % 16;
c = ~~(d / 16);
o = f - n.abs(f - b - 0.5) + f - n.abs(f - c - 0.5) - 1;
m[o] || (m[o] = []);
m[o].push({ x: b, y: c, c: 1, a: 1 });
}
a.height = a.width = h;
a = a.getContext("2d");
a.d = a.moveTo;
a.b = a.lineTo;
a.a = a.setTransform;
a.e = a.beginPath;
a.f = a.closePath;
a.c = a.fill;
B();
function B() {
a.a(1, 0, 0, 1, 0, 0);
a.clearRect(0, 0, h, h);
for (d = 0; m[d]; ) {
for (e = 0; m[d][e]; ) {
l = m[d][e];
b = l.x;
c = l.y;
p = b - f;
q = c - f;
r = p + 1;
s = q + 1;
t = j * r;
u = j * q;
v = k * r;
w = k * q;
x = k * s;
y = j * s;
z = j * p;
A = k * p;
l.c += (n.random() - l.a * 0.5) * 0.2;
l.a -= (l.a - l.c) * 0.01;
l.a = l.a < 0.1 ? 0.1 : l.a;
a.a(l.a, 0, 0, l.a, i, i);
C(l.a, 0.4);
a.e();
if (b < f) {
a.d(t, u);
a.b(v, w);
a.b(v, x);
a.b(t, y);
} else {
a.d(z, u);
a.b(A, w);
a.b(A, x);
a.b(z, y);
}
a.f();
a.c();
a.e();
if (c < f) {
C(l.a, 0.6);
a.d(t, y);
a.b(v, x);
a.b(A, x);
a.b(z, y);
} else {
C(l.a, 0.2);
a.d(t, u);
a.b(v, w);
a.b(A, w);
a.b(z, u);
}
a.f();
a.c();
C(l.a, 0.5);
a.fillRect(z, u, j, j);
e++;
}
d++;
}
setTimeout(B, 1);
}
function C(D, E) {
g = 1 - D * E;
g = g < 0.1 ? 0.1 : g > 1 ? 1 : g;
g = ~~(g * 255);
a.fillStyle = "rgb(0," + g + "," + g + ")";
}