Concept
BETWEEN means positioned in the space that separates two other things. This requires checking if an element's coordinates fall within the range defined by two other elements.
Translation Strategy
To create "between" relationships on screen:
- Horizontal Between: Check if X coordinate is between two other X coordinates
- Vertical Between: Check if Y coordinate is between two other Y coordinates
- Both Axes: Element must be between in both X and Y to be truly "between"
Key P5.js Methods
Coordinate System:
•
createCanvas(width, height) - Creates coordinate system where (0,0) is top-left
• Both X and Y coordinates matter for "between"
Position Comparison:
•
elementA.x < elementC.x && elementC.x < elementB.x - Check if C is between A and B horizontally
•
&& - Logical AND operator for compound conditions
Drawing Elements:
•
ellipse(x, y, width, height) - Draw circles at specific positions
•
line(x1, y1, x2, y2) - Draw connection lines
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 "Between":
1. Store positions: Keep track of three element coordinates
let elementA = {x: 100, y: 150};
let elementB = {x: 300, y: 150};
let elementC = {x: 200, y: 150};
2. Calculate range: Determine left and right boundaries using if statements
if (elementA.x < elementB.x) { leftBoundary = elementA.x; }
3. Check if between: Test if coordinates fall within range using compound && statement
let isBetween = (elementC.x > leftBoundary && elementC.x < rightBoundary);
4. For mouse interaction: Use mouse events for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < radius) {
circle.dragging = true; }