Beneath — Preposition Programming

Fig. 1 Containment zone — the object must sit fully beneath the surface

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

BENEATH means under something, often covered by it. Like below, but usually closer—and this sketch requires full containment inside a beneath zone.

Translation strategy

Ways to express beneath in a sketch:

Defined zone: Mark the strip directly under a surface
Full containment: Require the whole object to fit inside the zone
Direction cues: Arrows or leaders show the beneath direction

Key p5.js methods

Key methods

Zone setup
• zoneY = surface.y + surface.height

Containment
• Test all four edges of the object against the zone
• rect(), line() — surface, zone, arrows

Pointer input
• mousePressed(), mouseDragged(), mouseReleased() — drag objects
• dist() — test whether the pointer is inside a circle

Code pattern

Code pattern

1. Define surface and mover
let surface = { x: 50, y: 100, w: 300, h: 10 };
let mover = { x: 170, y: 130, w: 60, h: 40 };

2. Define the beneath zone
let zoneY = surface.y + surface.h;
let zoneH = 60;

3. Test full containment
let beneath = mover.y >= zoneY &&
  mover.y + mover.h <= zoneY + zoneH &&
  mover.x >= surface.x &&
  mover.x + mover.w <= surface.x + surface.w;

4. Draw zone feedback
rect(surface.x, zoneY, surface.w, zoneH);