JS1k 2011 - 979 - Details - A long distance JavaScript golfing competition

Author:

Antti Silvast

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

Compo:

classic

Demo link:

https://js1k.com/2011-trail/demo/979

Shortlink:

https://js1k.com/979

Blog post:

please update here!

Bytes:

1022

Chars:

1022

Submission

w=c.width=800;i=new Image();i.src="data:image/bmp;base64,Qk26AQAAAAAAADYAAAAoAAAAgQAAAAEAAAABABgAAAAAAIQBAAATCwAAEwsAAAAAAAAAAAAA/z67/w67/8e6ur+Ggv/D4brX38L///C6uP/g/n////j/t/fw/z//f/5/eH/8/7Z4P/8//j//fLw/tTw8/4//H/8PD57vD4aftAcC/9//D/+HDw7/H4fPAgcD/7QDh//P/4f/7yeHgQ+LA8AD4/+0/8P/5/+Hz/ezAcAHswHg//H/4f/g7uH/w/D7+MH8gHiA/P+xf/g/8P7w//j/4P/+P+B/wB7gsMAeH/5/+D/8f/h//n/4P/J/8B/wD/AP4A7g/g+wH/wf/D/8P/8/+B//B/gP8Af4AvAHB7Dw/g//H/4P/5/+D/+f/AP8A/wD+DH4sPgAg/+B/wP/5/+D/+f/AP8A/wD/Dv4A/gD+/8Cwgf/B//H/sf/7/4D/gP+A/wj/AP8G4LD//8D//P/g//j/wP/A/8D/jv/A/4L/sP+A8P/g//7/4P/8/+D/4P/g/8L/wP/A//D///yx+P/4//j/8P/4//D//v/w//7/uv/+8P/3/bn///z/uf/w/v/+//j///67AA==";with(a){i.onload=function(){drawImage(i,0,0);D=getImageData(0,0,w,1).data;s=0;setInterval(function(){I=function(){s++;if((s&3)==3)s++;};clearRect(0,0,w,150);globalAlpha=0.5;f=D[s]&15;I();for(y=0;y<12;y++){if(y<f)b=65535;else{b=D[s];I();b+=D[s]<<8;I();}for(x=0;x<16;x++){if(!(b&1<<x))z=5;else z=x/8-8;for(j=9;j>=0;j--,z++)fillRect(j*80+x*4,y*4,z,5);}}if(s>515)s=0;},75);}}

Description

The Cowboy is a JS 1k demo that experiments in video playback. A cowboy rides past the screen in ten manipulated versions of the same short animation. Specific software, created with Processing, was used to transform each frame of the original video to a minimalistic black and white animation screen. The original video is public domain and was retrieved from the digital library archive.org (link: http://www.archive.org/details/CEP500). (Update: added Twitter contact details.)

Base64 encoded

dz1jLndpZHRoPTgwMDtpPW5ldyBJbWFnZSgpO2kuc3JjPSJkYXRhOmltYWdlL2JtcDtiYXNlNjQsUWsyNkFRQUFBQUFBQURZQUFBQW9BQUFBZ1FBQUFBRUFBQUFCQUJnQUFBQUFBSVFCQUFBVEN3QUFFd3NBQUFBQUFBQUFBQUFBL3o2Ny93NjcvOGU2dXIrR2d2L0Q0YnJYMzhMLy8vQzZ1UC9nL24vLy8vai90L2Z3L3ovL2YvNS9lSC84LzdaNFAvOC8vai8vZkx3L3RUdzgvNC8vSC84UEQ1N3ZENGFmdEFjQy85Ly9ELytIRHc3L0g0ZlBBZ2NELzdRRGgvL1AvNGYvN3llSGdRK0xBOEFENC8rMC84UC81LytIei9lekFjQUhzd0hnLy9ILzRmL2c3dUgvdy9ENytNSDhnSGlBL1AreGYvZy84UDd3Ly9qLzRQLytQK0Ivd0I3Z3NNQWVILzUvK0QvOGYvaC8vbi80UC9KLzhCL3dEL0FQNEE3Zy9nK3dIL3dmL0QvOFAvOC8rQi8vQi9nUDhBZjRBdkFIQjdEdy9nLy9ILzRQLzUvK0QvK2YvQVA4QS93RCtESDRzUGdBZy8rQi93UC81LytELytmL0FQOEEvd0QvRHY0QS9nRCsvOEN3Z2YvQi8vSC9zZi83LzREL2dQK0Evd2ovQVA4RzRMRC8vOEQvL1AvZy8vai93UC9BLzhEL2p2L0EvNEwvc1ArQThQL2cvLzcvNFAvOC8rRC80UC9nLzhML3dQL0EvL0QvLy95eCtQLzQvL2ovOFAvNC8vRC8vdi93Ly83L3V2Lys4UC8zL2JuLy8vei91Zi93L3YvKy8vai8vLzY3QUE9PSI7d2l0aChhKXtpLm9ubG9hZD1mdW5jdGlvbigpe2RyYXdJbWFnZShpLDAsMCk7RD1nZXRJbWFnZURhdGEoMCwwLHcsMSkuZGF0YTtzPTA7c2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXtJPWZ1bmN0aW9uKCl7cysrO2lmKChzJjMpPT0zKXMrKzt9O2NsZWFyUmVjdCgwLDAsdywxNTApO2dsb2JhbEFscGhhPTAuNTtmPURbc10mMTU7SSgpO2Zvcih5PTA7eTwxMjt5Kyspe2lmKHk8ZiliPTY1NTM1O2Vsc2V7Yj1EW3NdO0koKTtiKz1EW3NdPDw4O0koKTt9Zm9yKHg9MDt4PDE2O3grKyl7aWYoIShiJjE8PHgpKXo9NTtlbHNlIHo9eC84LTg7Zm9yKGo9OTtqPj0wO2otLSx6KyspZmlsbFJlY3Qoaio4MCt4KjQseSo0LHosNSk7fX1pZihzPjUxNSlzPTA7fSw3NSk7fX0=

Original source

w = c.width = 800;
i = new Image();
// the video data is stored as RGB BMP 'image' 
i.src="data:image/bmp;base64,Qk26AQAAAAAAADYAAAAoAAAAgQAAAAEAAAABABgAAAAAAIQBAAATCwAAEwsAAAAAAAAAAAAA/z67/w67/8e6ur+Ggv/D4brX38L///C6uP/g/n////j/t/fw/z//f/5/eH/8/7Z4P/8//j//fLw/tTw8/4//H/8PD57vD4aftAcC/9//D/+HDw7/H4fPAgcD/7QDh//P/4f/7yeHgQ+LA8AD4/+0/8P/5/+Hz/ezAcAHswHg//H/4f/g7uH/w/D7+MH8gHiA/P+xf/g/8P7w//j/4P/+P+B/wB7gsMAeH/5/+D/8f/h//n/4P/J/8B/wD/AP4A7g/g+wH/wf/D/8P/8/+B//B/gP8Af4AvAHB7Dw/g//H/4P/5/+D/+f/AP8A/wD+DH4sPgAg/+B/wP/5/+D/+f/AP8A/wD/Dv4A/gD+/8Cwgf/B//H/sf/7/4D/gP+A/wj/AP8G4LD//8D//P/g//j/wP/A/8D/jv/A/4L/sP+A8P/g//7/4P/8/+D/4P/g/8L/wP/A//D///yx+P/4//j/8P/4//D//v/w//7/uv/+8P/3/bn///z/uf/w/v/+//j///67AA==";

with (a) {
	i.onload = function () {

		// retrieve the video data first to canvas, then to D
		drawImage(i,0,0);
		D=getImageData(0,0,w,1).data;

		s=0;
		setInterval(function() {

			// used for increasing the pointer to the video data
			I=function() {
				s++;
				// the canvas is RGBA and not RGB, so we 
				// have to skip the A values that do not contain
				// video data
				if ((s & 3)==3) s++;
			};

			clearRect(0,0,w,150);
			globalAlpha=0.5;

			// the first line of the frame that has pixels
			f=D[s] & 15;
			// the upper four bits of this byte have the
			// last line that has data, this is always
			// 12 in this case

			I();

 			for (y=0; y<12; y++) {
				if (y<f) 
					// nothing to draw yet
					b=65535;
				else {
					// one row is 16 pixels or 2 bytes,
					// retrieve first as bytes
					b=D[s];
					I();
					b+=D[s]<<8;
					I();
				}
				for (x=0; x<16; x++) {

					// retrieve one bit-pixel and apply 
					// a simplistic filter
					if (!(b & 1<<x)) z=5; else z=x/8-8;

					// finally, make ten copies of the
					// frame, change filter each time
					for (j=9; j>=0; j--,z++) 
	        	                        fillRect(j*80+x*4,y*4,z,5);
				}
			}
			// once all frames have been shown, loop to start
			if (s>515) s=0;
		},75);
	}
}

JS1k: The JavaScript code golfing competition

2011 - Oregon Trail