Seb Lee-Delisle » Particles

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.

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

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.

Interactive Digital Fireworks – new video!

Seb Lee-Delisle — Thu, 01 May 2008 22:28:03 +0000

It seems like I’ve been promising to write this one up ever since November! And now I can finally reveal the official video of the event! Which gives me the perfect excuse to get around to this blog post.

So it gives me great pleasure to present Pyro(technics) to the People – The Movie

Click here to see the video on Vimeo
Download the full-quality Quicktime movie

Pyro(technics) to the People was an massive interactive digital fireworks display that was here in Brighton last November 5th. (Which is Guy Fawkes Night for readers outside the UK). It was squeezed kicking and screaming into the world by my team at Plug-in Media, and it was made entirely in Flash.

Ever since seeing the awesome work with Graffiti Research Labs‘ (GRL) Laser Tag project, I’ve become utterly obsessed with the idea of projecting various things onto the sides of buildings.

And as you may have noticed, I like Flash particles. And over the last couple of years I’ve been toying with the idea of an interactive fireworks display. And I walked past the Brighton Unitarian Church pretty much every day. And I just found myself staring at it…

Tour-de-force

So when Tara Solesbury (then of Wired Sussex) asked us if we had any ideas for the Brighton Digital Festival, it was the perfect time to tell her of my plans! Tara, being the one-woman tour-de-force that she is, set about making it happen; coming up with the catchy title, writing a super convincing art blurb that made me sound like an actual artist, and putting all the various and many different pieces in place for it to actually happen.

Flash

Thanks to the massive speed increases in Actionscript 3 it’s now possible to use Flash for this kind of ambitious project, where previously we would have had to use Processing or native code. But still, there was only about 2 weeks to go and a lot of unanswered questions…

Before we could do anything else, we had to make a nice firework effect. Using the Plug-in Media particle system, we created this :

Drag the slider down to increase the number of rockets.

In order to achieve the kind of numbers of particles we needed, we used only bitmap objects, drawn onto a big bitmap, which is much faster that moving around a whole load of sprites.

Once we got that working, of course we just didn’t know what stuff would look like when it was projected onto this rather strangely shaped building! And we obviously couldn’t just hoik our stuff down to the church and have a go! So the Plug-in Media team built a scale model. We were so busy my gorgeous fianceé Jenny even helped out :

And thankfully, when we projected fireworks onto it, it looked kinda cool.

Motion detection

The motion detection and sensors were all done with a single video camera, plugged into the computer and picked up by Flash as a Camera object. We’d just take the current frame, invert it and overlay it over the last frame. Anything that was different between the frames would show up. Then we’d apply a threshold and use that to detect the changed pixels.

Here’s an example of how it works :

Drag the red detection area around to see the effect. And you’ll need a web-cam otherwise it won’t have a video feed to test!

Calibration

Naturally the main fireworks Flash object (swf) took up the entire screen for the projector, and I needed to calibrate and control this from my laptop screen. So I had to make a secondary controller swf that communicated with the fireworks swf. It was a bit of a nightmare to program with the horrible LocalConnection object, but we managed to get it working in the end.

Photo by Nic Serpell-Rand

The calibration tool allowed us to move the collision areas, adjust their sensitivity, and as a nice last minute touch, we could type messages that were then projected to the audience during the show.

Projector woes

Having seen how GRL did it, we thought we knew all about projectors. How hard can it be? Just get a big arse projector and point it at the building, right? Well it’s a little more complicated than that. Wide lenses, zoom lenses, throw ratios, contrast ratios, power requirements, and of course the all important lumens brightness rating.

Thankfully, Tara had enlisted Mark Scarratt and brightonart.tv, who have considerable experience in this type of large digital event. GRL were using a 5000 lumens Panasonic projector. But that wasn’t going to be enough for us!

We asked XL Video about hiring one of their Barco projectors – an awesome 20,000 lumens! But rather frustratingly they were all booked out. (We later found out that Haque Research and Design were hogging 4 of them for their astonishing and beautiful Evoke installation at York Minster)

After discounting the Christie Roadie 25K lumens projector (it needs 3 phase power) Mark and his team hunted down a brand new Sanyo XF47 – the first in the UK and with a contrast ratio of 2000:1. You can’t really tell from the picture, but it’s HUGE! Just under a metre long in its cradle.

Oh and it costs over £1000 per day to hire. Eek!

Sound

And of course what would fireworks be without the pops bangs and fizzes that usually occur? So we set up a mixer, and a couple of radio sets that transmitted the sound effects from the computer, across the road to a 16K sound system provided by Andy Mead and his company Firefly Solar.

The Future

We’re already planning bigger and better things for version 2 that I can’t really talk about. But keep an eye on the blog and I’ll let you know.

Blowing things up in Toronto

Seb Lee-Delisle — Mon, 21 Apr 2008 10:46:01 +0000

Having a fantastic time here in Toronto, although in a supreme display of poor planning my session is at 9am this morning! Never fear! We shall fight the hangovers from the awesome party last night (thanks Influxis) and produce more crazy particle effects!

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

[UPDATE] Wow! What an amazing turnout, thanks so much for the support, especially at 9am!