Redirection object after collision

Zmcarthur

let bubble;
let targets = [];

function setup() {
    createCanvas(500, 700);
    bubble = new Bubble();
        for (let i = 0; i < 10; i++) {
            targets[i] = new Target;
        }
}

function draw() {
    background(0);
    bubble.show();
    bubble.move();
    for (let i = 0; i < targets.length;  i++) {
        targets[i].show();
        if (targets[i].intersects(bubble) == true) {
            console.log('True!');
        }
    }
}

function Target() {
        this.x = random(50, 450);
        this.y = random(50, 650);
        this.r = 50;
        this.val = floor(random(1, 100));

    this.show = function() {
        fill(255);
        rectMode(CENTER);
        rect(this.x,this.y,this.r,this.r);
        fill(0);
        textSize(18);
        textAlign(CENTER, CENTER);
        text(this.val, this.x, this.y);
    }
    this.intersects = function(other) {
            dx = this.x - other.x;
            dy = this.y - other.y;
            d = sqrt(dx * dx + dy * dy);
            minDistance = this.r + other.r;
            if (d < minDistance) {
                return true;
            } else {
                return false;
            }
        }
}


function Bubble() {
            this.x = 50;
            this.y = 50;
            this.r = 10;
            this.xspeed = 10;
            this.yspeed = 7;

        this.move = function() {

            if (this.x > width || this.x < 0) {
                this.xspeed = this.xspeed * -1;
            }

            if (this.y > height || this.y < 0) {
                this.yspeed = this.yspeed * -1;
            }

             this.x = this.x + this.xspeed;
             this.y = this.y + this.yspeed;
            }
        this.show = function() {
            noStroke();
            fill(255);
            ellipse(this.x,this.y,this.r*2,this.r*2);
        }
    }

So, basically i found a way to calculate whether or not a collision occurred with the bubble and the targets. Using the Pythagorean theorem to calculate d (the distance) and comparing it to the minDistance, which i've said is whether or not the radii have crossed. I've confirmed this is working by console.logging 'True!' if that occurs and it works. Where I'm stumped is getting the ball to bounce correctly. I'm assuming that i need to calculate the angle of incidence and use that to generate a new angle off of the target. Foolishly i was using xspeed = xspeed * - 1 and yspeed = yspeed * -1. That changes the direction completely and isn't a "bounce" it's simply a reversal of the direction.

jeremydouglass

It sounds like you want bouncing that works something like this...?

• https://processing.org/examples/bouncybubbles.html
• https://codepen.io/edhebert/pen/QdXLKE

Zmcarthur

Um, not quite... definitely the right track though. That was an array of objects interacting with many other objects in that same array. What i have is one object, interacting with an array of objects. I'm not having any luck finding a working solution for making realistic reflection. Meaning, if the ball hits the side of a square, it's angle off of the square is realistic; Rather than simply turning around which of course is not realistic if done at an angle, which is far more likely in a sketch with a ball randomly bouncing around the screen with a bunch of square obstacles.

Zmcarthur

Got it figured out, thanks so much for the help!