How do i make doubleClicked() run without call existing mousePressed()? (p5.js)

p5.js Coding Questions
1

Hello everybody,
So i have a problem to call doubleClicked() function without calling existing mousePressed() function.
Can please anyone give me a trick for that one?
Thanks!!

2

Welcome to the forums!

Can you be more specific about the behavior you’re looking for?

1 Like
3

Show your entire code please and the assignment

4

sure, and thanks for the fast response!
here is the exemple ( code below ):
https://editor.p5js.org/royjan/present/-wYWjmMaO

So i wanted to create a rectangle that switch colors randomly when i press it, it needs to start blinking when it double clicked and back to changing colors when solo pressed again.

you can see that when you double click on it it first changes its color (because of the mousePressed()) and just after that starts to blink.
i want it to start blinking when double clicked without switching color first.

let double = false;
let time;
let count = 0;

function setup() {
	createCanvas(400, 400);
	rectangle = new Rectangle(width/2 , height/2);

}

function draw() {
	background(255);
	rectangle.show();
	rectangle.mouseOn();
	rectangle.flicker(double);
}

function doubleClicked() {
	double = true;
}

function mousePressed() {
	rectangle.pressed();
	double = false;
}

function checkcount() {

}



function Rectangle(x, y) {
	this.x = x;
	this.y = y;
	this.r = random(0, 255);
	this.g = random(0, 255);
	this.b = random(0, 255);
	this.mouseon = false;
	this.blink = 1;
	this.gamma = 255;

	this.show = function() {
		fill(this.r, this.g, this.b, this.gamma);
		rect(this.x, this.y, 150, 200);
	}

	this.mouseOn = function() {
		if (mouseX > width / 2 && mouseX < width / 2 + 150
			&& mouseY > height / 2 && mouseY < height / 2 +200) {
			this.mouseon = true;
			fill(50,50);
		    rect(this.x, this.y, 150,  200);
		} else {
			this.mouseon = false;
		}
	}

	this.pressed = function() {
		if (this.mouseon ===true) {
		console.log('mouse pressed!')
		this.r = random(0, 255);
	    this.g = random(0, 255);
	    this.b = random(0, 255);
	    var double = false;
	}
	}

	this.flicker = function(double) {
		if(double === true){
			this.blink = this.blink + 1;
			if (this.blink % 10 === 0){ 
				this.gamma = 0;
		} else {
			    this.gamma = 255;
		}
		}	
	
	}

}
1 Like
5

the mousePressed() is always going to be called … you could use a setTimeout() to check if doubleClicked() has been invoked.

function doubleClicked() {
  double = true;
}

function mousePressed() {
  setTimeout(_=> { double ? null : rectangle.pressed() },  300);
  double = false;
}
3 Likes
6

Thank you so much! I will try that!