Within — Preposition Programming

Fig. 1 Container bounds — the center lies inside the rectangle

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

WITHIN means inside the boundaries of something else. Test whether a point—usually the object's center—sits inside the container edges.

Translation strategy

Ways to express within in a sketch:

Boundary test: Compare X and Y against container edges
Center vs full shape: Choose whether the center or entire bounds must fit
Feedback: Change label or emphasis when containment is true

Key p5.js methods

Key methods

Canvas coordinates
• createCanvas() — origin (0, 0) is top-left
• Y increases downward; X increases to the right

Containment
• rect() — draw the container
• && — all four edge tests must pass

Pointer input
• mousePressed(), mouseDragged(), mouseReleased() — drag objects
• dist() — test whether the pointer is inside a circle

Code pattern

Code pattern

1. Define the container
let box = { x: 100, y: 80, w: 200, h: 140 };

2. Test the center point
function isWithin(obj, box) {
return obj.x >= box.x && obj.x <= box.x + box.w &&
obj.y >= box.y && obj.y <= box.y + box.h;
}

3. Update feedback
let inside = isWithin(circle, box);

4. Hit-test for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < circle.r) circle.dragging = true;