Gravity gives screen objects apparent weight. In a screen coordinate system, where y increases downward, simulate it as a constant positive acceleration: add a small gravity value to vertical velocity every frame. Then update position from that velocity. The result is a fall that speeds up instead of moving at a robotic constant rate. section 12.3 section 12.1.2
For a falling object, the essential update is `vy += gravity`, followed by `y += vy`. An object launched upward begins with negative `vy`; gravity raises it toward zero at the peak, then makes it positive as the object falls. A deliberately light value can make a balloon drop feel appropriate rather than heavy. section 14.2.3 section 14.2.1
Combine gravity with these animation rules to create a convincing bounded motion:
- Give each object vertical and optional horizontal velocity, then apply gravity to its vertical velocity on every animation frame. section 14.2.1
- Detect a floor collision, place the object back at the boundary, reverse vertical velocity, and reduce its magnitude to dissipate energy. section 12.3 section 14.2.1
- Treat wall collisions separately by reversing and reducing horizontal velocity; gravity continues to control the vertical motion. section 14.2.1
- Pair gravity with drag when an effect needs rising, falling, and gradually slowing sideways movement. section 14.2.3
Balloon drop particle system
Create balloons at the top of a canvas with randomized positions, sizes, and velocities. On each frame, add gravity to `vy`, add `vx` and `vy` to position, and check the floor and viewport edges. A floor impact reverses `vy` with a reduced multiplier, while wall impacts damp `vx`, producing a natural-looking drop and bounce. section 14.2.1
Listing 14.4c A simulation of a balloon drop (part 3)
function animateBalloons() {
const gradient = pCtx.createLinearGradient(0, 0, 0, canvasHeight);
gradient.addColorStop(0, 'hsl(203 57% 65%)');
gradient.addColorStop(1, 'hsl(203 57% 85%)');
pCtx.fillStyle = gradient;
pCtx.fillRect(0, 0, canvasWidth, canvasHeight);
balloons.forEach(p => {
p.vy += gravity; #1
p.x += p.vx; #2
p.y += p.vy; #2
if (p.y + p.radius > canvasHeight) { #3
p.y = canvasHeight - p.radius;
p.vy *= -0.6; #4
}
if (p.x <= p.radius) { #5
p.x = p.radius;
p.vx *= -0.75; #6
}
if (p.x >= canvasWidth - p.radius) { #7
p.x = canvasWidth - p.radius;
p.vx *= -0.75; #8
}
drawBalloon(p);
});
requestAnimationFrame(animateBalloons);
}
window.addEventListener('resize', () => {
pCanvas.width = window.innerWidth;
pCanvas.height = window.innerHeight;
canvasWidth = pCanvas.width;
canvasHeight = pCanvas.height;
});
animateBalloons();
The animation loop makes the calculation visible: gravity changes `vy`, velocity changes position, and collision responses reverse and damp motion. section 14.2.1
Completion confetti
Launch confetti with randomized upward vertical velocity and sideways velocity. Gravity eventually turns the upward motion into a descent, while drag steadily reduces sideways travel. This makes a brief celebratory shower feel varied without needing complex physics. section 14.2.3
