Add more Gravity Balls & Link a button to restart a screen... Beginner Coder

Processing Coding Questions
1

Hey guys!

I’ve just started learning to code in processing… Please forgive my “simple” approach. I have 2 things I need help with. I have looked for answers to these issues but have not been successful.

  1. Connecting my restart button with the code to “when clicked” restart the entire sketch file or refresh the page.

  2. This may be ore difficult, add more bouncing balls when the “add balls” button is clicked.

Here are the images and code

Images and Code

Thank you in advance!!

Love this community!

PVector location;  // Location of shape
PVector velocity;  // Velocity of shape
PVector gravity;   // Gravity acts at the shape's acceleration

PImage photo;
PImage photo1;
PImage photo2;
PImage photo3;
PImage photo4;


void setup() {
  size(1000,700);
  background(234,76,136);
  location = new PVector(100,100);
  velocity = new PVector(1.5,2.1);
  gravity = new PVector(0,0.2);
  
  photo = loadImage("hello.png"); 
  photo1 = loadImage("head_left.png"); 
  photo2 = loadImage("head_right.png"); 
  photo3 = loadImage("restart.png"); 
  photo4 = loadImage("add_ball.png"); 

  
}

void draw() {
  background(234,76,136);
  
  // Ball will bounce in front of this image.
  // I simply want the restart button to refresh the screen and start the entire Sketch File over.
  image(photo3, 520, 500, 200, 60);
  
  // Here I'd like to have this button add more balls when clicked with NO LIMITS as to the #s of balls
  image(photo4, 240, 500, 200, 60);
  
  // Add velocity to the location.
  location.add(velocity);
  
  // Add gravity to velocity
  velocity.add(gravity);
  
  // Bounce off edges
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) {
    // We're reducing velocity ever so slightly 
    // when it hits the bottom of the window
    velocity.y = velocity.y * -0.97; 
    location.y = height;
  }

  // Display circle at location vector
  strokeWeight(5);
  stroke(255, 114, 175, 255);
  
  // Fill
  fill(228, 69, 131, 255);
  ellipse(location.x,location.y,48,48);
  
   // Images
  image(photo, 320, 225, 317, 133);
  image(photo1, 20, 25, 483, 55);
  image(photo2, 580, 25, 391, 55);


  
}


 //void mouseClicked(photo3) {
 //setup();
 
//}
1 Like
2

i think at first you could bring some structure to your coding style:

// https://discourse.processing.org/t/add-more-gravity-balls-link-a-button-to-restart-a-screen-beginner-coder/12903

PVector location = new PVector(100,100);  // Location of shape
PVector velocity = new PVector(1.5,2.1);  // Velocity of shape
PVector gravity  = new PVector(0,0.2);   // Gravity acts at the shape's acceleration
PImage photo0, photo1, photo2, photo3, photo4;

void setup() {
  size(1000,700);
  preload();
}

void draw() {
  background(234,76,136);
  headers();
  buttons();
  ball_move();
}

void preload() {
  photo0 = loadImage("hello.png"); 
  photo1 = loadImage("head_left.png"); 
  photo2 = loadImage("head_right.png"); 
  photo3 = loadImage("restart.png");          // buttons
  photo4 = loadImage("add_ball.png"); 
}

void headers() {    // Images
  image(photo0, 320, 225, 317, 133);
  image(photo1, 20, 25, 483, 55);
  image(photo2, 580, 25, 391, 55);
}

void buttons() {    // Here I'd like to have this button add more balls when clicked with NO LIMITS as to the #s of balls
  image(photo3, 520, 500, 200, 60);
  image(photo4, 240, 500, 200, 60);
}

void ball_move() {  
  location.add(velocity);                          // Add velocity to the location.
  velocity.add(gravity);                           // Add gravity to velocity
  if ((location.x > width) || (location.x < 0)) {  // Bounce off edges
    velocity.x = velocity.x * -1;
  }
  if (location.y > height) { // We're reducing velocity ever so slightly when it hits the bottom of the window
    velocity.y = velocity.y * -0.97; 
    location.y = height;
  }
  strokeWeight(5);
  stroke(255, 114, 175, 255);
  fill(228, 69, 131, 255);
  ellipse(location.x,location.y,48,48);   // Display circle at location vector
}

next step: make buttons

basic is to detect a
mouse over rectangle ( so need the position and size of the button images )
add following function

//_________________________________________________________________ mouse over rectangle yes/no
boolean overRect(int rx, int ry, int rwidth, int rheight) {
  if (mouseX >= rx && mouseX <= rx+rwidth   && 
    mouseY >= ry && mouseY <= ry+rheight)  return true;
  return false;
}

and use that function inside the buttons function
( lets first say to print a “button x clicked” to console )

1 Like
3

Thank you… Yes your structure is far superior and more efficient. I’m going through it now… thank you very much!

I’ll need to read up a bit on button functions per your notes…