public
Created

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
/*
* Mr.doob's entry for JS1K <http://mrdoob.com/blog/post/703>
* @author Mr.doob <http://mrdoob.com/>
* extra optimizations by Miller Medeiros <http://blog.millermedeiros.com/> (see comments on source code)
*/
 
( function () {
var res = 25, res3 = res * res * res,
i = 0, x = 0, y = 0, z = 0, s, size, sizeHalf,
vx, vy, vz, rsx, rcx, rsy, rcy, rsz, rcz,
xy, xz, yx, yz, zx, zy,
cx = 0, cy = 0, cz = 1, rx = 1, ry = 1, rz = 0,
t, t1, t2, t3,
sin = Math.sin, cos = Math.cos, pi = Math.PI * 3,
mouseX = 0, mouseY = 0, color,
doc = document, body = doc.body,
canvas, context, mesh = [],
width = innerWidth,
height = innerHeight,
widthHalf = width / 2,
heightHalf = height / 2;
 
body.style.cssText = 'margin:0;overflow:hidden'; //cssText causes a single reflow and is smaller, also is good to remind that when setting values to zero you don't need to specify the unit '0px' == '0em' == '0'.
 
canvas = body.children[0]; //was using doc.body for no reason
canvas.width = width;
canvas.height = height;
 
context = canvas.getContext( '2d' );
context.translate( widthHalf, heightHalf );
 
doc.onmousemove = function ( event ) {
 
mouseX = ( event.clientX - widthHalf ) / 1000;
mouseY = ( event.clientY + heightHalf ) / 1000;
 
};
 
while ( i++ < res3 ) {
 
mesh.push( x / res - 0.5, y / res - 0.5, z / res - 0.5); //push allow multiple items (https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/push)
 
z = i % res;
y = !z ? ++y %res : y;
x = !z && !y ? ++x : x;
 
}
 
setInterval( function () {
 
context.clearRect( - widthHalf, - heightHalf, width, height );
 
cx += ( mouseX - cx ) / 10;
cz += ( mouseY - cz ) / 10;
 
t = new Date().getTime();
rx = t / 10000;
t1 = sin( t / 20000 ) * pi;
t2 = sin( rx ) * pi; //used rx since both are same value
t3 = sin( t / 15000 ) * pi;
 
rsx = sin( rx ); rcx = cos( rx );
rsy = sin( ry ); rcy = cos( ry );
rsz = sin( rz ); rcz = cos( rz );
 
i = 0;
 
while ( ( i += 3 ) < res3 * 3 ) {
 
x = mesh[ i ];
y = mesh[ i + 1 ];
z = mesh[ i + 2 ];
s = sin( t1 + x * t1 ) + sin( t2 + y * t2 ) + sin( t3 + z * t3 );
 
if ( s >= 0 ) {
 
xy = rcx * y - rsx * z;
xz = rsx * y + rcx * z;
 
yz = rcy * xz - rsy * x;
yx = rsy * xz + rcy * x;
 
zx = rcz * yx - rsz * xy;
zy = rsz * yx + rcz * xy;
 
vx = zx - cx;
vy = zy - cy;
vz = yz + cz;
 
if ( vz > 0 ) {
 
color = ( 64 / vz ) >> 0;
context.fillStyle = 'rgb('+ ( color - 16 ) + ','+ ( color * 2 - 128 ) + ','+ ( color + 64 ) + ')';
 
size = s * 30 / vz;
sizeHalf = size / 2;
 
context.fillRect( ( vx / vz ) * widthHalf - sizeHalf, ( vy / vz ) * widthHalf - sizeHalf, size, size );
 
}
 
}
}
 
}, 16 );
 
} )();

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.