Hi there, from my understanding is that code within the mousePressed() function will be triggered when mouse is pressed down.however, what I was trying to do was draw a circle at a point on canvas when mouse is being pressed. but nothing happened. if i put the background(100). the background color would be re-painted as intended. can someone tell me why?
function mousePressed(){
circle(500,500,20);
}
When you use background() at the beginning of draw() - which runs 60 times per second - the circle drawn in mousePressed() gets deleted immediately
There are several different ways to solve this :
You could delete the background line
You could set a global boolean variable mouseHasBeenPressed to true in mousePressed() and then check it with if() in draw() and paint the circle there if the condition is met. Using the variable makes the decision in mousePressed() permanent.
Chrisir
thank you very much. it worked.
when dealing with p5.js, note that everything on the canvas is redraw every intended milliseconds or seconds. for example. you can call frame rate(or frame draw or setTimeout) every time you want a new frame to be drawn. that determines the rate at which your program is displayed to the end user.
now for your problem you are having,the background simply redraws itself so don’t expect it to work. the best thing is to add a counter or a boolean instance.
eg.
let us use the less glitchy way of approaching your problem. that is the counter.
int showCirle = 0;
if(mousePressed){
showCircle=1;
//nested loop
if(showCircle>1){
showCircle=0;}
}
//now the above function is to make sure this falls back to zero when showCircle has past one
//now for the real deal
if(showCircle==1){
fill(255,0,0);//red
eclipse(500,500,20);//or use ur own circle(500,500,20); assuming its an object you made.
}
this should work just fine. why don’t you check it out and see for yourself.
Did you maybe mean
+=
?
no,i mean 1. it is like an on and off switch
You wrote:
showCircle=1; // OR +=1; ???
//nested loop
if(showCircle>1){
But without the + sign the if clause with > will never become true.
Or am I missing something?
Regards, Chrisir
Thanks for suggesting a counter approach.
If you want to suggest untested code, please mark it “untested!” when you post it. You declare showCirle and then reference showCircle, so it seems clear that this code was never run…
I’d recommend posting actual working short sketches, rather than a series of code fragments that need to be assembled in a particular way in order to work. If you must post code fragments, please break them into separate blocks so that is clear, like
this goes in setup:
// foo
this goes in draw:
// bar
omg.
my program doesnt need the + sign. its up to you. what i did was,if you press the mouse.the circle will show. else it will not. but if you want it to show “onclick” here.
int showCirle = 0;
//draw
if(mousePressed){
showCircle=showCirle+1;
//nested loop
if(showCircle>1){
showCircle=0;}
}
//now the above function is to make sure this falls back to zero when showCircle has past one
//now for the real deal
//draw
if(showCircle==1){
fill(255,0,0);//red
ellipse(500,500,20);//or use ur own circle(500,500,20); assuming its an object you made.
}
showCircle cannot be resolved to a variable
As I said above, please don’t post broken code like this – especially in Beginners threads.
You are also posting p5 Java answers on a p5.js question thread – you can do that, but again please mark it to not confuse people.
i give up. hope you have gotten your answer. bye