The following sketch sets up my question https://editor.p5js.org/cottonchipper/sketches/f7yKwh53v
background(220); fill('red'); rect(0,0,200,200); rect(200,200,200,200); fill('white'); const y = (400)/2 + sin(frameCount * 0.05) * 100; ellipse(100, 100, y, y);
It creates an ellipse that expands and contracts inside a rectangle drawn on the canvas.
My question is whether there is a way to make the edges of the ellipse flatten when they reach the edges of the rectangle, instead of overlapping onto the neighboring rectangle.
In this example, the rectangle and ellipse are in the corner of the canvas, but I would want to do the same in any area of the canvas. Essentially, I want to create a grid and move shapes within the cells, but not allow any part of a moving shape to be visible in a neighboring cell.