# Make two objects interacting with each other

**URL:** <https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843>\
**Category:** Coding Questions\
**Created:** [September 25, 2018, 9:04pm UTC](https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843 "2018-09-25T21:04:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JimyiHendrix](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@JimyiHendrix](https://discourse.processing.org/u/JimyiHendrix)\
**Post date:** [September 25, 2018, 9:04pm UTC](https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843/1 "2018-09-25T21:04:10Z")

</div>

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

```auto
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;
  }
  
}

```

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [September 25, 2018, 9:52pm UTC](https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843/2 "2018-09-25T21:52:20Z")

</div>

[https://editor.p5js.org/julian2/sketches/SJ3E2QdFX](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](http://jeffreythompson.org/collision-detection/circle-rect.php) 🙂

---

<div class="post-metadata">

**Author:** ![JimyiHendrix](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@JimyiHendrix](https://discourse.processing.org/u/JimyiHendrix)\
**Post date:** [September 26, 2018, 8:38pm UTC](https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843/3 "2018-09-26T20:38:07Z")

</div>

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;  
}  
}

---

<div class="post-metadata">

**Author:** ![julian2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/julian2/32/1551_2.png) [@julian2](https://discourse.processing.org/u/julian2)\
**Post date:** [September 29, 2018, 10:46am UTC](https://discourse.processing.org/t/make-two-objects-interacting-with-each-other/3843/4 "2018-09-29T10:46:08Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/844dd416bc0672c2f5056ff445d49c625df22608.jpeg)

`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](https://en.wikipedia.org/wiki/Magic_number_(programming)) 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.