Onto — Preposition Programming

Fig. 1 Landing path — the object comes to rest on the platform surface

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

ONTO means moving to rest on the top surface of something—the object ends supported by that surface.

Translation strategy

Ways to express onto in a sketch:

Landing point: Target Y sits on the surface minus object radius
Approach path: Animate from above or along an arc
Contact test: Confirm the object has reached the surface

Key p5.js methods

Key methods

Placement
• ontoY = platform.y - objectRadius
• lerp() — landing animation

Drawing
• rect() — platform; ellipse() — object

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

Code pattern

Code pattern

1. Define platform and start
let platform = { x: 200, y: 200, w: 120, h: 20 };
let start = { x: 100, y: 50 };

2. Compute landing position
let landY = platform.y - radius;

3. Animate onto surface
obj.x = lerp(start.x, platform.x, t);
obj.y = lerp(start.y, landY, t);

4. Detect contact
let onSurface = obj.y + radius >= platform.y;