New to P5 - basic object question

p5.js Coding Questions
1

Hi, I’ve just discovered P5 today, I have some coding experience, however it is mainly theoretical/following along. Now I’m trying to make it on my own!

Okay, so I have drawn a basic background with a couple of ellipses in it. I am trying to get it so that every time I press my mouse over one of the ellipses, I leave behind a small ‘pebble’.

I have got it so that my mouse changes colour, however it does not leave an object behind when I click. My code is below, I’m pretty sure I shouldn’t be using if/else statements, so please point me in the right direction.

Thanks

function setup() {
  let canvas = createCanvas(600, 400);
	canvas.position(300, 50);

}

function draw() {
	background(0, 128, 0);

	fill (128, 128, 128);
	ellipse(width/2, height/4, 100, 100);
	ellipse(width/7, height/4, 100, 100);
	
	if (mouseIsPressed) {
		fill(0);
		
	} else {
		fill(255);
	}
	
	ellipse(mouseX, mouseY, 25, 25);
}
1 Like
2

you can delete background, then the points will stay permanently

you can use something like

if(dist(mouseX,mouseY, width/2, height/4) < 45) {
    ellipse(mouseX, mouseY, 25, 25);
}

to judge whether mouse was clicked in the right place. You only want to draw the ellipse in this case!

4 Likes
3

CrHallberg.com/CollisionDetection/Website/point-circle.html

4 Likes
4

Many, many, many thanks!

1 Like