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

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

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

}

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.

// 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

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

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

}

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() {
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 )

``````//_________________________________________________________________ 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

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…