Open this sketch in P5 Web Editor →

Try It

Drag the yellow circle in the canvas below. Watch how it changes color when its center point enters the blue "beside" zones. Notice the crosshairs showing the exact center point and coordinates being tracked.

Concept

BESIDE means positioned next to something, typically to the left or right. In this example, "beside" is determined by checking if an object's center point falls within defined rectangular zones adjacent to the main object.

Translation Strategy

To create "beside" relationships on screen:

Key P5.js Methods

Coordinate System:
• createCanvas(width, height) - Creates coordinate system where (0,0) is top-left
• X coordinates: 0 = left, width = right

Position Comparison:
• if (x < leftBound) { return false; } - Check if X coordinate is too far left
• if (x > rightBound) { return false; } - Check if X coordinate is too far right
• if (y < topBound) { return false; } - Check if Y coordinate is too high
• if (y > bottomBound) { return false; } - Check if Y coordinate is too low

Drawing Elements:
• ellipse(x, y, width, height) - Draw circles at specific positions
• line(x1, y1, x2, y2) - Draw alignment guides

Collision Detection:
• dist(x1, y1, x2, y2) - Calculate distance between points for collision detection

Mouse Interaction:
• mousePressed() - Detect when mouse is clicked
• mouseDragged() - Detect when mouse is dragged
• mouseReleased() - Detect when mouse is released

Code Structure

Basic Pattern for "Beside":

1. Define beside zones: Create rectangular areas adjacent to the main object
let leftZoneX = mainObject.x - mainObject.width/2 - zoneWidth/2;
let rightZoneX = mainObject.x + mainObject.width/2 + zoneWidth/2;

2. Calculate zone boundaries: Determine the bounds of each zone
let leftBound = leftZoneX - zoneWidth/2;
let rightBound = leftZoneX + zoneWidth/2;

3. Check if object is in zone: Test each boundary separately
if (x < leftBound) { return false; }
if (x > rightBound) { return false; }
if (y < topBound) { return false; }
if (y > bottomBound) { return false; }
return true; // Point is inside zone

4. For mouse interaction: Use mouse events for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < radius) {
  circle.dragging = true; }