Seb Lee-Delisle » Particles

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.

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.

FlashBelt is gonna rock!

Seb Lee-Delisle — Thu, 29 May 2008 17:27:36 +0000

I’m really looking forward to FlashBelt this year, meeting up with Dave Schroeder, and all my good flasher friends, especially Jeremy Thorp, who hasn’t made it to any other conferences since last year’s FlashBelt. It’s always a great one, hitting above it’s weight in terms of the calibre of speakers Dave attracts.

And I’m giving two presentations there this year! One is a new session, Papervision3D, Simplified, all about getting stuck into PV with the minimum amount of fuss and stress… I’ll show you how to set up a PV project, load collada files, bake textures and even make a simple 3D game! All in an hour! (Yes I know, I must be mad). I’ll be uploading files probably the night before – as you know I like to leave it to the last minute…

And then I’m also doing the well tested particles session – Kaboom!!! Blowing things up in Flash, and this will probably be the last outing EVER for this session. I’m going to miss it, it’s become a well trusted old friend. And I’ve had the most fun with it. But I have to move on, so now I’m going to concentrate on Papervision for a little while.

But before that, I’m taking my fianceé Jenny to Italy for a week! Up north in the lake district. I’m really looking forward to it, but I must admit to feeling a little anxious – I’m shutting off my computer and mobile phone for a whole week! Who knows I may even relax a little

And I’ll be back online next Sunday… see you then!

Computer Arts Particle Article now online

Seb Lee-Delisle — Thu, 08 May 2008 18:01:19 +0000

Excellent! I just found out that Computer Arts magazine have posted the article I wrote for them online as a PDF. So you can learn how to make a particle class from scratch and using it to create basic particle effects such as sparks and smoke.

Here’s the article, and here are the source files.