Bouncing ball app, can anyone help me implement vectors?

Programming Questions

cron12

Bouncing ball app, can anyone help me implement vectors?

in Programming Questions • 6 months ago

Hi, basically i have a programmed an App that is essentially 2 balls, one is controlled by the mouse and is used to 'bounce' the other around the window.

Essentially i'm wondering if anybody can help me to implement vectors in my code as I've heard it's a better way to do this kind of thing, and it cleans up the code, but I've never used it and am having trouble understanding how to do it.

anyway here is the code;

float bx;

float by;

int ballSize = 20;

int ballSize2 = 40;

int m;

boolean bover = true;

boolean locked = false;

float xOffset = 0.0;

float yOffset = 0.0;

int numBalls = 2;

float spring = 0.05;

float friction = -0.4;

Ball[] balls = new Ball[numBalls];

void setup() {

size (640,600);

bx = height/2;

by = width/2;

stroke(0);

background(120);

noStroke();

smooth();

balls[0] = new Ball(300, 205, height/8, 0, balls);

balls[1] = new Ball(bx, by, height/7, 1, balls);

fill(0);

}

void draw()

{

background(0);

for (int i = 0; i < numBalls; i++) {

balls[i].collide();

balls[i].move();

balls[i].display();

}

balls[0].x = mouseX+5;

balls[0].y = mouseY+5;

if (mouseX > bx-ballSize && mouseX < bx+ballSize &&

mouseY > by-ballSize && mouseY < by+ballSize) {

bover = true;

if(!locked) {

}

else {

stroke(100);

bover = false;

}

class Ball {

float x, y;

float diameter;

float vx = 0;

float vy = 0;

int id;

float mass;

float spring = 0.2;

float rest_posx;

float rest_posy;

Ball[] others;

Ball(float xin, float yin, float din, int idin, Ball[] oin) {

x = xin;

y = yin;

diameter = din;

id = idin;

others = oin;

}

void collide() {

for (int i = id + 1; i < numBalls; i++) {

float dx = others[i].x - x;

float dy = others[i].y - y;

float distance = sqrt(dx*dx + dy*dy);

float minDist = others[i].diameter/2 + diameter/2;

if (distance < minDist) {

float angle = atan2 (dy, dx);

float targetX = x + cos(angle) * minDist;

float targetY = y + sin(angle) * minDist;

float ax = (targetX - others[i].x) * spring;

float ay = (targetY - others[i].y) * spring;

vx -= ax;

vy -= ay;

others[i].vx += ax;

others[i].vy += ay;

}

void move() {

x += vx;

y += vy;

if (x + diameter > width) {

x = width - diameter;

vx *= friction;

}

else if (x - diameter < 0) {

x = diameter;

vx *= friction;

}

if (y + diameter > height) {

y = height - diameter;

vy *= friction;

}

else if (y - diameter < 0) {

y = diameter;

vy *= friction;

}

void display() {

fill(255, 204);

ellipse(x, y, diameter, diameter);

}

void mousePressed() {

if(bover) {

locked = true;

}

else {

locked = false;

}

xOffset = mouseX-bx;

yOffset = mouseY-by;

}

void mouseDragged() {

if(locked) {

bx = mouseX-xOffset;

by = mouseY-yOffset;

}

void mouseReleased() {

locked = false;

}

Any help would be greatly appreciated!!

Thanks

cron12

Replies(4)

PhiLho

Re: Bouncing ball app, can anyone help me implement vectors?

6 months ago

float xOffset = 0.0;

float yOffset = 0.0;
That's a PVector! (and default value is 0, anyway)

float x, y;
That's another PVector...

float vx = 0;

float vy = 0;
Guess what? (why init these and not x and y?)

float rest_posx;

float rest_posy;
Yet another PVector.

Ball[] others;
A ball should not know the others: it is inefficient (each ball has a list of all the other: redundancy) and bad for updates, etc. Manage the collisions outside of the Ball class. Or keep here just the code for the collision with another ball given as parameter.

GoToLoop

Re: Bouncing ball app, can anyone help me implement vectors?

6 months ago

I've made some re-factoring in the code above! Perhaps it can ease the pain to modify it even further:

[Edit] -> Play it online:

http://studio.processingtogether.com/sp/pad/export/ro.91xkuWl51J$Vp/latest

// http://forum.processing.org/topic/bouncing-ball-app-can-anyone-help-me-implement-vectors

// http://studio.processingtogether.com/sp/pad/export/ro.91xkuWl51J$Vp/latest

final static short NUM_BALLS = 4, DIM = 0200, FPS = 50;
final static Ball[] balls = new Ball[NUM_BALLS];

final static String ENGINE = P2D; // use JAVA2D on Processing 2+

void setup() {
  size (800, 600, ENGINE);
  frameRate(FPS);
  smooth();
  noCursor();
  noStroke();
  fill(Ball.COLOUR);

  balls[0] = new Ball(DIM >> 1, 0);

  for ( int i=1; i!=NUM_BALLS; balls[i] = new Ball(DIM, i++) );
}

void draw() {
  background(0);
  for (Ball b: balls)  b.script();
}

final class Ball {
  float x, y, vx, vy;
  final int diam, rad, id;

  final static float SPRING = .2, FRICTION = -.4;

  final static color TRANSLUCENT = 0xCC << 030;
  final static color COLOUR = 0xFFFFFF | TRANSLUCENT;

  Ball(int d, int ident) {
    diam = d;
    rad  = d >> 1;
    id   = ident;
  }

  void script() {
    update();
    collide();
    display();
  }

  void display() {
    ellipse(x, y, diam, diam);
  }

  void collide() {
    int i = id;
    while (++i != NUM_BALLS) {
      final Ball b = balls[i];

      final float xx = b.x, yy = b.y;
      final float dx = xx - x, dy = yy - y;

      final float distance = sqrt(dx*dx + dy*dy);
      final float minDist  = b.rad + rad;

      if (distance < minDist) {
        final float ang = atan2(dy, dx);
        final float tx = x + cos(ang)*minDist;
        final float ty = y + sin(ang)*minDist;
        final float ax = (tx - xx)*SPRING, ay = (ty - yy)*SPRING;

        vx -= ax;
        vy -= ay;

        b.vx += ax;
        b.vy += ay;
      }
    }
  }

  void update() {
    if (id == 0) {
      x = mouseX;
      y = mouseY;
      return;
    }

    if ( (x += vx) + rad > width ) {
      x = width - rad;
      vx *= FRICTION;
    }
    else if (x - rad < 0) {
      x = rad;
      vx *= FRICTION;
    }

    if ( (y += vy) + rad > height ) {
      y = height - rad;
      vy *= FRICTION;
    }
    else if (y - rad < 0) {
      y = rad;
      vy *= FRICTION;
    }
  }
}

cron12

Re: Bouncing ball app, can anyone help me implement vectors?

5 months ago

I've been trying to implement vectors myself now and i started from scratch.

I have now separated elements of my code into multiple tabs

CBall cont;

void setup(){

size(800, 800);

cont = new CBall(new PVector(), 20);

}

void draw(){

background(255);

cont.display();

}

That's the first tab of the sketch

class Ball{

color stroke = color(0);

color fill = color(0);

float size;

PVector position;

Ball(PVector p, float s){

setPosition(p);

setSize(s);

}

void setSize(float s){

this.size = s;

}

float getSize(){

return this.size;

}

void setPosition(PVector p){

this.position = p;

}

PVector getPosition(){

return this.position;

}

void display(){

stroke(this.stroke);

fill(this.fill);

ellipse(this.getPosition().x, this.getPosition().y, this.getSize(), this.getSize());

}

That's the second tab of the sketch

class CBall extends Ball{

CBall(PVector p, float s){

super(p, s);

}

PVector getPosition(){

this.setPosition(new PVector(mouseX, mouseY));

return this.position;

}

And the third

class MBall extends Ball{

MBall(PVector p, float s){

super(p, s);

}

and the Fourth

Can anybody help me to now add the second ball and the collision math using vectors instead?

allonestr..

Re: Bouncing ball app, can anyone help me implement vectors?

5 months ago

as I've heard it's a better way to do this kind of thing

I wonder if you misheard or were misinformed!

If you're thinking of using PVectors (a Processing beastie for holding two [or three] variables - usually a set of x, y [and z] values), PhiLho showed above how you could combine your various variables somethingx and something y into a PVector something containing the values something x and something y. This is using PVector at its most basic and can be a neat way of holding these x and y parts of something nicely together.

Once you've put these x and y values together into a PVector, you can use the various functions available to PVector, like pvector1.add(pvector2), and pvector.mag() for example. Now you can get into using PVector as maths vectors, as PVector provides the facility to do many of the maths vector stuff, like adding two vectors, finding the magnitude of a vector and loverly stuff like dot product and cross products.

I think that, unless you thrive on u and v with little arrows drawn over them and really "get" vectors, it would be easier to learn how to do collisions using cartesian geometry and trig, albeit combining related x and y values into a PVector if you like.

Collisions (and classes and arrays) are explained really well in this ActionScript book and many of the supplied Processing examples are taken from it: Making things move by Keith Peters

Top Reply