Friday, June 11th, 2010

Liquid Particles

Category: Canvas, Fun

<>p>Sit back and enjoy:

The bulk of the code is just:

javascript
< view plain text >
  1. function run()
  2. {
  3.     ctx.globalCompositeOperation = "source-over";
  4.     ctx.fillStyle = "rgba(8,8,12,.65)";
  5.     ctx.fillRect( 0 , 0 , canvasW , canvasH );
  6.     ctx.globalCompositeOperation = "lighter";
  7.    
  8.     mouseVX    = mouseX - prevMouseX;
  9.     mouseVY    = mouseY - prevMouseY;
  10.     prevMouseX = mouseX;
  11.     prevMouseY = mouseY;
  12.    
  13.     var toDist   = canvasW / 1.15;
  14.     var stirDist = canvasW / 8;
  15.     var blowDist = canvasW / 2;
  16.    
  17.     var Mrnd   = Math.random;
  18.     var Mabs   = Math.abs;
  19.     var Msqrt  = Math.sqrt;
  20.     var Mcos   = Math.cos;
  21.     var Msin   = Math.sin;
  22.     var Matan2 = Math.atan2;
  23.     var Mmax   = Math.max;
  24.     var Mmin   = Math.min;
  25.    
  26.     var i = numMovers;
  27.     while( i-- )
  28.     {
  29.         var m  = movers[i];
  30.         var x  = m.x;
  31.         var y  = m.y;
  32.         var vX = m.vX;
  33.         var vY = m.vY;
  34.        
  35.         var dX = x - mouseX;
  36.         var dY = y - mouseY;
  37.         var d = Msqrt( dX * dX + dY * dY );
  38.         var a = Matan2( dY , dX );
  39.         var cosA = Mcos( a );
  40.         var sinA = Msin( a );
  41.        
  42.         if( isMouseDown )
  43.         {
  44.             if( d < blowDist )
  45.             {
  46.                 var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
  47.                 vX += cosA * blowAcc + .5 - Mrnd();
  48.                 vY += sinA * blowAcc + .5 - Mrnd();
  49.             }
  50.         }
  51.        
  52.         if( d < toDist )
  53.         {
  54.             var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
  55.             vX -= cosA * toAcc;
  56.             vY -= sinA * toAcc;
  57.         }
  58.        
  59.         if( d < stirDist )
  60.         {
  61.             var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
  62.             vX += mouseVX * mAcc;
  63.             vY += mouseVY * mAcc;          
  64.         }
  65.        
  66.        
  67.         vX *= friction;
  68.         vY *= friction;
  69.        
  70.         var avgVX = Mabs( vX );
  71.         var avgVY = Mabs( vY );
  72.         var avgV = ( avgVX + avgVY ) * .5;
  73.        
  74.         if( avgVX < .1 ) vX *= Mrnd() * 3;
  75.         if( avgVY < .1 ) vY *= Mrnd() * 3;
  76.        
  77.         var sc = avgV * .45;
  78.         sc = Mmax( Mmin( sc , 3.5 ) , .4 );
  79.        
  80.        
  81.         var nextX = x + vX;
  82.         var nextY = y + vY;
  83.        
  84.         if( nextX > canvasW )
  85.         {
  86.             nextX = canvasW;
  87.             vX *= -1;
  88.         }
  89.         else if( nextX < 0 )
  90.         {
  91.             nextX = 0;
  92.             vX *= -1;
  93.         }
  94.        
  95.         if( nextY > canvasH )
  96.         {
  97.             nextY = canvasH;
  98.             vY *= -1;
  99.         }
  100.         else if( nextY < 0 )
  101.         {
  102.             nextY = 0;
  103.             vY *= -1;
  104.         }
  105.        
  106.         m.vX = vX;
  107.         m.vY = vY;
  108.         m.x  = nextX;
  109.         m.y  = nextY;
  110.        
  111.         ctx.fillStyle = m.color;
  112.         ctx.beginPath();
  113.         ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
  114.         ctx.closePath();
  115.         ctx.fill();    
  116.     }
  117. }

Related Content:

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.