function j(f,b,c,d){return d? f[0]*b+f[1]*c+f[2]*d : f*f*f*(f*(f*6-15)+10)}var l=[[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]],x=a=[],m,y=Math,n=y.floor,g=256,p=document.getElementById("c"),z=p.getContext("2d"),A=0,$=g-1;p.width=p.height=$; B=z.getImageData(0,0,$,$);for(;g--;)x[g]=n(y.random()*256);for(g=512;g--;)a[g]=x[g&$];setInterval('for(g=$;g--;)for(m=$;m--;){var f=(g+m*$)*4,b=g/$,c=m/$,d=A,e=n(b),h=n(c),i=n(d);b-=e;c-=h;d-=i;e&=$;h&=$;i&=$;var q=a[e+a[h+a[i+1]]]%12,r=a[e+a[h+1+a[i]]]%12,s=a[e+a[h+1+a[i+1]]]%12,t=a[e+1+a[h+a[i]]]%12,u=a[e+1+a[h+a[i+1]]]%12,v=a[e+1+a[h+1+a[i]]]%12,w=a[e+1+a[h+1+a[i+1]]]%12;e=j(l[a[e+a[h+a[i]]]%12],b,c,d);t=j(l[t],b-1,c,d);r=j(l[r],b,c-1,d);v=j(l[v],b-1,c-1,d);q=j(l[q],b,c,d-1);u=j(l[u],b-1,c,d-1);s=j(l[s],b,c-1,d-1);w=j(l[w],b-1,c-1,d-1);b=j(b);c=j(c);d=j(d);d=((1-d)*((1-c)*((1-b)*e+b*t)+c*((1-b)*r+b*v))+d*((1-c)*((1-b)*q+b*u)+c*((1-b)*s+b*w)))*$;for(k=4;k--;)B.data[f+k]=d}z.putImageData(B,0,0);A+=0.1',$)
// perlin noise implementation based on based on http://gist.github.com/304522
(function() {
var grad3 = [
[1,1,0],
[-1,1,0],
[1,-1,0],
[-1,-1,0],
[1,0,1],
[-1,0,1],
[1,0,-1],
[-1,0,-1],
[0,1,1],
[0,-1,1],
[0,1,-1],
[0,-1,-1]
],
data= p = perm = [],j,m=Math, f=m.floor,i=256;
while (i--) { p[i] = f(m.random() * 256);}
i=512;
while (i--) {
perm[i] = p[i & 255];
}
function dot(g, x, y, z) {
return g[0] * x + g[1] * y + g[2] * z;
}
function mix(a, b, t) {
return (1.0 - t) * a + t * b;
}
function fade(t) {
return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
}
function noise(x, y, z) {
var X = f(x);
var Y =f(y);
var Z = f(z);
x = x - X;
y = y - Y;
z = z - Z;
X = X & 255;
Y = Y & 255;
Z = Z & 255;
var gi000 = perm[X + perm[Y + perm[Z]]] % 12;
var gi001 = perm[X + perm[Y + perm[Z + 1]]] % 12;
var gi010 = perm[X + perm[Y + 1 + perm[Z]]] % 12;
var gi011 = perm[X + perm[Y + 1 + perm[Z + 1]]] % 12;
var gi100 = perm[X + 1 + perm[Y + perm[Z]]] % 12;
var gi101 = perm[X + 1 + perm[Y + perm[Z + 1]]] % 12;
var gi110 = perm[X + 1 + perm[Y + 1 + perm[Z]]] % 12;
var gi111 = perm[X + 1 + perm[Y + 1 + perm[Z + 1]]] % 12;
var n000 = dot(grad3[gi000], x, y, z);
var n100 = dot(grad3[gi100], x - 1, y, z);
var n010 = dot(grad3[gi010], x, y - 1, z);
var n110 = dot(grad3[gi110], x - 1, y - 1, z);
var n001 = dot(grad3[gi001], x, y, z - 1);
var n101 = dot(grad3[gi101], x - 1, y, z - 1);
var n011 = dot(grad3[gi011], x, y - 1, z - 1);
var n111 = dot(grad3[gi111], x - 1, y - 1, z - 1);
var u = fade(x);
var v = fade(y);
var w = fade(z);
var nx00 = mix(n000, n100, u);
var nx01 = mix(n001, n101, u);
var nx10 = mix(n010, n110, u);
var nx11 = mix(n011, n111, u);
var nxy0 = mix(nx00, nx10, v);
var nxy1 = mix(nx01, nx11, v);
var nxyz = mix(nxy0, nxy1, w);
return nxyz;
}
var canvas = document.getElementById("c"),
ctx = canvas.getContext('2d'),
size = 255,
cnt = 0,
imageData = ctx.getImageData(0,0,size, size);
canvas.width = size;
canvas.height = size;
setInterval(function() {
for (i=size;i--;) {
for (j=size;j--;) {
var index = (i + j * size) * 4;
var n = (noise(i / 50, j/50, cnt) * 255);
for (k=4;k--;)imageData.data[index+k] = n;
}
}
ctx.putImageData(imageData, 0, 0);
cnt += .1
}, 10)
})();
