So, just playing around for now. Here is just some code where you can hardcode in the number of balls to animate within the stage area. You can also change the bounding area, with a few more variables, so the balls will be contained. This may serve as a little groundwork for a simple interactive game I just thought of.
Here is a new updated Ball.as class I got from my book “Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters”
package {
import flash.display.Sprite;
public class Ball extends Sprite {
public var radius:Number;
private var color:uint;
public var vx:Number = 0;
public var vy:Number = 0;
public var NewXPos:Number = 0;
public var NewYPos:Number = 0;
public function Ball(radius:Number=20, color:uint=0xb3d830) {
this.radius = radius;
this.color = color;
init();
}
public function init():void {
graphics.beginFill(color);
graphics.drawCircle(0, 0, radius);
graphics.endFill();
}
}
}
The document class Bouncing.as file to make the balls bounce:
package
{
import flash.display.Sprite;
import flash.events.Event;
public class Bouncing extends Sprite
{
private var balls:Array;
private var ttl_balls:uint = 10; // total number of balls
public function Bouncing()
{
init();
}
private function init():void
{
balls = new Array();
for(var ct:uint = 0; ct < ttl_balls; ct++)
{
var ball:Ball = new Ball(Math.random() * 5 + 5, Math.random() * 0xffffff);
balls.push(ball);
ball.vx = Math.random() * 10 + (Math.random() * 5);
ball.vy = Math.random() * 10 + (Math.random() * 5);
ball.x = Math.random() * stage.stageWidth;
ball.y = Math.random() * stage.stageHeight;
addChild(ball);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
for(var ct:uint = 0; ct < ttl_balls; ct++)
{
var ball:Ball = balls[ct];
detectAndMove(ball);
}
}
private function detectAndMove(ball:Ball):void
{
var myRadius = ball.radius;
ball.NewXPos=ball.x + ball.vx;
ball.NewYPos=ball.y + ball.vy;
// CHECK FOR COLLISIONS TO THE LEFT AND RIGHT BOUNDS
if (ball.NewXPos + ball.radius > stage.stageWidth)
{
ball.vx *= -1;
ball.NewXPos = stage.stageWidth - ball.radius;
}
else if (ball.NewXPos - ball.radius < 0)
{
ball.vx *= -1;
ball.NewXPos = ball.radius;
}
// CHECK FOR COLLISIONS TO THE TOP AND BOTTOM BOUNDS
if (ball.NewYPos + ball.radius > stage.stageHeight)
{
ball.vy *= -1;
ball.NewYPos = stage.stageHeight - ball.radius;
}
else if (ball.NewYPos - ball.radius < 0)
{
ball.vy *= -1;
ball.NewYPos = ball.radius;
}
// ANIMATE
ball.x = ball.NewXPos;
ball.y = ball.NewYPos;
}
}
}
Hi Morgan,
Could you please explain how you determined your velocity calculation: «ball.vx = Math.random() * 10 + (Math.random() * 5);» ?
I’m not a physic guy, so I’ve googled and found some answer like « final velocity (v) equals the initial velocity (v) plus the average acceleration (a) multiplied by time (t).»
So how did you find your initial velocity and your average acceleration? I’m sure it’s not a guess ;-p.
Thank you very much, and continue your good work
) !
Hi Xavier, As I look at how ball.vx is valued, I honestly can’t figure out why that equation is in there.. I am thinking that I was just playing around and forgot to clean up that code where Math.random() * 15 would accomplish the same. The final velcity is calculated within the detectAndMove function (which is being called on a frame event which will note as our time) and is essentially just taking each individual’s ball’s x and y position and adding in the velocity that was assigned to it (ball.vx).
Not sure if this is confusing or not, if so when I get back from vacation I can do breakdown of the code when I get back. manewc [ A T ] gmail and let me know.
Thanks for looking!
Morgan
Well, everything in your code is pretty clear seriously. There was only that part that confused me. Well, it still confuse me a little (Why Math.random()*15, and not Math.random*2 or *100), but I think it’s clearer.
So if I well understood, *15 is probably personal choice and *10 would do the trick, but slower, and *100 would be too fast. Tell me if I’m wrong ;- p, hehe.
Thanks for your time and answers, I really appreciate.
Xavier
Exactly! The higher the number then the faster the ball will move – totally arbitrary – the higher the value you assign to ball.vx or ball.vy then the faster the motion will be
Is there a way to make it so the balls bounce inside a container like another movie clip?
Hi Brian, This could be accomplished by creating another class file that has the above code within it and then instantiating this new class from within your Main Document class.
Thanks, Morgan
Is there a way to make the balls bounce inside a shape, like a circle?
Is there a way to make these bounce inside of a circle. I think this particular clas works with items that have defined sides, top, bottom, left, right…
I have been working with different concepts to try and make items bounce inside of a non descript shaped object to no avail. I know the physics will be different, but I am not sure how to set up the hitTest or if I should even use this method at all in this case.
I ultimately want the balls to bounce inside of a boundary, in this case a movie clip of some sort.
Thanks, Brian P
Hey Rob and Brian, I knew I have seen something like this effect, but unfortunately I haven’t been able to find it.. although I did find another old bookmark that may help you out:
http://lab.polygonal.de/2007/02/17/bounding-circle-computation/
If I find that other example, I’ll let you know!
Thanks, Morgan
Hi Morgan,
Any chance you could make the FLA for the example above available?
Or could you post the code used in the FLA to initiate the classes? Sorry for the basic request but I’m still struggling with the move from AS2 to AS3!
Thanks
Bob
Quick note to newbies – to initiate this, you must set your Document Class to ‘Bouncing’ (FILE > PUBLISH SETTINGS > (Flash Tab) > SETTINGS > Document Class) or have a movie clip on the stage linked to the ‘Bouncing’ class.
Thanks for the info Bob! Alternatively if you open your Properties Panel (cmd+F3 Mac), there is a text field there where you can assign your Document Class.
Thanks again and please let me know if you have any more questions.
Morgan
Hi.. nice post. I donno if you’re still around this but do you know how to make the balls bounce off each other too?
Of course, its more complicated than making them bounce off the screen edges. A dirty way of doing it would be to change the signs of the velocities of the two colliding balls, I already tried that but it doesn’t look smooth and sometimes behaves erratically, kinda like on a weird alien planet
Anyways if you’re still around your help is appreciated. Thanks.
Prabhu
Prabhu, You can take a look here. More collision detection with APE (ActionScript Physics Engine)
http://manewc.com/2008/08/13/ape-project-step-6-rotating-rectangle-particles/
Thanks!
Actually, this is a better demo:
http://manewc.com/2008/07/31/ape-actionscript-physics-engine-revisited-multiple-bouncing-balls/
Thanks!
When I was looking into getting the balls to deflect off each other I came across this thread by Prof. Fu-Kwun Hwang:
http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=4.0
It works nicely and helped me create this colliding marbles program:
http://geekswithblogs.net/TechTwaddle/archive/2009/07/16/bouncingcolliding-marbles-directdraw-part-7.aspx
Thanks for help!