Concept
AWAY means moving in the opposite direction from something, creating distance from a source point. This involves calculating direction vectors and moving an object farther from a reference point over time.
Translation Strategy
To create "away" relationships on screen:
- Inverse Vector Calculation: Calculate the direction from source to object, then move in the opposite direction
- Gradual Movement: Move in small steps away from the source rather than jumping immediately
- Distance Tracking: Monitor how far the object gets from its source
- Boundary Handling: Consider what happens when objects reach screen edges
Key P5.js Methods
Vector Mathematics:
• Calculate direction:
dx = currentX - sourceX,
dy = currentY - sourceY
•
atan2(dy, dx) - Calculate angle away from source
•
cos(angle) and
sin(angle) - Convert angle to movement
Distance and Movement:
•
dist(x1, y1, x2, y2) - Calculate distance from source
•
constrain(value, min, max) - Keep objects within canvas bounds
Drawing Elements:
•
ellipse(x, y, width, height) - Draw moving objects
•
line(x1, y1, x2, y2) - Draw direction indicators
•
Custom arrow drawing - Show direction visually
Animation:
• Update position each frame in
draw() function
• Use speed variables to control movement rate
• Implement deceleration as distance increases
Mouse Interaction:
•
mousePressed() - Set new source point when mouse is clicked
•
mouseX and
mouseY - Get source coordinates
Code Structure
Basic Pattern for "Away":
1. Define moving object and source: Set up initial positions
let movingObject = {x: 200, y: 150, speed: 2};
let source = {x: 100, y: 100};
2. Calculate direction away: Find vector opposite to source
let dx = movingObject.x - source.x;
let dy = movingObject.y - source.y;
let distance = dist(movingObject.x, movingObject.y, source.x, source.y);
3. Move away from source: Update position each frame
if (distance > 0) {
let moveX = (dx / distance) * movingObject.speed;
let moveY = (dy / distance) * movingObject.speed;
movingObject.x += moveX;
movingObject.y += moveY;
}
4. Handle boundaries: Keep object within screen or implement wrapping
movingObject.x = constrain(movingObject.x, 0, width);