Concept
ONTO means moving to a position on the surface or top of something. This implies landing on, climbing on, or being placed on top of another object.
Translation Strategy
To create "onto" relationships on screen:
- Surface Contact: Position objects so they rest on the surface of other objects
- Vertical Landing: Show movement that ends with contact on the top surface
- Support Relationship: The object "onto" should appear supported by the surface
Key P5.js Methods
Position Calculation:
• Calculate surface positions:
objectY = surfaceY - objectRadius
• Account for object size when positioning on surfaces
Collision Detection:
• Detect when objects reach surface level
•
dist(x1, y1, x2, y2) - Check proximity to landing surface
Drawing Elements:
•
rect(x, y, width, height) - Draw platforms and surfaces
•
ellipse(x, y, width, height) - Draw objects that land onto surfaces
Animation:
•
lerp(start, stop, amount) - Smooth landing animation
• Gravity simulation for realistic landing motion
Visual Effects:
• Shadow effects to show contact with surface
• Bounce or settling animation on landing
Mouse Interaction:
•
mousePressed() - Trigger landing animation
• Button controls for repeated demonstrations
Code Structure
Basic Pattern for "Onto":
1. Define surface and starting position: Set up platform and initial location
let platform = {x: 200, y: 200, width: 120, height: 20};
let startPoint = {x: 100, y: 50};
let landingPoint = {x: 200, y: platform.y - objectRadius};
2. Calculate landing position: Position on surface
let surfaceY = platform.y;
let ontoY = surfaceY - movingObject.radius; // Sit on top
3. Animate landing: Move to surface position
if (isLanding && progress < 1) {
progress += speed;
object.x = lerp(startPoint.x, landingPoint.x, progress);
object.y = lerp(startPoint.y, landingPoint.y, progress);
}
4. Detect landing completion: Check surface contact
let isOnSurface = (object.y + object.radius >= platform.y);
if (isOnSurface) { hasLanded = true; }