Open this sketch in P5 Web Editor →
Try It
Click anywhere in the canvas to move the yellow circle. Watch how it turns green when it's positioned among the blue circles, and see how nearby circles light up to show the relationships.
Concept
AMONG means positioned within a group of three or more things. Unlike "between" which involves two reference points, "among" requires being surrounded by or mixed with multiple elements.
Translation Strategy
To create "among" relationships on screen:
- Distance-based: Check if an element is within a certain distance of multiple other elements
- Boundary-based: Calculate if an element falls within the bounds of a group
- Center-proximity: Check if element is near the center of a group
Key P5.js Methods
Coordinate System:
•
createCanvas(width, height) - Creates coordinate system where (0,0) is top-left
• Group positioning requires tracking multiple coordinates
Distance Calculations:
•
dist(x1, y1, x2, y2) - Calculate distance between points
• Array methods for checking multiple distances
Drawing Elements:
•
ellipse(x, y, width, height) - Draw circles at specific positions
•
stroke() and
fill() - Style elements differently
Group Analysis:
• Calculate center point of group
• Determine group boundaries
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 "Among":
1. Create group: Define multiple reference elements
let group = [{x: 100, y: 100}, {x: 200, y: 120}, {x: 150, y: 180}];
2. Calculate group center: Find average position
let centerX = group.reduce((sum, p) => sum + p.x, 0) / group.length;
3. Check if among: Test proximity to group
let distToCenter = dist(element.x, element.y, centerX, centerY);
let isAmong = distToCenter < groupRadius;
4. For mouse interaction: Use mouse events for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < radius) {
circle.dragging = true; }