Friday, June 11th, 2010

Liquid Particles

Category: Canvas, Fun

Sit back and enjoy:

The bulk of the code is just:

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(); } } [/javascript]

Posted by Dion Almaer at 2:58 am
6 Comments

++++-
4.5 rating from 2 votes

6 Comments »

Comments feed TrackBack URI

Why not just link to the page? A sodding long code listing and a cut-off screenshot? Such rubbish!

Comment by sixtyseconds — June 11, 2010

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.

Comment by fabienmenager — June 11, 2010

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.

Comment by loveencounterflow — June 11, 2010

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.

Comment by fzammetti — June 12, 2010

Cool. Works so smooth in Opera, good Canvas show case. And nice interaction with mouse.

Comment by movax — June 13, 2010

tn;dr

(Too Narrow, Didn’t Read)

Comment by MG — June 14, 2010

Leave a comment

You must be logged in to post a comment.