Make two objects interacting with each other

p5.js Coding Questions
1

Hello everyone!!

i’m new in this of programming but i am trying to learn by making this sort of codes. I would like the ball and the wall1 interact each other making the ball bounce on the brick.
May somebody guide me, please?

thanks for your time

var wall1, wall2;
var ball;

function keyPressed(){
  if(keyCode === UP_ARROW){ wall1.y = wall1.y - 80;}
  if(keyCode === DOWN_ARROW){
  	wall1.y = wall1.y + 80;
  }
}

function setup() {
  createCanvas(650, 500);
  
  wall1 = new Wall(20, 20, 20, 120);
  wall2 = new Wall(width - 40, 	20, 20, 120);
  ball = new Ball(width/2, height/2, 20);
}

function draw() {
  background(0);
  
  let aSq = wall1.b * ball.h;
  let aCr = PI * ball.r * ball.r;
  
  let d = dist(ball.x, wall1.x, ball.r, wall1.x/2);
  
  if(d < ball.r + wall1.x/2){
   Ball.xspeed = Ball.xspeed * -1;
   Ball.yspeed = Ball.yspeed * -1; 
     }
  
  ball.moveBall();
  ball.ball();
  
  //wall1.moveSquare();
  wall1.showSquare();
  
  wall2.moveSquare();
  wall2.showSquare();
}

class Ball{
  
  constructor(x, y, r){
  	this.x = x;
    this.y = y;
    this.r = r;
    this.xspeed = random(5, 10);
    this.yspeed = random(5, 10);
  }

  ball(){
  	stroke(255);
  	strokeWeight(4);
  	noFill();
  	ellipse(this.x, this.y, this.r * 2);
  }
  
  moveBall(){
  	if(this.x >= width || this.x <= 0){
    	this.xspeed = this.xspeed * -1;
    }
    this.x = this.x + this.xspeed;
    
    if(this.y >= height || this.y <= 0){
    	this.yspeed = this.yspeed * -1;
    }
    this.y = this.y + this.yspeed * -1;
  }
  
}

class Wall{
  constructor(x, y, b, h){
    this.x = x;
    this.y = y;
    this.b = b;
    this.h = h;
    this.yspeed = random(5, 8);
  }
  
  showSquare(){

    rect(this.x, this.y, this.b, this.h);
    }
  
    moveSquare(){
  	if(this.y >= height-this.h || this.y <= 0){
    	this.yspeed = this.yspeed * -1;
    }
    this.y = this.y + this.yspeed;
  }
  
}
2 Likes
2

https://editor.p5js.org/julian2/sketches/SJ3E2QdFX

I’ve tried to make ‘minimal changes’ in the sense that you’ll hopefully recognize how I changed your code. I only introduced a new concept of paddles (which is only an array of instances of your wall class).

I moved the ‘boundary collision’ code into its own function & created a similar function to do ‘paddle/wall collision checking’, and I’m only doing what you could call a ‘simple collision’ between a box & a single point (the center of the circle). for determining the angle the ball will bounce back in (the ball’s yspeed), i decided to go with the 'distance between the ball and the center of the paddle!

Hopefully the code changes help! If you want to do some more ‘true to life’ collision checking between the ball and the paddles, have a look at http://jeffreythompson.org/collision-detection/circle-rect.php :slight_smile:

1 Like
3

thanks a lot julian2. i am trying to understand a piece of code, may you explain it to me please?

paddleCollision() {
for (let paddle of paddles) {
if (this.x >= paddle.x && this.x <= (paddle.x + paddle.b) &&
this.y >= paddle.y && this.y <= (paddle.y + paddle.h)) {
this.xspeed = this.xspeed * -1;
this.yspeed = (this.y - (paddle.y + paddle.h / 2)) / 10;
}
}

4

oh yeah, that code definitively isn’t the best, but I’ll try my best to explain it!

for (let paddle of paddles) {
here I iterate through all the paddles (your wall class)

if (this.x >= paddle.x && this.x <= (paddle.x + paddle.b) && this.y >= paddle.y && this.y <= (paddle.y + paddle.h)) {

check if the ball (the point at the center of the ball [this.x, this.y] is inside a paddle)

image
image.jpg755×824 37.1 KB

this.xspeed = this.xspeed * -1;

I decided to just flip the x velocity

this.yspeed = (this.y - (paddle.y + paddle.h / 2)) / 10;

and set the y-speed to the ‘y difference’ of the ball and the center of the paddle (hence paddle.y + paddle.h / 2). The 10 is a magic number that ‘felt right’ since the ‘pixel distance’ given by the y-difference calculation was a bit too much, so I wanted to scale that down a bit.