Friday, June 11th, 2010
Liquid Particles
<>p>Sit back and enjoy:
The bulk of the code is just:
JAVASCRIPT:
-
-
function run()
-
{
-
ctx.globalCompositeOperation = "source-over";
-
ctx.fillStyle = "rgba(8,8,12,.65)";
-
ctx.fillRect( 0 , 0 , canvasW , canvasH );
-
ctx.globalCompositeOperation = "lighter";
-
-
mouseVX = mouseX - prevMouseX;
-
mouseVY = mouseY - prevMouseY;
-
prevMouseX = mouseX;
-
prevMouseY = mouseY;
-
-
var toDist = canvasW / 1.15;
-
var stirDist = canvasW / 8;
-
var blowDist = canvasW / 2;
-
-
var Mrnd = Math.random;
-
var Mabs = Math.abs;
-
var Msqrt = Math.sqrt;
-
var Mcos = Math.cos;
-
var Msin = Math.sin;
-
var Matan2 = Math.atan2;
-
var Mmax = Math.max;
-
var Mmin = Math.min;
-
-
var i = numMovers;
-
while( i-- )
-
{
-
var m = movers[i];
-
var x = m.x;
-
var y = m.y;
-
var vX = m.vX;
-
var vY = m.vY;
-
-
var dX = x - mouseX;
-
var dY = y - mouseY;
-
var d = Msqrt( dX * dX + dY * dY );
-
var a = Matan2( dY , dX );
-
var cosA = Mcos( a );
-
var sinA = Msin( a );
-
-
if( isMouseDown )
-
{
-
if( d <blowDist )
-
{
-
var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
-
vX += cosA * blowAcc + .5 - Mrnd();
-
vY += sinA * blowAcc + .5 - Mrnd();
-
}
-
}
-
-
if( d <toDist )
-
{
-
var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
-
vX -= cosA * toAcc;
-
vY -= sinA * toAcc;
-
}
-
-
if( d <stirDist )
-
{
-
var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
-
vX += mouseVX * mAcc;
-
vY += mouseVY * mAcc;
-
}
-
-
-
vX *= friction;
-
vY *= friction;
-
-
var avgVX = Mabs( vX );
-
var avgVY = Mabs( vY );
-
var avgV = ( avgVX + avgVY ) * .5;
-
-
if( avgVX <.1 ) vX *= Mrnd() * 3;
-
if( avgVY <.1 ) vY *= Mrnd() * 3;
-
-
var sc = avgV * .45;
-
sc = Mmax( Mmin( sc , 3.5 ) , .4 );
-
-
-
var nextX = x + vX;
-
var nextY = y + vY;
-
-
if( nextX> canvasW )
-
{
-
nextX = canvasW;
-
vX *= -1;
-
}
-
else if( nextX <0 )
-
{
-
nextX = 0;
-
vX *= -1;
-
}
-
-
if( nextY> canvasH )
-
{
-
nextY = canvasH;
-
vY *= -1;
-
}
-
else if( nextY <0 )
-
{
-
nextY = 0;
-
vY *= -1;
-
}
-
-
m.vX = vX;
-
m.vY = vY;
-
m.x = nextX;
-
m.y = nextY;
-
-
ctx.fillStyle = m.color;
-
ctx.beginPath();
-
ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
-
ctx.closePath();
-
ctx.fill();
-
}
-
}
-
Related Content:
Rate the above post
Why not just link to the page? A sodding long code listing and a cut-off screenshot? Such rubbish!
And why not make an article for every Chrome Experiment ?
Ok it is good code, but, I don’t think it deserves such an article here.
ah cmon people that’s really a nice one. but i have to agree the site layout has started to look years older every day i get to see it. as a minimal incremental improvement, how about widening the main content region so it looks less like a toilet paper roll optimized for hercules graphics adapter resolutions?
i find it totally OK to show off snippets of code but that too suffers from the 100px or so narrow display imho.
I’d personally just like to be able to scroll the damned page without it slowing to a crawl every time… Dunno what it is, whether it’s a Firefox-only thing, but I see it on multiple machines. Exceedingly annoying and I really can’t understand what could possibly be happening on the page to cause it.
Cool. Works so smooth in Opera, good Canvas show case. And nice interaction with mouse.
tn;dr
(Too Narrow, Didn’t Read)