Bouncy Ball

Learn how to create a simple physics simulation using HTML and JavaScript.

Intermediate

Create a simple physics simulation in your browser using HTML and JavaScript!

Materials Needed

A text editor (like Notepad, VS Code, or any basic text editor)
A web browser (Chrome, Firefox, Edge, or Safari)

Steps

Create a New HTML File
Open your text editor and create a new file named physics.html. Then, add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Physics Simulation</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

This creates a webpage with a canvas element where the physics simulation will be displayed.

Create the JavaScript File
In the same folder, create a new file named script.js. This file will handle the physics calculations and animations.

Set Up the Canvas and Ball Object
Add the following code inside script.js:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let ball = {
    x: 300,
    y: 100,
    radius: 20,
    vx: 2,
    vy: 0,
    gravity: 0.2,
    bounce: 0.7
};

This defines a ball with properties like position, velocity, gravity, and bounce factor.

Update and Draw the Ball
Now, add the animation loop that updates and redraws the ball:

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Apply gravity
    ball.vy += ball.gravity;
    ball.y += ball.vy;
    ball.x += ball.vx;

    // Bounce off the ground
    if (ball.y + ball.radius > canvas.height) {
        ball.y = canvas.height - ball.radius;
        ball.vy *= -ball.bounce;
    }

    // Draw the ball
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();

    requestAnimationFrame(update);
}

update();

This script continuously updates the ball’s position and makes it bounce when it hits the ground.

Running Your Simulation

Save both physics.html and script.js in the same folder.
Open physics.html in a web browser.
Watch the ball bounce with realistic physics!

Experimentation Ideas

Change ball.gravity to see how it affects the fall speed.
Modify ball.bounce to adjust how much energy is lost on each bounce.
Add horizontal movement by modifying ball.vx.
Add multiple balls with different sizes and behaviors.

Now you have a basic physics simulation running in your browser! 🚀

Back to Projects