Uses 3d simplex noise to fill a heart with red and black. The algorithm itself ended up taking most of the space - even after reducing quality - leaving little room for other stuff.
var f=1/3,i=-1/6,r=[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1]],s=[],t=c.width=window.innerWidth-20,u=c.height=window.innerHeight-20,y=a.createImageData(t,u),z=y.data,A,B=0,D;a.font="400px A";a.fillText("♥",t/2-150,u/2+150);A=a.getImageData(0,0,t,u);
setInterval(function(){for(var n=0;n<t*u;n++){s[n%96]=s[n%96]||~~(48*Math.random());var w=4*n,C;if(C=A.data[w+3]){var d=0.01*(n%t),e=0.01*~~(n/t),b=(d+e+B)*f,g=~~(d+b),h=~~(e+b),j=~~(B+b),b=(g+h+j)*i,d=d-g-b,e=e-h-b,b=B-j-b,k,l,m,o,p,q;d>=e?e>=b?(k=1,m=l=0,p=o=1,q=0):(d>=b?(k=1,m=l=0):(l=k=0,m=1),o=1,p=0,q=1):e<b?(l=k=0,m=1,o=0,q=p=1):d<b?(k=0,l=1,o=m=0,q=p=1):(k=0,l=1,m=0,p=o=1,q=0);var g=g%48,h=h%48,j=j%48,x=0,v=function(b,d,e,g){var h=0.6-b*b-d*d-e*e;x+=0>h?0:Math.pow(h,4)*(b*g[0]+d*g[1]+e*g[2])};
v(d,e,b,r[s[g+s[h+s[j]]]%6]);v(d-k-i,e-l-i,b-m-i,r[s[g+k+s[h+l+s[j+m]]]%6]);v(d-o-2*i,e-p-2*i,b-q-2*i,r[s[g+o+s[h+p+s[j+q]]]%6]);v(d-1-3*i,e-1-3*i,b-1-3*i,r[s[g+1+s[h+1+s[j+1]]]%6]);D=0.7*C*(32*x+1)}z[w]=D;z[w+3]=255}a.putImageData(y,0,0);B+=0.02},0);
dmFyIGY9MS8zLGk9LTEvNixyPVtbMSwxLDBdLFstMSwxLDBdLFsxLC0xLDBdLFstMSwtMSwwXSxbMSwwLDFdLFstMSwwLDFdXSxzPVtdLHQ9Yy53aWR0aD13aW5kb3cuaW5uZXJXaWR0aC0yMCx1PWMuaGVpZ2h0PXdpbmRvdy5pbm5lckhlaWdodC0yMCx5PWEuY3JlYXRlSW1hZ2VEYXRhKHQsdSksej15LmRhdGEsQSxCPTAsRDthLmZvbnQ9IjQwMHB4IEEiO2EuZmlsbFRleHQoIuKZpSIsdC8yLTE1MCx1LzIrMTUwKTtBPWEuZ2V0SW1hZ2VEYXRhKDAsMCx0LHUpOw0Kc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXtmb3IodmFyIG49MDtuPHQqdTtuKyspe3NbbiU5Nl09c1tuJTk2XXx8fn4oNDgqTWF0aC5yYW5kb20oKSk7dmFyIHc9NCpuLEM7aWYoQz1BLmRhdGFbdyszXSl7dmFyIGQ9MC4wMSoobiV0KSxlPTAuMDEqfn4obi90KSxiPShkK2UrQikqZixnPX5+KGQrYiksaD1+fihlK2IpLGo9fn4oQitiKSxiPShnK2graikqaSxkPWQtZy1iLGU9ZS1oLWIsYj1CLWotYixrLGwsbSxvLHAscTtkPj1lP2U+PWI/KGs9MSxtPWw9MCxwPW89MSxxPTApOihkPj1iPyhrPTEsbT1sPTApOihsPWs9MCxtPTEpLG89MSxwPTAscT0xKTplPGI/KGw9az0wLG09MSxvPTAscT1wPTEpOmQ8Yj8oaz0wLGw9MSxvPW09MCxxPXA9MSk6KGs9MCxsPTEsbT0wLHA9bz0xLHE9MCk7dmFyIGc9ZyU0OCxoPWglNDgsaj1qJTQ4LHg9MCx2PWZ1bmN0aW9uKGIsZCxlLGcpe3ZhciBoPTAuNi1iKmItZCpkLWUqZTt4Kz0wPmg/MDpNYXRoLnBvdyhoLDQpKihiKmdbMF0rZCpnWzFdK2UqZ1syXSl9Ow0KdihkLGUsYixyW3NbZytzW2grc1tqXV1dJTZdKTt2KGQtay1pLGUtbC1pLGItbS1pLHJbc1tnK2src1toK2wrc1tqK21dXV0lNl0pO3YoZC1vLTIqaSxlLXAtMippLGItcS0yKmkscltzW2crbytzW2grcCtzW2orcV1dXSU2XSk7dihkLTEtMyppLGUtMS0zKmksYi0xLTMqaSxyW3NbZysxK3NbaCsxK3NbaisxXV1dJTZdKTtEPTAuNypDKigzMip4KzEpfXpbd109RDt6W3crM109MjU1fWEucHV0SW1hZ2VEYXRhKHksMCwwKTtCKz0wLjAyfSwwKTsNCg==
var SKEW_PIXEL_TO_GRID_3D = 1/3;
var SKEW_GRID_TO_PIXEL_3D = -1/6;
var GRADIENTS_3D = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1]];
var randomKernel = [];
var w = c.width = window.innerWidth-20,
h = c.height = window.innerHeight-20,
img = a.createImageData(w, h),
imgData = img.data,
heartImg,
time = 0,
color;
a.font = "400px A";
a.fillText("♥", w/2-150, h/2+150);
heartImg = a.getImageData(0, 0, w, h);
setInterval(function () {
for (var i = 0; i < w*h; i++) {
randomKernel[i%96] = randomKernel[i%96] || ~~(Math.random()*48);
var idx = i * 4, hd;
if (hd = heartImg.data[idx+3]) {
var xin=(i%w)*.01;
var yin=~~(i/w)*.01;
var s = (xin+yin+time) * SKEW_PIXEL_TO_GRID_3D;
var tileOriginX = ~~(xin+s);
var tileOriginY = ~~(yin+s);
var tileOriginZ = ~~(time+s);
s = (tileOriginX+tileOriginY+tileOriginZ)*SKEW_GRID_TO_PIXEL_3D;
var pixDeltaFromOriginX = xin-tileOriginX-s;
var pixDeltaFromOriginY = yin-tileOriginY-s;
var pixDeltaFromOriginZ = time-tileOriginZ-s;
var triangleFactorAX,
triangleFactorAY,
triangleFactorAZ,
triangleFactorBX,
triangleFactorBY,
triangleFactorBZ;
if (pixDeltaFromOriginX>=pixDeltaFromOriginY) {
if (pixDeltaFromOriginY>=pixDeltaFromOriginZ) {
triangleFactorAX = 1;
triangleFactorAY = 0;
triangleFactorAZ = 0;
triangleFactorBX = 1;
triangleFactorBY = 1;
triangleFactorBZ = 0;
} else if (pixDeltaFromOriginX>=pixDeltaFromOriginZ) {
triangleFactorAX = 1;
triangleFactorAY = 0;
triangleFactorAZ = 0;
triangleFactorBX = 1;
triangleFactorBY = 0;
triangleFactorBZ = 1;
} else {
triangleFactorAX = 0;
triangleFactorAY = 0;
triangleFactorAZ = 1;
triangleFactorBX = 1;
triangleFactorBY = 0;
triangleFactorBZ = 1;
}
} else {
if (pixDeltaFromOriginY<pixDeltaFromOriginZ) {
triangleFactorAX = 0;
triangleFactorAY = 0;
triangleFactorAZ = 1;
triangleFactorBX = 0;
triangleFactorBY = 1;
triangleFactorBZ = 1;
} else if (pixDeltaFromOriginX<pixDeltaFromOriginZ) {
triangleFactorAX = 0;
triangleFactorAY = 1;
triangleFactorAZ = 0;
triangleFactorBX = 0;
triangleFactorBY = 1;
triangleFactorBZ = 1;
} else {
triangleFactorAX = 0;
triangleFactorAY = 1;
triangleFactorAZ = 0;
triangleFactorBX = 1;
triangleFactorBY = 1;
triangleFactorBZ = 0;
}
}
var ii = tileOriginX % 48;
var jj = tileOriginY % 48;
var kk = tileOriginZ % 48;
var totalMagnitude = 0;
function calculateEffect3D (deltaX, deltaY, deltaZ, grad) {
var magnitude = 0.6 - deltaX*deltaX - deltaY*deltaY - deltaZ*deltaZ;
totalMagnitude += magnitude < 0 ? 0 : Math.pow(magnitude, 4) * (deltaX*grad[0] + deltaY*grad[1] + deltaZ*grad[2]);
}
calculateEffect3D(
pixDeltaFromOriginX,
pixDeltaFromOriginY,
pixDeltaFromOriginZ,
GRADIENTS_3D[randomKernel[ii+randomKernel[jj+randomKernel[kk]]] % 6]);
calculateEffect3D(
pixDeltaFromOriginX - triangleFactorAX - SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginY - triangleFactorAY - SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginZ - triangleFactorAZ - SKEW_GRID_TO_PIXEL_3D,
GRADIENTS_3D[randomKernel[ii+triangleFactorAX+randomKernel[jj+triangleFactorAY+randomKernel[kk+triangleFactorAZ]]] % 6]);
calculateEffect3D(
pixDeltaFromOriginX - triangleFactorBX - 2.0*SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginY - triangleFactorBY - 2.0*SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginZ - triangleFactorBZ - 2.0*SKEW_GRID_TO_PIXEL_3D,
GRADIENTS_3D[randomKernel[ii+triangleFactorBX+randomKernel[jj+triangleFactorBY+randomKernel[kk+triangleFactorBZ]]] % 6]);
calculateEffect3D(
pixDeltaFromOriginX - 1.0 - 3.0*SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginY - 1.0 - 3.0*SKEW_GRID_TO_PIXEL_3D,
pixDeltaFromOriginZ - 1.0 - 3.0*SKEW_GRID_TO_PIXEL_3D,
GRADIENTS_3D[randomKernel[ii+1+randomKernel[jj+1+randomKernel[kk+1]]] % 6]);
color = hd*(32*totalMagnitude+ 1)*.7;
}
imgData[idx] = color;
imgData[idx+3] = 255;
}
a.putImageData(img, 0, 0);
time+=.02;
}, 0);