JS1k 2012 - 1212 - Details - A lovely JavaScript golfing competition

Author:

Felix Woitzel

Twitter:

GitHub:

Facebook:

Google+:

Reddit:

/r/

Pouet:

Website:

cake23.de

Compo:

classic

Demo link:

https://js1k.com/2012-love/demo/1212

Shortlink:

https://js1k.com/1212

Blog post:

please update here!

Bytes:

955

Chars:

955

Submission

var w=255,i=j=0,p=c.cloneNode(0),q=p.getContext('2d'),e=q.createImageData(w,w),d=e.data,h=w/2,x=h,y=h,t=L(I),m=w*w*4,b=2,r=window,f=r.innerWidth,g=r.innerHeight,l=new Image();c.onmousemove=function e(v){x=(v.clientX-c.offsetLeft)*w/f;y=(v.clientY-c.offsetTop-12)*w/g;};p.height=p.width=w;c.width=f;c.height=g;c.setAttribute("style","position:absolute;top:0;left:0;cursor:crosshair;");while(m>0){d[m]=(m--%4==3)?w:0;}l.onload=function(){a.drawImage(l,0,0,c.width,c.height);};(function A(){L(D,t=L(H,L(B,L(B,t))));q.putImageData(e,0,0);l.src=p.toDataURL();setTimeout(A,15);})();function L(f,t){var r =[];while(i<w){r[i]=[];while(j<w){r[i][j]=f(t,i,j++);}j=0;i++;}i=0;return r;}function I(){return 0;}function B(t,i,j){return (i>=b&&i+b<=w&&j>=b&&j+b<=w)?(t[i][j]*4+t[i-1][j]+t[i][j-1]+t[i+1][j]+t[i][j+1])/8:0;}function H(t,i,j){m=Math.abs(i-x);return Math.max(0,t[i][j]-.3/w,1-((i-x)*(i-x)+(j-y+m)*(j-y+m))*0.01);}function D(t,i,j){d[(i+j*w)*4]=t[i][j]*w;}

Description

Paints a procedural heart to an offscreen buffer's imageData , then a custom blur and a subtle fade to black filter are applied. The 256x256 pixel buffer is stretched to fullscreen with an Image object and the canvas.toDataURL() method for a further smoothing.

Base64 encoded

dmFyIHc9MjU1LGk9aj0wLHA9Yy5jbG9uZU5vZGUoMCkscT1wLmdldENvbnRleHQoJzJkJyksZT1xLmNyZWF0ZUltYWdlRGF0YSh3LHcpLGQ9ZS5kYXRhLGg9dy8yLHg9aCx5PWgsdD1MKEkpLG09dyp3KjQsYj0yLHI9d2luZG93LGY9ci5pbm5lcldpZHRoLGc9ci5pbm5lckhlaWdodCxsPW5ldyBJbWFnZSgpO2Mub25tb3VzZW1vdmU9ZnVuY3Rpb24gZSh2KXt4PSh2LmNsaWVudFgtYy5vZmZzZXRMZWZ0KSp3L2Y7eT0odi5jbGllbnRZLWMub2Zmc2V0VG9wLTEyKSp3L2c7fTtwLmhlaWdodD1wLndpZHRoPXc7Yy53aWR0aD1mO2MuaGVpZ2h0PWc7Yy5zZXRBdHRyaWJ1dGUoInN0eWxlIiwicG9zaXRpb246YWJzb2x1dGU7dG9wOjA7bGVmdDowO2N1cnNvcjpjcm9zc2hhaXI7Iik7d2hpbGUobT4wKXtkW21dPShtLS0lND09Myk/dzowO31sLm9ubG9hZD1mdW5jdGlvbigpe2EuZHJhd0ltYWdlKGwsMCwwLGMud2lkdGgsYy5oZWlnaHQpO307KGZ1bmN0aW9uIEEoKXtMKEQsdD1MKEgsTChCLEwoQix0KSkpKTtxLnB1dEltYWdlRGF0YShlLDAsMCk7bC5zcmM9cC50b0RhdGFVUkwoKTtzZXRUaW1lb3V0KEEsMTUpO30pKCk7ZnVuY3Rpb24gTChmLHQpe3ZhciByID1bXTt3aGlsZShpPHcpe3JbaV09W107d2hpbGUoajx3KXtyW2ldW2pdPWYodCxpLGorKyk7fWo9MDtpKys7fWk9MDtyZXR1cm4gcjt9ZnVuY3Rpb24gSSgpe3JldHVybiAwO31mdW5jdGlvbiBCKHQsaSxqKXtyZXR1cm4gKGk+PWImJmkrYjw9dyYmaj49YiYmaitiPD13KT8odFtpXVtqXSo0K3RbaS0xXVtqXSt0W2ldW2otMV0rdFtpKzFdW2pdK3RbaV1baisxXSkvODowO31mdW5jdGlvbiBIKHQsaSxqKXttPU1hdGguYWJzKGkteCk7cmV0dXJuIE1hdGgubWF4KDAsdFtpXVtqXS0uMy93LDEtKChpLXgpKihpLXgpKyhqLXkrbSkqKGoteSttKSkqMC4wMSk7fWZ1bmN0aW9uIEQodCxpLGope2RbKGkraip3KSo0XT10W2ldW2pdKnc7fQ==

Original source

var w = 255, i = j = 0, p = c.cloneNode(0), q = p.getContext('2d'), e = q.createImageData(w, w), d = e.data, h = w / 2, x = h, y = h, t = L(I), m = w
		* w * 4, b = 2, r = window, f = r.innerWidth, g = r.innerHeight, l = new Image();
c.onmousemove = function e(v) {
	x = (v.clientX - c.offsetLeft) * w / f;
	y = (v.clientY - c.offsetTop - 12) * w / g;
};
p.height = p.width = w; // offscreen buffer is 256 x 256 pixels
c.width = f; // screen space
c.height = g;
c.setAttribute("style", "position:absolute;top:0;left:0;cursor:crosshair;");
// init all pixels black, but alpha is full
while (m > 0) {
	d[m] = (m-- % 4 == 3) ? w : 0;
}
// draw the image to screen space canvas for nice smoothing   
l.onload = function() {
	a.drawImage(l, 0, 0, c.width, c.height);
};
// animation loop
(function A() {
	L(D, t = L(H, L(B, L(B, t))));
	q.putImageData(e, 0, 0);
	l.src = p.toDataURL(); // push offscreen buffer to image object
	setTimeout(A, 15);
})();
// "Lambda" function to apply a kernel on a buffer  
function L(f, t) {
	var r = [];
	while (i < w) {
		r[i] = [];
		while (j < w) {
			r[i][j] = f(t, i, j++);
		}
		j = 0;
		i++;
	}
	i = 0;
	return r;
}
// init buffer kernel
function I() {
	return 0;
}
// blur kernel
function B(t, i, j) {
	return (i >= b && i + b <= w && j >= b && j + b <= w) ? (t[i][j] * 4 + t[i - 1][j] + t[i][j - 1] + t[i + 1][j] + t[i][j + 1]) / 8 : 0;
}
// procedural heart
function H(t, i, j) {
	m = Math.abs(i - x);
	return Math.max(0, t[i][j] - .3 / w, 1 - ((i - x) * (i - x) + (j - y + m) * (j - y + m)) * 0.01);
}
// draw array buffer to the imageData's red pixels
function D(t, i, j) {
	d[(i + j * w) * 4] = t[i][j] * w;
}

JS1k: The JavaScript code golfing competition

2012 - Love

It's fading away