Lesson Three Assignment

Assignment Brief

Using the interactive stripes as an example, I want you to create a Button object. It can be rectangular or circular, it's up to you.

Then I want you to make an array of the buttons.

They should move around the screen and when they reach the edges, they either bounce off or loop around to the other side of the screen.

When you click on a button, it changes colour. When you click it again it reverts to its original colour.

You have until the end of Tuesday 10th January.

Source: http://www.openprocessing.org/classrooms/?classroomID=1197

My Answer

I was inspired by the simplicity of this assignment and wanted to try something whacky! Instead of purely getting my buttons to collide with the contraints of the canvas, I wanted to see if I could get them to collide with each other as well.

I archived a working copy of my buttons without independent collisions, just in case I couln't produce a working version of my inspired idea on deadline day.

Process

Up until this point, I'd read a lot on how to handle multiple collisions, of which, these resources were the most helpful:

• http://processing.org/learning/topics/bouncybubbles.html
• http://stackoverflow.com/questions/345838/ball-to-ball-collision-detection-and-handling
• http://processing.org/learning/topics/circlecollision.html

Even though I'd not read otherwise, I was adamant I could avoid the complexities of physics and just have the buttons reverse direction once they'd collided; doing this'd mean they'd seem to bounce off one another. After adapting my intial button class to detect and handle collisions in this manner, I gave it a whirl - it worked, and it looked ok! After some testing, I realised there was an intermittent issue; something was causing the buttons to get stuck. This one was beyond me, so I decided to write a question on Stack Overflow in the hope someone could tell me what was going on.

My Question

This is something I'm trying to do for a university assignment and I'm quite new to it, but I've done a lot of reading on the subject. Please could someone to explain, in the simplest terms, how to do what I'm trying to do, so that I can understand what needs to happen?

I have an array of objects, each draw a circle to the screen; I have them bouncing within a bounding box but now I'd like them to collide.

I wrote the method below, which is working... but only just. The balls occasionally get stuck and 'jitter' on one another and I have no idea why this is happening.

I also pasted a link to my code, and then waited...

Answer

You cannot just reverse the direction in which your object is moving, because the collision may happen almost from behind it, in which case the reversal will put it again in collision course against the object which collided with it. That explains the jitter that you see. You need to consider the direction from which the collision occurred, and adjust your direction vector accordingly, using the related physics formulas for what is known in physics as "elastic collisions".

Here, check this out: http://en.wikipedia.org/wiki/Elastic_collision

It took a whopping 11 minutes for that answer! And he was so right...

I've learnt a huge amount in this process, one being not to bypass the complexities of physics, namely Elastic Collision.


Source: http://en.wikipedia.org/wiki/Elastic_collision

Result

I decided to submit the inspired version to show what I'd accomplished.