# Recreating Breakout

**URL:** <https://discourse.processing.org/t/recreating-breakout/9356>\
**Category:** Coding Questions\
**Created:** [March 16, 2019, 11:15pm UTC](https://discourse.processing.org/t/recreating-breakout/9356 "2019-03-16T23:15:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)\
**Post date:** [March 16, 2019, 11:15pm UTC](https://discourse.processing.org/t/recreating-breakout/9356/1 "2019-03-16T23:15:49Z")

</div>

Hey there! I’ve been working on recreating the classic game, Breakout. As I’ve been working on it, I started working with creating the properties for the ball such that it would stick to the walls, could be aimed, and fired again. With this, I’ve run into some issues;

1. Creating a dashed line for the aim assist. Creating a dashed line has proven difficult, because when I successfully create it, it lags my computer out due to being so hard on the computer.

2. Having the line follow the mouse, but go beyond the mouse to the edges of the walls. Using mouseX allows the line to stop/follow the mouse, but I want it to go beyond the mouse. Any ideas, i have the angle for atan down but can’t figure out how to make it go further then the mouse.

3. Finally, creating a mousePressed() function that once pressed, “shoots” the ball towards the direction. I assume once I can create my line through the mouse, it would just inputting the angle into the speed variable to have it move that direction.

Here’s my code, any ideas are appreciated!

```auto
void setup() {
  background(0);
  size(800, 800);
}
float height = 800;
float width = 800;
final int BALL_SIZE = 20;
float ballPY = (height/4)*3;
float ballPX = (width/4);
float angle = random(TWO_PI);
float ballX = cos(angle)*3;
float ballY = sin(angle)*-4;

void draw() {
  background(0);
  drawBall();
}

void drawBall() {
  float mouseAngle = atan2(mouseY-height/2,mouseX-width/2);
  ballPX += ballX;
  ballPY += ballY;
  if (ballPX + BALL_SIZE/2 > width || ballPX - BALL_SIZE/2 < 0) {
    ballX = 0;
    ballY = 0;
    stroke(255);
    line(ballPX, ballPY, mouseAngle*100, mouseAngle*100);
  }
  if (ballPY + BALL_SIZE/2> height || ballPY - BALL_SIZE/2 < 0) {
    ballY = 0;
    ballX = 0;
    stroke(255);
    line(ballPX, ballPY, mouseX, mouseY);
  }
  ellipse(ballPX, ballPY, BALL_SIZE, BALL_SIZE);
}

```

---

<div class="post-metadata">

**Author:** ![Naeloob](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@Naeloob](https://discourse.processing.org/u/Naeloob)\
**Post date:** [March 17, 2019, 12:44am UTC](https://discourse.processing.org/t/recreating-breakout/9356/2 "2019-03-17T00:44:36Z")

</div>

I created a function for mouse pressed and made the line extend. I used a PVector to create an angle between the mouse and the ball, and a variable called stuck to keep track of whether the ball is stuck to the wall or not. The code:

```auto
void setup() {
background(0);
size(800, 800);
}
float height = 800;
float width = 800;
final int BALL_SIZE = 20;
float ballPY = (height/4)*3;
float ballPX = (width/4);
float ballX = cos(90)*3;
float ballY = sin(90)*-4;
float speed = 10;// how fast the ball travels
boolean stuck = false;//wether or not the ball is stuck to the wall
PVector v1;
PVector v2;
PVector angle;

void draw() {
background(0);
v1 = new PVector(ballPX, ballPY);
v2 = new PVector(mouseX, mouseY);
angle = PVector.sub(v2,v1);
drawBall();
}

void drawBall() {
ballPX += ballX;
ballPY += ballY;
if (ballPX + BALL_SIZE/2 > width || ballPX - BALL_SIZE/2 < 0) {
stuck = true;
ballX = 0;
ballY = 0;
stroke(255);
angle.mult(10);
line(ballPX, ballPY, ballPX + angle.x, ballPY + angle.y);
}
else if (ballPY + BALL_SIZE/2> height || ballPY - BALL_SIZE/2 < 0) {
stuck = true;
ballY = 0;
ballX = 0;
stroke(255);
angle.mult(10);
line(ballPX, ballPY, ballPX + angle.x, ballPY + angle.y);
}
else{
 stuck = false; 
}
ellipse(ballPX, ballPY, BALL_SIZE, BALL_SIZE);
}

void mousePressed(){
  if(stuck){
   angle.setMag(0.9);
   ballX = speed*angle.x;
   ballY = speed*angle.y;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 17, 2019, 1:44pm UTC](https://discourse.processing.org/t/recreating-breakout/9356/3 "2019-03-17T13:44:55Z")

</div>

> [@Naeloob](#):
>
> float height = 800;  
> float width = 800;

Those are already inbuilt and read values from the `size()` command automatically

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 17, 2019, 1:51pm UTC](https://discourse.processing.org/t/recreating-breakout/9356/4 "2019-03-17T13:51:20Z")

</div>

Also remember to hit **ctrl-t** in processing prior to posting and in the forum mark the entire code with the mouse and click the `</>` sign in the command bar

---

<div class="post-metadata">

**Author:** ![DM\_Slippin](https://avatars.discourse-cdn.com/v4/letter/d/a8b319/32.png) [@DM\_Slippin](https://discourse.processing.org/u/DM_Slippin)\
**Post date:** [March 17, 2019, 8:29pm UTC](https://discourse.processing.org/t/recreating-breakout/9356/5 "2019-03-17T20:29:19Z")

</div>

@Naeloob Wow works great! Thank you so much, I’ve never used PVectors yet nor been taught them so I’m glad you were able to help me.  
@Chrisir Noted, I’ll make sure too from now on.

Does anyone have a solution for the dashed line? I still can’t seem to make one out that would function properly 😕

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [March 18, 2019, 7:20am UTC](https://discourse.processing.org/t/recreating-breakout/9356/6 "2019-03-18T07:20:45Z")

</div>

> [@DM\_Slippin](#):
>
> 1.) Creating a dashed line for the aim assist. Creating a dashed line has proven difficult, because when I successfully create it, it lags my computer out due to being so hard on the computer.

> [@DM\_Slippin](#):
>
> Does anyone have a solution for the dashed line? I still can’t seem to make one out that would function properly

i would think a thin line would be more easy for everyone ( you, processing and the cpu )

```auto
strokeWeight(0.1);

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 18, 2019, 9:55am UTC](https://discourse.processing.org/t/recreating-breakout/9356/7 "2019-03-18T09:55:30Z")

</div>

Look at `lerp()` in the reference

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 21, 2019, 11:42pm UTC](https://discourse.processing.org/t/recreating-breakout/9356/8 "2019-03-21T23:42:19Z")

</div>

For dashed lines, use the dashed lines library:

- [https://github.com/garciadelcastillo/-dashed-lines-for-processing-](https://github.com/garciadelcastillo/-dashed-lines-for-processing-)

Previous discussion:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/comment/122404/#Comment_122404)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

 ![](https://yyz2.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2e970aa86e7eebdcb81128695fd97d7190961e10.gif)