Beside — Preposition Programming

Fig. 1 Adjacent zones — the center point must fall beside the reference

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

BESIDE means next to something, usually to the left or right. Here, the mover's center must fall inside a rectangular zone adjacent to the reference object.

Translation strategy

Ways to express beside in a sketch:

Adjacent zones: Define rectangles to the left and right of a reference
Center test: Use the object's center, not its edge, for containment
Feedback: Change stroke or label when the zone test passes

Key p5.js methods

Key methods

Canvas coordinates
• createCanvas() — origin (0, 0) is top-left
• Y increases downward; X increases to the right

Zone test
• Compare X and Y against left, right, top, bottom
• rect() — draw zones and reference shape

Drawing
• line() — crosshairs at the center point

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

Code pattern

Code pattern

1. Define zones beside the reference
let leftZone = { x: ref.x - gap - w, y: ref.y, w, h };

2. Test the center point
function inZone(px, py, z) {
  return px >= z.x && px <= z.x + z.w &&
         py >= z.y && py <= z.y + z.h;
}

3. Report beside
let beside = inZone(mover.x, mover.y, leftZone) ||
  inZone(mover.x, mover.y, rightZone);

4. Hit-test for dragging
if (dist(mouseX, mouseY, mover.x, mover.y) < mover.r) dragging = true;