Seb Lee-Delisle » Particles

Battle of the Browsers

Seb Lee-Delisle — Tue, 01 May 2012 10:52:37 +0000

I had a great time at the State of the Browser conference in London on Saturday – it was nice to see representatives from FireFox, Chrome, Opera and MSIE all getting along so well.

Getting along well is all nice and stuff, but isn’t it more fun if there’s a bit of tension? So to stir things up a bit I live coded a fun but completely irrelevant test that would pit the browsers against each other and stretch them to their limits.

It’s based on this micro tutorial on CreativeJS.com and works on a pixel level, directly manipulating the 2D canvas data to render pixel particles.

Although it was a completely unfair test (I even cheekily ran IE in a VM as punishment for not making a cross platform browser ) it’s still kinda astonishing that JS can render millions of particles without catching breath.

image stolen from the Mozilla blog

When asked, most people assumed that Chrome would be fastest, but it was actually FireFox that won the challenge with around 3.6 million particles. This is most likely because they’ve implemented typed arrays in their canvas image data object (coming in the next Chrome, apparently).

Run the test for yourself here and play with the code on JSBin. Keep the mouse pressed until the red bar hits the right hand side (Which means we’re running at 5 fps).

For sensible write ups of the event that mostly ignore irrelevant particle tests :

Mozilla
UBelly
Remy Sharp
Andi Smith

I am a Mozilla Person of HTML5!

Live coding examples from Beyond Tellerand

Seb Lee-Delisle — Sun, 04 Dec 2011 15:07:06 +0000

Sorry this one’s taken a little while to post! At Marc Thiele’s excellent conference Beyond Tellerand a couple of weeks ago, I live coded some snow and other things in JavaScript, and here’s the code.

Keep an eye on the Beyond Tellerand Vimeo channel and you’ll be able to watch all the presentations as they’re uploaded.

And Happy Christmas!

HTML5 Canvas 3D particles uniform distribution

Seb Lee-Delisle — Wed, 02 Feb 2011 16:36:43 +0000

Yesterday Paul Rouget from Mozilla asked how to uniformly arrange points within a circle. There are a few existing algorithms to do this, but I was interested in seeing if I could use simple physics to create a stable system to distribute the particles evenly.

In the end I don’t think Paul could use them, (although I put him in touch with Mario who came up with slick solutions) but I enjoyed the process and found the results very pleasing!

Click on each thumbnail to see the effects in action. Tip : click to make more particles!

So how did I go about making this system?

I searched the dark recesses of my mind for a recollection of Robert Hodgin explaining the physics for his Magnetosphere : I needed to build a similar system where all particles repel each other.

To start with, I made a simple particle system with position, velocity and drag, explained in these two tutorials here and here if you need a refresher.

I’m using my own Vector object to store position and velocity. Vectors are critical to this type of visual programming, and if you haven’t used them before, it’s worth spending some time getting your head around them. Try this tutorial (based around Processing but still relevant).

Once we have that running we check all the particles against each other. We have an array of particle objects and we iterate through them in a nested loop :

for (i=0; i<particles.length-1; i++){
 
	var p1 = particles[i]; // the first particle
 
	for(j=i+1; j<particles.length; j++) {
 
		var p2 = particles[j]; // the second particle
		// compare p1 to p2 here... 
 
	}
}

If we have 5 particles :

0 1 2 3 4

The first time around the inner loop i will be 0 and j will go from 1 to 4 :

i  : 0 0 0 0
j  : 1 2 3 4

the second time around :

i  : 1 1 1
j  : 2 3 4

third time :

i  : 2 2
j  : 3 4

final time :

i  : 3
j  : 4

For each comparison we work out the repulsion between the two particles: the closer they are, the more they repel, and we’ll store this value in repelforce vector. First, we set this to the vector between p1 and p2 :

repelforce.copyFrom(p2.position);
repelforce.minusEq(p1.position);

then we get the length or magnitude of that vector :

mag = repelforce.magnitude();

We calculate the repel force strength by subtracting the magnitude from 50 : the resulting value increases the closer the particles are.

repelstrength = 50-mag;

If the force is less than 0, it means that the particles are further than 50 pixels apart, and no force should be applied. Otherwise, we have to work out a repelforce vector to apply to each particle’s velocity.

To do this, we divide the repelforce vector by its magnitude. This process is known as normalisation and it returns a unit vector : a vector with the same angle as before but with a length of 1.

repelforce.divideEq(mag);

The great thing about unit vectors is that you can multiply them by any value to get a vector with a length of that value. So if we multiply it by our repelstrength, we’ll have our repelforce vector :

repelforce.multiplyEq(repelstrength);

Except, we need to multiply that force by a small amount to make it less intense.

repelforce.multiplyEq(repelstrength*0.025);

If we want our particles to repel more use a number higher than 0.025, if you want it to be more subtle go lower. I played around with this value until it seemed to work well.

Of course this division and multiplication can be combined into one call so

repelforce.divideEq(mag);
repelforce.multiplyEq(repelstrength*0.025);

can be simplified into :

repelforce.multiplyEq(repelstrength*0.025/mag);

Each particle object has a force vector that we use to add up all the various forces for every frame update. As the force currently works in the direction from p1 to p2 it can be added to p2′s force to push it away from p1 :

p2.force.plusEq(repelforce);

We want p1 to go the opposite direction, so we subtract it from p1′s force:

p1.force.minusEq(repelforce);

All that’s left is a very similar calculation of a force that stops the particles getting too far from the centre and we have a system! :

See it in action here.

The great thing about vector maths is that it also works in 3D with no changes at all! So a quick conversion into three.js and we have this :

See it in action here.

It seemed a bit chaotic so forced the particles onto the surface of a sphere:

See it in action here.
(Particle image courtesy of Mr.doob’s additive blend three.js particle example)

Wow. It’s taken me all afternoon to explain this, and I’m not entirely sure I’ve done that good a job! Please feel free to ask questions, and if you know this stuff well, perhaps you could point out where I could have explained things better.

JavaScript HTML5 Canvas Snow in 3D

Seb Lee-Delisle — Thu, 25 Nov 2010 00:38:42 +0000

Incredibly, the early bird tickets on my HTML5/JS training course sold out in just 20 minutes today! And to celebrate I thought you might like an early Christmas present – JavaScript HTML5 canvas snow in 3D!

(There are still 4 standard price tickets left on the course if you’re interested in learning more about this stuff!)

I adapted one of the Mr.doob‘s three.js Particle examples. I’ve extended the particle class and added velocity to update it’s position. Anyone that knows me knows that I’ve been making snow for a while now! Most people’s first approach is to make the snow move left and right but actually you don’t need to do that. If there are lots of flakes all moving in different directions it pretty much has the same effect, and it gives much simpler and more uniform effect.

As ever, the code is fully commented and available on github.

[UPDATE: code has been updated now to work in Three.js revision 46]

3D engine in 10 lines*

Seb Lee-Delisle — Tue, 09 Mar 2010 00:03:55 +0000

UPDATE – HTML 5 Canvas version now online

During my session at the Flash Gaming Summit, I showed a very simple 3D particle renderer to attempt to demystify the process of converting 3D into 2D.

[kml_flashembed publishmethod="dynamic" fversion="10.0.0" useexpressinstall="true" movie="http://sebleedelisle.com/wp-content/uploads/2010/03/Particles3D.swf" width="500" height="350" targetclass="flashmovie"]

Click and drag.

The actual code that converts from 3D to 2D is easy! First you have to figure out how much you have to resize things depending on how far away they are. (ie what their z position is).

newscale = f/(f+z);

Where f is a notional field of view. Changing this will change how wide the (virtual) camera is. A good starting point would be 250. Then you multiply the 3D x and y positions by the newscale to get their 2D x and y positions.

x2d = x3d * newscale; 
y2d = y3d * newscale;

So that’s where we put our particle, in this case represented by a MovieClip that we also need to resize by our new scale :

clip.scaleX = clip.scaleY = newscale;

And then the final thing we need to do is sort by the z position so that particles in front appear above particles in the background.

particles.sortOn("z", Array.DESCENDING | Array.NUMERIC); 
for(var i:int = 0; i< particles.length;i++)
{
	particle = particles[i];
	particleClip.setChildIndex(particle.clip, i); 
}

There’s some other stuff in there too, to create the depth of field blur and also the bitmap trails, but have a look and see what you can do with it.

Download the source code for simple 3D engine.

* I haven’t actually counted the number of lines. I’m guessing it’s about 10.

Papervision3D snow

Seb Lee-Delisle — Tue, 02 Dec 2008 00:00:58 +0000

I don’t know about you guys, but at the moment I’m getting several calls a day asking for Flash Christmas cards. And what do you need in a Flash Christmas card? Christmas snow! Remember last year I completed the 3D-Flash-snow-in-15-minutes challenge at FlashBrighton’s Big Day Out? Well this year I thought I’d do the same thing with Papervision; now you can add snow to your own 3D scenes!

Snowstorm is a DisplayObject3D so you just add it to your scene. And there’s also a Snowflake.as file too.

new SnowStorm( quantity, flakeSize, cubesize);

It basically makes a big cube full of snow flakes! The parameters should be fairly self explanatory.

Download the source here.

Happy Birthday Keith Peters!

Seb Lee-Delisle — Mon, 20 Oct 2008 21:15:15 +0000

John, Andy and I thought we’d chuck a little something together for Keith now that he’s 44, (or 14 x Pi if you’re talking his language). Happy Birthday!

My stuff any use to you? Pay it forward for cancer research.

Seb Lee-Delisle — Thu, 16 Oct 2008 18:11:24 +0000

Have you ever found any use for any of my stuff? That nifty particle effect on your game? That 3D Papervision website? Or perhaps you’ve just found my wry sense of humour somewhat amusing?

Now’s your chance to thank me! But I don’t want anything from you. No, I’m asking you to pay it forward! But unlike the little kid in the film, I’m actually doing something physical – next Sunday, just before my presentation at the conference, I’m running 10K for Cancer Research UK.

My target is £500, but this blog get has thousands of subscribers, so if you all donate a small amount, then maybe I’ll get to £1000? Or even £2000? Hell maybe even £10,000???

Please sponsor my run here. You’ll get a warm fuzzy feeling. Or your money back.*

* You probably won’t actually get your money back

Come to FITC and win stuff!

Particle tutorial part 2 in Computer Arts magazine

Seb Lee-Delisle — Fri, 22 Aug 2008 21:57:02 +0000

Part two of my particle tutorial in Computer Arts is featured in issue 152, August 2008.

Using the skeletons on the Plug-in Media website as an example, I take you through how to blow things up in Flash!

Source files are included on the CD – let me know how you get along and show me what you’re blowing up!

[UPDATE] You can now find this tutorial free online here.

So long and thanks for all the particles…

Seb Lee-Delisle — Tue, 10 Jun 2008 13:50:47 +0000

After yesterday’s rather well received Papervision3D session, I’m now gearing up for what will probably be the last time I present my particles session, Kaboom!!! Blowing things up in Flash

I feel like I’m laying a close friend to rest, they’ve been with me through the years, the ups, the downs, the collisions off the floor. But now I have to move on. I’m sure it’s not the last I’ll see of them though, my work with particles continues, and who knows, perhaps I’ll get them together again for a reunion tour in a couple of years.

As ever, bring your laptop and join in with the fun… download the source files here.