Under — Preposition Programming

Fig. 1 Dip path — a curved route passes beneath the bridge obstacle

Try it — drag, click, or tap inside the figure.

Open in p5 Web Editor Fork and experiment with this sketch

Concept

UNDER means passing below something. The sketch animates a curved path that dips beneath a bridge-like barrier.

Translation strategy

Ways to express under in a sketch:

Dip path: Use a Bézier or sine curve below ground level
Obstacle span: Highlight when X is beneath the barrier width
Depth control: Adjust how far below the path travels

Key p5.js methods

Key methods

Curved path
• bezierPoint() — sample points along the dip
• lerp() — progress from 0 to 1

Drawing
• rect() — bridge; beginShape() — path guide

Pointer input
• mousePressed() — start motion or set a target
• mouseX, mouseY — click position

Code pattern

Code pattern

1. Define path and obstacle
let start = { x: 50, y: 200 }, end = { x: 350, y: 200 };
let control = { x: 200, y: 260 };

2. Sample the curve
let x = bezierPoint(start.x, start.x, end.x, end.x, t);
let y = bezierPoint(start.y, control.y, control.y, end.y, t);

3. Advance animation
if (isMoving && t < 1) t += 0.015;

4. Detect under the span
let under = x > obs.x && x < obs.x + obs.w;