Recreating Breakout

Processing Coding Questions
1

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!

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);
}
1 Like
2

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:

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;
  }
}
1 Like
3

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

1 Like
4

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

1 Like
5

@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 :confused:

6

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

strokeWeight(0.1);
7

Look at lerp() in the reference

8

For dashed lines, use the dashed lines library:

Previous discussion:

2d_primitives.gif800×600 650 KB