Bernard’s Blog

I’ve managed to reduce the size of my JS1k submission by 6 bytes and at the same time add functionality that expands the flame to fill the browser window.  You can see it here.

Adding the auto sizing feature added 20 bytes, which I was able to more than offset by running most of the for loops backwards.

Here’s the new code with new lines added.

q=0;c=80;r=60;u=c*r;K=16;m=255;M=Math;F=M.floor;R=M.random;D=document;
C=D.body.children[0];w=C.width=innerWidth;h=(C.height=innerHeight)/r*57;
z=C.getContext("2d");O=D.createElement("canvas");o=O.getContext("2d");
n=[];for(x=u*2;x--;)n[x]=0;a=[];for(i=m+1;i--;)a[i*3]=i<K?0:i<32?2*(i-K):
i<64?F(K+240*(i-32)/32):m,a[i*3+1]=i<64?0:i<112?F(85*(i-64)/K):m,
a[i*3+2]=i<K?2*i:i<32?(32-(i-K)*2):i<112?0:i<160?F(85*(i-96)/K):m;
function l(){f=q*u;q++;q&=1;s=k=q*u;for(x=78;--x;)t=f+x+59*c,n[t-c]=
F(R()*K+64),n[t]=F(R()*K+64),n[t+c]=F(R()*K+128);for(b=F(R()*K+1);b--;)
t=f+F(R()*78+1)+4640,n[t-81]=n[t-c]=n[t+79]=n[t-1]=n[t]=n[t+1]=n[t-79]=
n[t+c]=n[t+81]=m;s++;f+=81;for(i=4524;i--;){b=(n[f-79]+n[f-c]+n[f-81]+
n[f-1]+n[f+1]+n[f+79]+n[f+c]+n[f+81])>>3;f++;n[s++]=b>0?b-1:b;if(i%78==0)
f+=2,s+=2}d=o.getImageData(0,0,c,r);g=d.data;for(p=0;p<u*4;p+=4)e=n[k++]*3,
g[p]=a[e],g[p+1]=a[e+1],g[p+2]=a[e+2],g[p+3]=m;o.putImageData(d,0,0);
z.drawImage(O,0,0,80,57,0,0,w,h);setTimeout(l,25)}l()

I’ve entered an updated version of my HTML canvas Flame demo into the 1K Javascript demo contest.

It was quite a challenge to reduce its 6K size down to under 1K.  I eventually got it to 972 bytes shown below (the real code is all on one line, I’ve added a few line breaks for readability).

You can see it running here.

q=0;c=80;r=60;u=c*r;K=16;function l(){f=q*u;q=(q+1)%2;s=k=q*u;for(x=1;x<79;x++)
t=f+x+59*c,n[t-c]=F(R()*K+64),n[t]=F(R()*K+64),n[t+c]=F(R()*K+128);b=F(R()*K+1);
for(i=0;i<b;i++)t=f+F(R()*78+1)+4640,n[t-81]=n[t-c]=n[t+79]=n[t-1]=n[t]=n[t+1]=
n[t-79]=n[t+c]=n[t+81]=m;s++;f+=81;for(i=1;i<=4524;i++){b=(n[f-79]+n[f-c]+n[f-81]
+n[f-1]+n[f+1]+n[f+79]+n[f+c]+n[f+81])>>3;if(b>0)b--;f++;n[s++]=b;if(i%78==0)f+=2,
s+=2}d=o.getImageData(0,0,c,r);g=d.data;for(p=0;p<u*4;p+=4)e=n[k++]*3,g[p]=a[e],
g[p+1]=a[e+1],g[p+2]=a[e+2],g[p+3]=m;o.putImageData(d,0,0);z.drawImage(O,0,0,80,
57,0,0,640,456);setTimeout("l()",25)}m=255;M=Math;F=M.floor;R=M.random;D=document;
C=D.body.children[0];C.width=640;C.height=480;z=C.getContext("2d");
O=D.createElement("canvas");o=O.getContext("2d");n=[];for(x=0;x<u*2;x++)n[x]=0;
a=[];for(i=0;i<256;i++)a[i*3]=i<K?0:i<32?2*(i-K):i<64?F(K+240*(i-32)/32):m,
a[i*3+1]=i<64?0:i<112?F(85*(i-64)/K):m,a[i*3+2]=i<K?2*i:i<32?(32-(i-K)*2):i<112?
0:i<160?F(85*(i-96)/K):m;l()

During my time off I’ve made some more origami boxes.  Used 208 paper squares, about 90 minutes a box.

I’ve ported my old assembly flame demo mentioned here and here to run using a HTML canvas tag. It should work in newer browsers. It works fine in Firefox 3.6.8 and Chrome 5.

Below is the Javascript source which you can also download.  You’ll want to save the target of that link.

	var canvas;
	var paused = false;
	var delay = 25;
	var ctx;

	var cols = 320 / 5;
	var rows = 240 / 5;

	var cw;
	var ch;

	var pal;
	var frame;
	var curr = 0;

    function init() {
      canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        ctx = canvas.getContext("2d");

		cw = canvas.width / cols;
		ch = canvas.height / rows;

		pal = new Array(256);
		for(var i=0; i<16; i++) {
			pal[i] = 'rgb(0,0,'+2*i+')';
			pal[i+16] = 'rgb('+2*i+',0,'+(32-i*2)+')';
		}
		for(var i=0; i<32; i++) {
			pal[32+i] = 'rgb('+Math.floor(16+240*i/32)+',0,0)';
		}
		for(var i=0; i<48; i++) {
			pal[64+i] = 'rgb(255,'+Math.floor(85*i/16)+',0)';
			pal[64+48+i] = 'rgb(255,255,'+Math.floor(85*i/16)+')';
		}
		for(var i=0; i<96; i++) {
			pal[i+64+48+48] = 'rgb(255,255,255)';
		}

		//for(var i=0; i<256; i++) {
		//	console.info(i+' '+pal[i]);
		//}

		frame = new Array(2);
		for(var f=0; f<2; f++) {
			frame[f] = new Array(cols);
			for(var x=0; x<cols; x++) {
				frame[f][x] = new Array(rows);
				for(var y=0; y<rows; y++) {
					frame[f][x][y] = 0;
				}
			}
		}

		loop();
      }
    }

	function logic() {

		var f = curr;
		var nf = (curr+1) % 2;

		for(var x=1; x<cols-1; x++) {
			var y = rows-1;
			frame[f][x][y-1] = Math.floor(Math.random() * 15 + 64);
			frame[f][x][y] = Math.floor( Math.random() * 15 + 64);
			frame[f][x][y+1] = Math.floor( Math.random() * 15 + 128);
		}		

		var b = Math.floor(Math.random()*15+1);
		for(var k=0; k<b; k++) {
			var x = Math.floor(Math.random()*(cols-2) +1);
			var y = rows-2;
			frame[f][x-1][y-1] = 255;
			frame[f][x+0][y-1] = 255;
			frame[f][x+1][y-1] = 255;
			frame[f][x-1][y-0] = 255;
			frame[f][x+0][y-0] = 255;
			frame[f][x+1][y-0] = 255;
			frame[f][x-1][y+1] = 255;
			frame[f][x+0][y+1] = 255;
			frame[f][x+1][y+1] = 255;
		}

		for(var x=1; x<cols-1; x++) {

			for(var y=1; y<rows-1; y++) {

				var a = 0;
				//a += frame[f][x+0][y-0];
				a += frame[f][x+0][y-1];
				a += frame[f][x-1][y-0];
				a += frame[f][x+1][y-0];
				a += frame[f][x+0][y+1];

				a += frame[f][x+1][y-1];
				a += frame[f][x-1][y+1];
				a += frame[f][x-1][y-1];
				a += frame[f][x+1][y+1];

				a = a >> 3;

				if(a > 0) {
					a--;
				}

				var k = Math.floor(Math.random() * 3 + 1);
				if(a > k) {
					a = a - k;
				}

				frame[nf][x][y-1] = Math.floor(a);
			}
		}

		curr = nf;

	}

	function render() {

		for(var x=0; x<cols; x++) {
			for(var y=0; y<rows; y++) {
				ctx.fillStyle = pal[frame[curr][x][y]];
				ctx.fillRect(x*cw, y*ch , cw, ch);
			}
		}

		ctx.fillStyle = '#000';
		ctx.fillRect(0, rows*ch-(ch*2), cols*cw, 2*ch);

	}

	function loop() {
		if (!paused) {
			logic();
			render();
		}
		setTimeout("loop()", delay);
	}

	function pause() {
		paused = !paused;
	}