121.74.249.71 at 07:39, 23 July 2015

2015-07-23T07:39:06Z

121.74.230.95 at 21:08, 3 February 2013

2013-02-03T21:08:07Z

Lerc: Created page with "If you want to understand how this program works Yo will have to spend a good number of hours going through it. This code is here not to show you how something works but rat..."

2012-02-07T21:38:31Z

Created page with "If you want to understand how this program works Yo will have to spend a good number of hours going through it. This code is here not to show you how something works but rat..."

New page

If you want to understand how this program works Yo will have to spend a good number of hours going through it. This code is here not to show you how something works but rather what is possible. It seems unfathomable, but nevertheless someone wrote it. It has 350 lines of code, each component does something small and understandable. Working together they can achieve an almost magical result.

<edcode>function noise2() { return 0.5};
function drawEye() {

function smoothStep(w,a,b) {
if (w>=b) return 1;
if (w<=a) return 0;
var d = b-a;
return (w-a)/d;
}

function colsca(c,s) {
c[0]*=s;
c[1]*=s;
c[2]*=s;
if (c[0]>1) c[0]=1;
if (c[1]>1) c[1]=1;
if (c[2]>1) c[2]=1;

return c;
}

function mixColors (w,a,b) {
if (w>1) w=1;
if (w<0) w=0;
var v=1-w;
return [ a[0]*v+b[0]*w, a[1]*v+b[1]*w, a[2]*v+b[2]*w];
}

function eye(x,y,b) {
x-=0.10; y+=0.05;
var rx=2*(x-0.5)*4/3;
var ry=2*(y-0.5);
var a = Math.atan2(ry,rx);
var e = rx*rx+ry*ry;
var r = Math.sqrt(e);

var fue = [1,1,1];
var ven = noise2(24*x,24*y,256,256);
ven = smoothStep(ven,0-0.2,0) - smoothStep(ven,0,0.2);
ven+=x + x*x*x*x*x*x*7;
fue[0]+=0.04 - 0.00*ven;
fue[1]+=0.04 - 0.05*ven;
fue[2]+=0.04 - 0.05*ven;

var den = [0.3,0.7,0.4+e];
var no = 0.8+0.2*noise2(4*r,32*a/Math.PI,32,32);
den=colsca(den,no);

var f2=smoothStep(e, 0.025,0.035);
den=colsca(den,f2);

var mixed = mixColors(smoothStep(e,0.35,0.36),den,fue);
//mixed=fue;

//ring
var ri=smoothStep(e,.31,.35)-smoothStep(e,.35,.39);
var ri=1-0.35*ri;

mixed=colsca(mixed,ri);

//reflection
var r3=Math.sqrt(r*r*r);
var re=noise2(2+4*r3*Math.cos(a),4*r3*Math.sin(a),256,256);
re=0.4*smoothStep(re,0.1,0.5);
mixed[0]+=re*(1-mixed[0]);
mixed[1]+=re*(1-mixed[1]);
mixed[2]+=re*(1-mixed[2]);

mixed=colsca(mixed,0.8+0.15*smoothStep(-b,0.0,0.2));

mixed=colsca(mixed,0.8+0.2*smoothStep(-b,0.0,0.05));

return mixed;

}
function skin (x,y,b) {
var rx=2*(x-0.5)*1.33;
var ry=2*(y-0.5);
var skin=[0.75,0.69,0.6];
var cel=0.95+0.05*noise2(64*x,64*y,256,256);
skin=colsca(skin,cel);
skin[0]+=0.03*rx;
skin[1]+=0.03*ry;
skin=colsca(skin,y*0.1+0.9);
var bri=noise2(128*x,128*y,256,256);
bri=0.2+0.8*smoothStep(bri,0,0.3);
skin=mixColors(bri*0.08*y,skin,[1,1,1]);

var san = 0.50*noise2(16*x,16*y,256,256);
san+= 0.25*noise2(32*x,32*y,256,256);
skin[1]*=1-0.1*san;

var osc = 0.500*noise2(16*x,16*y,256,256);
osc+= 0.250*noise2(24*x,24*y,256,256);
osc+= 0.125*noise2(48*x,48*y,256,256);
skin=colsca(skin,0.9+0.1*osc);

skin[0]+=0.08*x;
skin[1]+=0.01;

var pecas = noise2(32*x,32*y,256,256);
pecas=smoothStep(pecas,0.80,0.8001);
skin[0]*= 1- 0.15*pecas;
skin[1]*= 1- 0.17*pecas;
skin[2]*= 1- 0.17*pecas;

var g = smoothStep(1-b,0.2,0.7)
g-= smoothStep(1-b,0.8,1)*3;
skin[0]+=g*0.1;
skin[1]+=g*0.1;
skin[2]+=g*0.1;

skin=mixColors(0.14,skin,[1,1,1]);
skin[0]= skin[0]*1.25+0.21;
skin[1]= skin[1]*1.22+0.21;
skin[2]= skin[2]*1.20+0.21;

skin=colsca(skin,(1-(b*0.5)));

return skin;
}

function draw(x,y) {
var rx=2*(x-0.5)*1.33;
var ry=2*(y-0.5);
var h = 3*Math.sqrt(x*x*x)*(1-x);
var e = Math.abs(ry)-h;
var f = smoothStep(e,0,0.001);

var b=e;
var eyeColor = eye(x,y,b);
var skinColor = skin(x,y,b);
var mixed = mixColors(f,eyeColor,skinColor);

red=mixed[0];
green=mixed[1];
blue=mixed[2];
if (red<0) red=0;
if (red>1) red=1;
if (green<0) green=0;
if (green>1) green=1;
if (blue<0) blue=0;
if (blue>1) blue=1;

line[i]=red*255;
line[i+1]=green*255;
line[i+2]=blue*255;
line[i+3]=255;

}

var line=new Uint8Array(533*4);
var i=0;

function drawb(x,y) {
line[i]=255;
line[i+1]=x*255;
line[i+2]=y*255;
line[i+3]=255;
}

for (ty=0;ty<400;ty++) {
i=0;
for (var tx=0;tx<533;tx++) {
draw(tx/533,ty/400);
i+=4;
}
drawImageData(50,ty,533,1,line);
}
}
// This bit ported from Stefan Gustavson's java implementation
// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
// Read Stefan's excellent paper for details on how this code works.
//
// Sean McCullough banksean@gmail.com
var SimplexNoise = function(r) {
if (r == undefined) r = Math;
this.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]];
this.p = [];
for (var i=0; i<256; i++) {
this.p[i] = Math.floor(r.random()*256);
}
// To remove the need for index wrapping, double the permutation table length
this.perm = [];
for(var i=0; i<512; i++) {
this.perm[i]=this.p[i & 255];
}

// A lookup table to traverse the simplex around a given point in 4D.
// Details can be found where this table is used, in the 4D noise method.
this.simplex = [
[0,1,2,3],[0,1,3,2],[0,0,0,0],[0,2,3,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,3,0],
[0,2,1,3],[0,0,0,0],[0,3,1,2],[0,3,2,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,3,2,0],
[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[1,2,0,3],[0,0,0,0],[1,3,0,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,3,0,1],[2,3,1,0],
[1,0,2,3],[1,0,3,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,3,1],[0,0,0,0],[2,1,3,0],
[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[2,0,1,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,0,1,2],[3,0,2,1],[0,0,0,0],[3,1,2,0],
[2,1,0,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,1,0,2],[0,0,0,0],[3,2,0,1],[3,2,1,0]];
};

SimplexNoise.prototype.dot = function(g, x, y) {
return g[0]*x + g[1]*y;
};

SimplexNoise.prototype.noise = function(xin, yin) {
var n0, n1, n2; // Noise contributions from the three corners
// Skew the input space to determine which simplex cell we're in
var F2 = 0.5*(Math.sqrt(3.0)-1.0);
var s = (xin+yin)*F2; // Hairy factor for 2D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var G2 = (3.0-Math.sqrt(3.0))/6.0;
var t = (i+j)*G2;
var X0 = i-t; // Unskew the cell origin back to (x,y) space
var Y0 = j-t;
var x0 = xin-X0; // The x,y distances from the cell origin
var y0 = yin-Y0;
// For the 2D case, the simplex shape is an equilateral triangle.
// Determine which simplex we are in.
var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
if(x0>y0) {i1=1; j1=0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1)
else {i1=0; j1=1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
// A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
// a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
// c = (3-sqrt(3))/6
var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
var y1 = y0 - j1 + G2;
var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
var y2 = y0 - 1.0 + 2.0 * G2;
// Work out the hashed gradient indices of the three simplex corners
var ii = i & 255;
var jj = j & 255;
var gi0 = this.perm[ii+this.perm[jj]] % 12;
var gi1 = this.perm[ii+i1+this.perm[jj+j1]] % 12;
var gi2 = this.perm[ii+1+this.perm[jj+1]] % 12;
// Calculate the contribution from the three corners
var t0 = 0.5 - x0*x0-y0*y0;
if(t0<0) n0 = 0.0;
else {
t0 *= t0;
n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0); // (x,y) of grad3 used for 2D gradient
}
var t1 = 0.5 - x1*x1-y1*y1;
if(t1<0) n1 = 0.0;
else {
t1 *= t1;
n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1);
}
var t2 = 0.5 - x2*x2-y2*y2;
if(t2<0) n2 = 0.0;
else {
t2 *= t2;
n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to return values in the interval [-1,1].
return 70.0 * (n0 + n1 + n2);
};

// 3D simplex noise
SimplexNoise.prototype.noise3d = function(xin, yin, zin) {
var n0, n1, n2, n3; // Noise contributions from the four corners
// Skew the input space to determine which simplex cell we're in
var F3 = 1.0/3.0;
var s = (xin+yin+zin)*F3; // Very nice and simple skew factor for 3D
var i = Math.floor(xin+s);
var j = Math.floor(yin+s);
var k = Math.floor(zin+s);
var G3 = 1.0/6.0; // Very nice and simple unskew factor, too
var t = (i+j+k)*G3;
var X0 = i-t; // Unskew the cell origin back to (x,y,z) space
var Y0 = j-t;
var Z0 = k-t;
var x0 = xin-X0; // The x,y,z distances from the cell origin
var y0 = yin-Y0;
var z0 = zin-Z0;
// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
// Determine which simplex we are in.
var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
if(x0>=y0) {
if(y0>=z0)
{ i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } // X Y Z order
else if(x0>=z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } // X Z Y order
else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } // Z X Y order
}
else { // x0<y0
if(y0<z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } // Z Y X order
else if(x0<z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } // Y Z X order
else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } // Y X Z order
}
// A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
// a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
// a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
// c = 1/6.
var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
var y1 = y0 - j1 + G3;
var z1 = z0 - k1 + G3;
var x2 = x0 - i2 + 2.0*G3; // Offsets for third corner in (x,y,z) coords
var y2 = y0 - j2 + 2.0*G3;
var z2 = z0 - k2 + 2.0*G3;
var x3 = x0 - 1.0 + 3.0*G3; // Offsets for last corner in (x,y,z) coords
var y3 = y0 - 1.0 + 3.0*G3;
var z3 = z0 - 1.0 + 3.0*G3;
// Work out the hashed gradient indices of the four simplex corners
var ii = i & 255;
var jj = j & 255;
var kk = k & 255;
var gi0 = this.perm[ii+this.perm[jj+this.perm[kk]]] % 12;
var gi1 = this.perm[ii+i1+this.perm[jj+j1+this.perm[kk+k1]]] % 12;
var gi2 = this.perm[ii+i2+this.perm[jj+j2+this.perm[kk+k2]]] % 12;
var gi3 = this.perm[ii+1+this.perm[jj+1+this.perm[kk+1]]] % 12;
// Calculate the contribution from the four corners
var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
if(t0<0) n0 = 0.0;
else {
t0 *= t0;
n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0, z0);
}
var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
if(t1<0) n1 = 0.0;
else {
t1 *= t1;
n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1, z1);
}
var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
if(t2<0) n2 = 0.0;
else {
t2 *= t2;
n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2, z2);
}
var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
if(t3<0) n3 = 0.0;
else {
t3 *= t3;
n3 = t3 * t3 * this.dot(this.grad3[gi3], x3, y3, z3);
}
// Add contributions from each corner to get the final noise value.
// The result is scaled to stay just inside [-1,1]
return 32.0*(n0 + n1 + n2 + n3);
};

DefaultNoise = new SimplexNoise(Math);

function noise2(x,y,p,q) {
return DefaultNoise.noise(x,y);
}

drawEye();

</edcode>

@@ Line 3: / Line 3: @@
 <edcode>
 function drawEye() {
@@ Line 57: / Line 58: @@
    //ring
-   var ri=smoothStep(e,.31,.35)-smoothStep(e,.35,.39);
+   var ri=smoothStep(e,0.31,0.35)-smoothStep(e,0.35,0.39);
-   var ri=1-0.35*ri;
+   ri=1-0.35*ri;
    mixed=colsca(mixed,ri);
@@ Line 77: / Line 78: @@
+}
-function skin (x,y,b) {
+function skinColor (x,y,b) {
    var rx=2*(x-0.5)*1.33;
    var ry=2*(y-0.5);
@@ Line 108: / Line 109: @@
    skin[2]*= 1- 0.17*pecas;
-   var g = smoothStep(1-b,0.2,0.7)
+   var g = smoothStep(1-b,0.2,0.7);
    g-= smoothStep(1-b,0.8,1)*3;
    skin[0]+=g*0.1;
@@ Line 135: / Line 136: @@
    var b=e;
    var eyeColor = eye(x,y,b);
-   var skinColor = skin(x,y,b);
+   var skin = skinColor(x,y,b);
-   var mixed = mixColors(f,eyeColor,skinColor);
+   var mixed = mixColors(f,eyeColor,skin);
-   red=mixed[0];
+   var red=mixed[0];
-   green=mixed[1];
+   var green=mixed[1];
-   blue=mixed[2];
+   var blue=mixed[2];
    if (red<0) red=0;
    if (red>1) red=1;
@@ Line 166: / Line 167: @@
+}
-for (ty=0;ty<400;ty++) {
+for (var ty=0;ty<400;ty++) {
    i=0;
    for (var tx=0;tx<533;tx++) {
@@ Line 176: / Line 177: @@
+}
-function noise2(x,y,a,b) {return noise2d(x*a/256,y*b/256)};
+function noise2(x,y,a,b) {return noise2d(x*a/256,y*b/256);}
-  drawEye();
+drawEye();
-−
-−
 </edcode>

Eye - Revision history

121.74.249.71 at 07:39, 23 July 2015

121.74.230.95 at 21:08, 3 February 2013

Lerc: Created page with "If you want to understand how this program works Yo will have to spend a good number of hours going through it. This code is here not to show you how something works but rat..."