Into — Preposition Programming

Fig. 1 Entry arc — transition from outside the container to inside

Try it — drag, click, or tap inside the figure.

Open in p5 Web Editor Fork and experiment with this sketch

Concept

INTO means entering a space—from outside to inside. The sketch uses an arc path that crosses the container boundary.

Translation strategy

Ways to express into in a sketch:

Entry path: Animate along a curve toward an interior point
Containment test: Switch state when the object crosses the boundary
Layering: Draw the mover behind a semi-transparent container if needed

Key p5.js methods

Key methods

Motion
• lerp() plus sin() for arc height

Boundary
• Rectangle bounds test for inside/outside
• rect() with alpha for the container

Pointer input
• mousePressed() — start motion or set a target
• mouseX, mouseY — click position

Code pattern

Code pattern

1. Define container and endpoints
let box = { x: 280, y: 150, w: 100, h: 80 };
let start = { x: 80, y: 200 }, end = { x: 320, y: 190 };

2. Move along an arc
let x = lerp(start.x, end.x, t);
let y = lerp(start.y, end.y, t) - sin(t * PI) * arcH;

3. Test inside
let inside = x > box.x && x < box.x + box.w &&
y > box.y && y < box.y + box.h;

4. Draw back-to-front
ellipse(x, y, d, d); rect(box.x, box.y, box.w, box.h);