12345678Build a ball pit · Step 4 of 8
Add physics
You'll learn
- Add static and dynamic bodies
- Make bodies bounce
- Push bodies with impulses
- Leave dynamic bodies to the simulation
- Time
- 15 min
- Builds on
- Step 3: Make it interactive
- File
pit.lua
So far your own code has moved every ball. In this step you hand that job to physics: the balls fall, bounce off the walls and knock into each other, and a Shake button throws them back up.
Let the balls fall
Physics works on the shapes you already draw. DrawPrimitive:add_body
gives a shape a body, and from then on physics decides how it moves.
This step uses two kinds of body:
- A static body never moves. Walls and floors are static.
- A dynamic body falls, bounces and collides. The simulation moves it, not your code.
Replace pit.lua with this version. It drops the movement code from
step 3, and adds gravity and four walls:
local color = datumhue.color
local theme = datumhue.theme
local vec2 = datumhue.math.vec2
local W, H, R = 480, 320, 12
local COLORS = { "#e67e80", "#dbbc7f", "#7fbbb3" }
New line: datumhue.physics.gravity = vec2(0, -600)
New line:
local screen = datumhue.ui.root:panel({
width = "100%",
height = "100%",
flex_direction = "column",
justify_content = "center",
align_items = "center",
gap = 12,
})
local toolbar = screen:panel({
flex_direction = "row",
align_items = "center",
gap = 8,
})
local add = toolbar:button({ text = "Add ball" })
local clear = toolbar:button({ text = "Clear" })
local count = toolbar:label({
text = "Balls: 0",
color = theme.token("accent_primary"),
})
local canvas = datumhue.draw.new({
width = W,
height = H,
background = color("#232a2e"),
})
canvas:mount({ parent = screen, width = W, height = H })
New line: local function wall(x, y, width, height)
New line: local rect = canvas:rect({
New line: pos = vec2(x, y),
New line: width = width,
New line: height = height,
New line: color = color("#475258"),
New line: })
New line: rect:add_body({ type = "static" })
New line: end
New line:
New line: wall(-W / 2, -H / 2, W, 10) -- floor
New line: wall(-W / 2, H / 2 - 10, W, 10) -- ceiling
New line: wall(-W / 2, -H / 2, 10, H) -- left
New line: wall(W / 2 - 10, -H / 2, 10, H) -- right
New line:
local balls = {}
local function add_ball()
New line: local x = math.random(-200, 200)
New line: local y = math.random(0, 120)
New line: local ball = canvas:circle({
New line: pos = vec2(x, y),
radius = R,
color = color(COLORS[#balls % #COLORS + 1]),
})
New line: ball:add_body({
New line: type = "dynamic",
New line: shape = "circle",
New line: restitution = 0.7,
})
New line: table.insert(balls, ball)
count.text = "Balls: " .. #balls
end
local function clear_balls()
for _, ball in ipairs(balls) do
New line: ball:remove()
end
balls = {}
count.text = "Balls: 0"
end
add:on_click(add_ball)
clear:on_click(clear_balls)
datumhue.input.on_key(function(key, pressed)
if key == "a" and pressed then
add_ball()
end
end)
for _ = 1, 10 do
add_ball()
end
In this example: datumhue.color datumhue.theme datumhue.math.vec2 datumhue.physics.gravity datumhue.ui.root UiElement:panel UiElement:button UiElement:label datumhue.theme.token datumhue.draw.new DrawCanvas:mount DrawCanvas:rect DrawPrimitive:add_body DrawCanvas:circle UiElement.text UiElement:on_click datumhue.input.on_key
datumhue.physics.gravitypulls on every body in your app. On a canvas it is in pixels:vec2(0, -600)speeds a falling ball up by 600 pixels per second, every second. The default pull is far too gentle for a canvas.walldraws a rectangle and gives it a static body.DrawCanvas:rectplaces a rectangle by its bottom-left corner, where a circle goes by its center, so the four calls line the edges of the canvas.- Each ball gets a dynamic body with
shape = "circle", sized from the drawing. restitutionis how bouncy a body is, from 0 (no bounce) to 1 (no speed lost). When two bodies hit, they bounce by the average of their two values. The walls keep the default, so a ball bounces a little less off a wall than off another ball.- The
on_updatefunction is gone, and so is each ball's table: the shape is the ball now, and the simulation moves it.
Shake the pit
To move a dynamic body, give it a kick. DrawPrimitive:apply_impulse
works like a bat hitting a ball: the body's speed changes at once, by the
impulse divided by the body's mass.
A ball's mass comes from its size, in the hundreds for these, so a kick
of 400 would barely stir it. With mass = 1, an impulse is the change of
speed itself, in pixels per second. Add a Shake button that kicks every
ball:
local color = datumhue.color
local theme = datumhue.theme
local vec2 = datumhue.math.vec2
local W, H, R = 480, 320, 12
local COLORS = { "#e67e80", "#dbbc7f", "#7fbbb3" }
datumhue.physics.gravity = vec2(0, -600)
local screen = datumhue.ui.root:panel({
width = "100%",
height = "100%",
flex_direction = "column",
justify_content = "center",
align_items = "center",
gap = 12,
})
local toolbar = screen:panel({
flex_direction = "row",
align_items = "center",
gap = 8,
})
local add = toolbar:button({ text = "Add ball" })
New line: local shake = toolbar:button({ text = "Shake" })
local clear = toolbar:button({ text = "Clear" })
local count = toolbar:label({
text = "Balls: 0",
color = theme.token("accent_primary"),
})
local canvas = datumhue.draw.new({
width = W,
height = H,
background = color("#232a2e"),
})
canvas:mount({ parent = screen, width = W, height = H })
local function wall(x, y, width, height)
local rect = canvas:rect({
pos = vec2(x, y),
width = width,
height = height,
color = color("#475258"),
})
rect:add_body({ type = "static" })
end
wall(-W / 2, -H / 2, W, 10) -- floor
wall(-W / 2, H / 2 - 10, W, 10) -- ceiling
wall(-W / 2, -H / 2, 10, H) -- left
wall(W / 2 - 10, -H / 2, 10, H) -- right
local balls = {}
local function add_ball()
local x = math.random(-200, 200)
local y = math.random(0, 120)
local ball = canvas:circle({
pos = vec2(x, y),
radius = R,
color = color(COLORS[#balls % #COLORS + 1]),
})
ball:add_body({
type = "dynamic",
shape = "circle",
restitution = 0.7,
New line: mass = 1,
})
table.insert(balls, ball)
count.text = "Balls: " .. #balls
end
New line: local function shake_balls()
New line: for _, ball in ipairs(balls) do
New line: local kick = vec2(math.random(-200, 200), 400)
New line: ball:apply_impulse(kick)
New line: end
New line: end
New line:
local function clear_balls()
for _, ball in ipairs(balls) do
ball:remove()
end
balls = {}
count.text = "Balls: 0"
end
add:on_click(add_ball)
New line: shake:on_click(shake_balls)
clear:on_click(clear_balls)
datumhue.input.on_key(function(key, pressed)
if key == "a" and pressed then
add_ball()
end
end)
for _ = 1, 10 do
add_ball()
end
In this example: datumhue.color datumhue.theme datumhue.math.vec2 datumhue.physics.gravity datumhue.ui.root UiElement:panel UiElement:button UiElement:label datumhue.theme.token datumhue.draw.new DrawCanvas:mount DrawCanvas:rect DrawPrimitive:add_body DrawCanvas:circle UiElement.text UiElement:on_click datumhue.input.on_key
- The Shake button joins the toolbar and calls
shake_ballswhen clicked. shake_ballskicks each ball up at 400 pixels per second, and sideways by a random amount.mass = 1on each ball turns that kick into a speed.
Click Shake a few times. The balls fly up, knock into each other and fall back into a pile.
Try this
- Set the balls'
restitutionto 0, then to 1, and watch the pile. Then give the walls arestitutionof their own. - Tilt gravity with
vec2(300, -600). - Give Shake a key of its own, as A has for Add ball.
Recap
add_bodygives a shape a body. A static body stays put; the simulation moves a dynamic one.physics.gravitysets the pull.restitutionsets the bounce, averaged between the two bodies that hit.- Move a dynamic body with an impulse, never by setting its
pos.
New in this step