Ball Physics

by bigheadmonster28 in Design > Animation

124 Views, 1 Favorites, 0 Comments

Ball Physics

Screenshot 2026-05-16 173910.png

In this project, you will learn how to code (in java) your own ball physics simulator!

(Full Project Attached)

This isn't really a Animation but a simulator showing the physics of a ball bouncing.

This system uses a simplified form of:

Newtonian motion:

  1. Force → acceleration (gravity)
  2. acceleration → velocity
  3. velocity → position

(Also called Euler Integration)

It also includes time Scale , where you can observe and play with the sliders

Downloads

Ball_Tester.pde

Supplies

Processing - The tool we use to code and run this program


link: https://processing.org/

Setup, Prepare Variables and World

ArrayList<Ball> balls = new ArrayList<Ball>();

float gravity = 0.5;
float elasticity = 0.85;
float startVelocity = 6;
float timeScale = 1.0;
float airResistance = 0.01;

Slider gSlider, eSlider, vSlider, tSlider, aSlider;
Slider activeSlider = null;

what this does

This is the base of the entire simulation.

  1. balls stores every object in the world
  2. physics variables define how the world behaves:
  3. gravity = how fast things fall
  4. elasticity = how “bouncy” collisions are
  5. startVelocity = how fast new balls begin moving
  6. timeScale = slow motion control
  7. airResistance = drag force

important idea

Nothing is actually drawn yet, we are just setting up the variables

Initialize Sliders and Make First Ball

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

balls.add(new Ball(width/2, 100));

gSlider = new Slider(20, 20, 220, 0, 2, gravity);
eSlider = new Slider(20, 60, 220, 0, 1, elasticity);
vSlider = new Slider(20, 100, 220, 0, 15, startVelocity);
tSlider = new Slider(20, 140, 220, 0, 1, timeScale);
aSlider = new Slider(20, 180, 220, 0, 0.1, airResistance);
}

what this does

This runs once at the start.

  1. creates the window
  2. spawns the first ball
  3. builds all UI sliders

important idea

This is where all the variables are controlled, and crating the UI for the sliders.

Actual Simulation


void draw() {
background(25);

gravity = gSlider.value;
elasticity = eSlider.value;
startVelocity = vSlider.value;
timeScale = tSlider.value;
airResistance = aSlider.value;

gSlider.display("gravity");
eSlider.display("elasticity");
vSlider.display("start velocity");
tSlider.display("time scale");
aSlider.display("air resistance");

drawButtons();

for (Ball b : balls) {
b.update();
b.display();
}

fill(255);
text("balls: " + balls.size(), 20, 240);
}

what this does

This is the core simulation loop that runs every frame.

It does 3 major jobs:

  1. read UI values → update physics variables
  2. update every ball
  3. draw everything

important idea

This is the main loop of the system.

Ball Objects

class Ball {
float x, y;
float vx, vy;
float r = 25;
color c;

what this does

Each ball is a self-contained objects, which stores the physics variables.

It stores:

  1. position (x, y)
  2. velocity (vx, vy)
  3. size (r)
  4. color

important idea

this makes it so each ball behaves independently.

Updating the Balls

void update() {

float t = timeScale;

vy += gravity * t;

x += vx * t;
y += vy * t;

vx *= (1 - airResistance * abs(vx));
vy *= (1 - airResistance * abs(vy));

what this does

This is the physics simulation core.

Step by step:

  1. gravity increases downward velocity
  2. velocity moves position
  3. air resistance slows motion over time

important idea

This is where the balls get affected by the variables.

World Edges(boundaries)

if (y + r > height - 50) {
y = height - 50 - r;
vy *= -elasticity;

if (abs(vy) < 0.2) vy = 0;
}

if (x + r > width || x - r < 0) {
vx *= -elasticity;
}
}

what this does

This keeps balls inside the world:

  1. floor collision:
  2. stops sinking
  3. reverses velocity
  4. reduces energy
  5. wall collision:
  6. reverses horizontal motion

important idea

This makes a closed space for the ball so it doesn't go out of the world.

Rendering

void display() {
noStroke();
fill(c);
ellipse(x, y, r*2, r*2);
}

what this does

This simply visualizes the balls

  1. position → screen location
  2. radius → size
  3. color → appearance

important idea

Makes the balls visible

Adding Buttons

void drawButtons() {
fill(70);
rect(850, 20, 120, 40);
rect(850, 70, 120, 40);

fill(255);
text("add ball", 875, 45);
text("reset", 890, 95);
}

what this does

Creates interactive controls:

  1. add new ball
  2. reset simulation

important idea

Adds buttons to better control the system.


Mouse Interaction

void mousePressed() {

if (mouseX > 850 && mouseX < 970 && mouseY > 20 && mouseY < 60) {
balls.add(new Ball(width/2, 100));
}

if (mouseX > 850 && mouseX < 970 && mouseY > 70 && mouseY < 110) {
balls.clear();
balls.add(new Ball(width/2, 100));
}

activeSlider = null;

if (gSlider.hit(mouseX, mouseY)) activeSlider = gSlider;
else if (eSlider.hit(mouseX, mouseY)) activeSlider = eSlider;
else if (vSlider.hit(mouseX, mouseY)) activeSlider = vSlider;
else if (tSlider.hit(mouseX, mouseY)) activeSlider = tSlider;
else if (aSlider.hit(mouseX, mouseY)) activeSlider = aSlider;
}

what this does

Handles clicking:

  1. detects button presses
  2. selects which slider is active

important idea

This is allows you to click and drag sliders with your cursor.

Slider Dragging

void mouseDragged() {
if (activeSlider != null) {
activeSlider.drag(mouseX);
}
}

void mouseReleased() {
activeSlider = null;
}

what this does

Allows real-time control:

  1. click + drag slider = change physics live
  2. release = stop interaction

important idea

This is what makes the simulation feel more interactive.

Slider System

class Slider {
float x, y, w;
float min, max;
float value;

what this does

Each slider:

  1. maps mouse movement → numeric value
  2. controls physics variables

rendering slider


void display(String label) {
stroke(180);
line(x, y, x + w, y);

float t = map(value, min, max, 0, w);
float kx = x + t;

noStroke();
fill(255);
ellipse(kx, y, 14, 14);

fill(230);
text(label + ": " + nf(value,1,3), x + w + 10, y + 5);
}

what this does

Draws:

  1. slider track
  2. knob position
  3. label + value

interaction logic


boolean hit(float mx, float my) {
float t = map(value, min, max, 0, w);
float kx = x + t;
return dist(mx, my, kx, y) < 10;
}

what this does

Checks if mouse is on the knob.


void drag(float mx) {
float t = constrain((mx - x) / w, 0, 1);
value = lerp(min, max, t);
}

what this does

Converts the mouse position on the slider to a physics value

Conclusion

This is the end of the tutorial/breakdown of my project

Sources : Processing Wiki , YoutubeTutorial, and grammarly-my grammar isn't great :I

(This took a while so I hope you enjoyed it)

Thank You For Your Time