In my previous collision detection post (in what I expect will become a series), I talked about predicting whether two objects would collide in between frames. This is to avoid the situation where the objects are moving so fast that they pass through each other before you’ve had a chance to see if they’re overlapping. This is often known as a sweep test (amongst other things!)

And I showed how you could predict collisions between a 2D circle and a vertical line but what about lines that aren’t vertical? How do you work out collisions between circles and lines of any angle?

Here is where vector maths comes in, so if you haven’t looked at it since school, here’s a great article that will tell you the basics (based around Processing but you’ll get the jist). And for further study you can look at this very comprehensive guide from the CCSU.

So we have our circle flying around and we want to test whether it’s colliding with the line, in other words are they overlapping? Logic dictates that if the distance from the line to the centre of the circle is less than the circle’s radius then it must be penetrating (stop giggling at the back!). But how do we find this distance?

When I started solving these sort of problems I’d use trigonometry: right angled triangles and sine cosine and tan. But I later learned that you can use some magic vector maths to do the same thing much much faster. But first there are some things you need to know about :

Dot product

The dot product of 2 vectors is a number that varies depending on the angle between them. It’s called the dot product because it’s sometimes represented with a ‘˙’ symbol. It’s calculated by multiplying the various elements of the two vectors together. Use this interactive demo to see how the dot product changes as you move the vectors around.

In particular, notice how the dot product is negative when the angle between the vectors is greater than 90º and positive when the angle is less than 90º. Also note that the dot product is 0 when the vectors are perpendicular to each other. This will be very useful to us later on.

Normals

Simply put, a normal is a vector that is at a right angle to a line, and it’s usually a unit vector, ie a vector that is 1 unit long.

Shortest distance between a line and a circle

Let’s say we have a line defined by two points P1 and P2, the line normal is N, and our circle’s centre point is C. We also have the vector between P1 and C, called (rather unimaginatively) P1C.

To find out the distance between C and the line you simply get the dot product between P1C and N. So if this distance is less than the radius of the circle then we know we’ve got an overlap and therefore the circle is colliding with the line!

You can see it here in this example, click to drag the points and the circle around.

Predicting collisions between a circle and a line

So you know the distance between the line and where the circle is now (lets call it d1), and what the distance will be in the next frame (d2), but what we need to know is how far along were we between frames when (and if) there will be a collision. A collision occurs when the distance is equal to the radius, and we’re trying to find a value for t (time) where t = 0 now and t = 1 in the next frame.

We can use this formula :

current distance = d1 + (d2-d1) * t 

so when d = the radius r :

r = d1 + (d2-d1) * t 

and with some algebra even I can just about manage we can extract t :

r-d1 = (d2-d1)*t
(r - d1) / (d2-d1) = t 

So if t is between 0 and 1 we know we collided between frames!

Whew. This blog post is getting epic. But we’re not quite there yet, we still need to work out where the circle is at the point of collision: we take the vector between C1 and C2, multiply it by t and add it to C1.

Here’s an example that shows this all in action :

I’ll continue this series further to explain :

• collision reactions
• collisions between moving circles
• and all the same for 3D – spheres and planes!

I really hope this is useful, it’s actually really hard to explain this in writing, so let me know if any of it is unclear. And of course I’ll be explaining this in more detail in my upcoming Flash Game Programming training course.

Related posts:

1. Papervision Perspective Line material
2. Meet Carlos Ulloa and me at the Magic Circle
3. Predictive collision detection techniques

In preparation for my upcoming Flash game programming training courses, I’m getting my head back into game physics, and I so I thought I’d share some useful collision detection methods I’ve discovered over the last few years.

Reactive collision detection

Collision detection in Flash games often occurs after things have moved. So you have a circle (usually a 2D representation of a ball) and you’re moving it towards a vertical line on the side of the screen (representing a wall). Every frame, you update its position and check whether it’s overlapping the wall.

Which is great, but of course if the ball is moving fast it may go from one side of the wall all the way to the other side between frames and no collision is detected. One way to get around this is to split up the movement of the ball into small segments and run this check several times between frames. This seems pretty inelegant to me so I have always strived to use predictive collision detection methods where my maths knowledge has allowed me! (This is also known as sweep testing, frame independent or continuous collision detection (CCD)).

Predicting when things will collide before you move them

So rather than just check whether the ball is intersecting with the wall between renders, we actually check the velocity of the ball to see at what point in time it would hit the wall if it continued in the direction it’s going.

If the ball is moving at 10 pixels per frame and the wall is 30 pixels away then we know that we will hit it in 3 frames. And if the wall is 15 pixels away we know that we will hit it at some point between the next frame and the frame after.

But if it’s 5 pixels away then we know that the ball will hit the wall exactly half way between the last frame and the next. And more importantly we know that the collision occurred after the ball had moved half of its velocity. So not only do we know when the collision occurred, we also can work out where the ball is when it collided.

So imagine this code is running between frames :

 
// the distance from the wall to the ball
distance = wallX-(ballX+radius); 
 
// timeHit is the time that the ball will hit the wall in frames: 0 is now, 
// 1 is the next frame, 2 is the frame after that
timeHit = distance / velX; 
 
// if timeHit is between 0 and 1 we know that the ball will hit the wall 
// within this update
if((timeHit>0) && (timeHit<1))
{
   // we have a collision! As the hit time is between 0 and 1 we can 
   // multiply the velocity by that number to find the collision point
   ballX += (velX*timeHit); 
   ballY += (velY*timeHit); 
 
   // at this point we would do a collision reaction, here's a simple 
   // bounce assuming the ball is on the left and the wall is on the right
   velX *= -1; 
}

Moving the ball to its collision point

The really great thing about this method is that you genuinely find out where the collision happened as opposed to discovering an intersection and then trying to work out how to move your objects back to stop them overlapping.

Of course this is a very basic example, and it may be that simpler methods would suffice in this case. But as we get into more complex examples you’ll see exactly how valuable this technique can be.

Coming next – predicting collisions between circles.

Related posts:

1. Bitmap Parallax Techniques
2. Simple real-time easing in Flash & 3D panels
3. 3D cloth simulation in Flash

We’ll be covering all the fun stuff, collisions, physics, optimisation, actionscript animation and working with graphical assets and sound. I’ve just put the first draft of the itinerary together and I’m really excited about it – it’s all of my very favourite things about programming ActionScript.

And of course we’ll be using my portfolio of games as case studies, including Jambuster (BBC), Extreme Pamplona (Sure for Men), The Simple Game (Philips) and we’ll even be diving into the code for LunarLander3D in detail.

Early bird pricing is only £250 for 2 days and there are 4 student places, so please book early to ensure your space.

Flash Games Programming in Brighton information and booking.

Related posts:

1. 2 days of Papervision3D and Flash games training for £249!
2. NYC Flash games training – $50 off SALE!
3. More training courses in Cologne, Minneapolis, New York and San Francisco

So I was delighted when those charming chaps at FriendsOfEd asked me to be the Technical Reviewer for the latest version of the book!

Not only do I get to see the book before anyone else, I also get paid for it! Oh and I do have to actually suggest some stuff every now and again.

I must say it’s looking pretty damn good so far… of course I can’t reveal the exact content of the book, but you can read all about it here [link no longer available], and even pre-order it here!

And here’s Keith’s take on it. Oh and some bullet points, just to get you excited :

• ActionScript for Flash Player 10 3D and Inverse Kinematics
• New drawing API commands and PixelBender
• Isometric world creation
• Artificial intelligence including pathfinding and steering/flocking behaviors
• Numerical integration for real world physics
• Advanced collision detection

And if that doesn’t get you excited, I don’t know what will! (And yes, maybe I should get out more…) It’s due out 1st December.

Related posts:

1. Making a multi-track recorder in Flash part 2
2. Learn how to program Flash games
3. Particle tutorial part 2 in Computer Arts magazine

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.

Related posts:

1. Flash particle tutorial in Computer Arts magazine
2. Computer Arts Particle Article now online
3. FITC Amsterdam particle tutorial

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.

Related posts:

1. Flash particle tutorial in Computer Arts magazine
2. Particle tutorial part 2 in Computer Arts magazine
3. Particle tutorial now on Lynda.com

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

Click here to see the video on Vimeo

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 :

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.

Related posts:

1. Hollywood, Flash on the Beach and digital fireworks
2. Papervision interactive Line3D
3. 3D video projections in Flash

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!

Related posts:

1. Flash particle tutorial in Computer Arts magazine
2. Hollywood, Flash on the Beach and digital fireworks
3. Next stop : Toronto FITC

You can download the actual files from this session here, or get the latest updated versions here.

I’ll be slowly phasing this presentation out in favour of more complex particle effects and Papervision3D, so this is a great place to see this session.

And, as ever, let me know what you think!

(Excellent photo by http://flickr.com/photos/timerdmann)

[UPDATE] Here is a direct link to the presentation at Lynda.com

Related posts:

1. FITC Amsterdam particle tutorial
2. Particle tutorial part 2 in Computer Arts magazine
3. Flash particle tutorial in Computer Arts magazine

If you want to work along with me then you can download the source files here.

Related posts:

1. Papervision Simplified, at FITC Amsterdam
2. Particle tutorial now on Lynda.com
3. FITC Hollywood Session – AS3 Particle effects