Open this sketch in P5 Web Editor →

Try It

Drag the orange rectangle in the canvas below. It must be fully within the beneath zone (under the blue surface) to register as "beneath". Notice the arrows showing the beneath direction.

Concept

BENEATH means positioned under something, often with the implication of being covered or hidden. While similar to "below," beneath suggests a closer, more intimate spatial relationship.

Translation Strategy

To create "beneath" relationships on screen:

Key P5.js Methods

Zone Definition:
• Define beneath zone boundaries using surface position and height
• let zoneY = surfaceObject.y + surfaceObject.height;
• let zoneHeight = 60;

Full Containment Check:
• Check if object is completely within the zone
• object.y >= zoneY && object.y + object.height <= zoneY + zoneHeight
• object.x >= surface.x && object.x + object.width <= surface.x + surface.width

Visual Feedback:
• rect(x, y, width, height) - Draw zone background and objects
• line(x1, y1, x2, y2) - Draw directional arrows
• fill(r, g, b, alpha) - Zone color changes based on state

Mouse Interaction:
• mousePressed() - Detect when mouse is clicked
• mouseDragged() - Detect when mouse is dragged
• constrain(value, min, max) - Keep objects within canvas bounds

Code Structure

Simplified "Beneath" Pattern:

1. Define surface and object: Simple rectangular objects
let surfaceObject = {x: 50, y: 100, width: 300, height: 10};
let beneathObject = {x: 170, y: 30, width: 60, height: 40};

2. Define beneath zone: Area where "beneath" applies
let zoneY = surfaceObject.y + surfaceObject.height;
let zoneHeight = 60;

3. Check full containment: Object must be completely in zone
let isFullyBeneath = (beneathObject.y >= zoneY &&
  beneathObject.y + beneathObject.height <= zoneY + zoneHeight &&
  beneathObject.x >= surfaceObject.x &&
  beneathObject.x + beneathObject.width <= surfaceObject.x + surfaceObject.width);

4. Visual feedback: Show zone and provide arrows
rect(surfaceObject.x, zoneY, surfaceObject.width, zoneHeight); // Zone
line(x, surfaceY, x, zoneY + 25); // Arrow lines