Drawing in a rectangle, p5.js - p5.js

Question

So I'm working in p5.js and my task is when i press my mouse down it needs to draw circles and I've got that working. But the extra thing is that this only can happen in a certain rectangle and I'm a bit lost, does anyone know how I can achieve this?
function setup() {
createCanvas(400, 400);
}
var circles = [];
function draw() {
background(220);
rect(100, 100, 200, 200)
var index = 0;
while(index < circles.length) {
ellipse(circles[index].x, circles[index].y, circles[index].d);
index += 1;
}
if (mouseIsPressed) {
// add a circle where the mouse is
// not this: ellipse(mouseX, mouseY, 10);
circles[circles.length] = { x: mouseX, y: mouseY, d: 30 };
}
}
This is what it needs to look like:
enter image description here

Answer 1

For now your code generates a circle when the mouse is pressed no matter where the mouse is on the screen. What you want is to generate the new circle only when your mouse is in your rectangle, so this is only a matter of adding a condition to make sure your mouse is not outside of the rectangle.
To make this test you first need to know what are the boundaries of your rectangle. You created it with rect(100, 100, 200, 200) which means the top left corner is on position x:100, y:100 and it's width and length are 200 so its bottom right corner is on position x:(100+200)=300, y:(100+200)=300.
So you want to create your circles only is 100 < mouseX < 300 and 100 < mouseY < 300 you would write it this way:
Do to so you code would be changed to this:
if (mouseIsPressed && mouseX > 100 && mouseX < 300 && mouseY > 100 && mouseY < 300 ) {
// add a circle where the mouse is
circles[circles.length] = { x: mouseX, y: mouseY, d: 30 };
}
Now when you click outside of the rectangle no circle is added.
Note that since the circle is centered on the position of the click, your circles (which are of radius 30/2=15) will be drawn out of the rectangle if you click too close from the border of the rectangle.
So maybe you'd rather want a condition like this:
if (mouseIsPressed && mouseX > 100+15 && mouseX < 300-15 && mouseY > 100+15 && mouseY < 300-15 ) {
You can see it working here
Also it would be better to have all these measures (the rectangle position, its width and height, the circle diameter) in variables so that you don't have to hard code the different values, but you'll be able to do that later on when your program works properly.