Open this sketch in P5 Web Editor →

Try It

Click to watch the circle move in an arc into the semi-transparent box. Notice how the circle appears behind the box as it enters.

Concept

INTO means moving from outside to inside something, entering or penetrating a space, container, or boundary. This side-view demonstration shows a circle moving in an arc path into a semi-transparent box, emphasizing the transition from external to internal position.

Translation Strategy

To create "into" relationships on screen:

Key P5.js Methods

Arc Movement:
• sin() - Create smooth arc motion
• lerp(start, stop, amount) - Smooth horizontal interpolation
• Combined sine and linear movement for arc paths

Boundary Detection:
• Simple rectangle bounds checking: x > boxX && x < boxX + boxWidth
• fill() with alpha transparency for containers

Drawing Order:
• Draw moving objects BEFORE containers for visual depth
• rect() with transparency for see-through containers
• ellipse() for moving objects and path guides

Animation Control:
• Progress tracking from 0 to 1 for smooth animation
• Speed control with incremental progress updates

Mouse Interaction:
• mousePressed() - Start or restart entry animation
• Touch support for mobile devices

Code Structure

Basic Pattern for "Into" with Arc Movement:

1. Define container and positions: Set up box and start/end points
let boxX = 280, boxY = 150, boxWidth = 100, boxHeight = 80;
let startX = 80, startY = 200; // Outside the box
let targetX = 320, targetY = 190; // Inside the box

2. Create arc movement: Combine linear and sine motion
circleX = lerp(startX, targetX, progress);
let straightY = lerp(startY, targetY, progress);
let arcOffset = sin(progress * PI) * arcHeight;
circleY = straightY - arcOffset;

3. Check containment: Simple rectangle bounds
let isInside = circleX > boxX && circleX < boxX + boxWidth &&
                circleY > boxY && circleY < boxY + boxHeight;

4. Draw with proper layering: Circle first, then transparent box
ellipse(circleX, circleY, circleSize, circleSize); // Circle behind
fill(200, 200, 200, 150); // Semi-transparent box
rect(boxX, boxY, boxWidth, boxHeight); // Box in front