Adding objects to the canvas fom within the mousePressed() method

Processing Beginners
1

I’m trying to create a sketch where after setup the canvas is only changed when the user adds some geometrical objects by pressing the mouse. So it seems inappropriate to me to even implement the draw() method. To my understanding, the proper way to achieve this would be like so:

void setup(){
    size(400, 400);
    background(0,0,0);
  
}

void mousePressed() {
     ellipse(mouseX, mouseY, 10, 10);
}

What I’m trying to achieve with this is adding a circle to the canvas whenever the mouse is beeing pressed. Apparently my understanding is wrong, because nothing to that effect happens, and I’m left wondering what would be the right way to do it. I apologize for such a lack of understanding and such a basic question, but the introductory material only seems to address cases where the use of the draw() method seems appropriate. But as I’ve explained above, I don’t think this would be the right way to go about in this case.

1 Like
2

Hello,

Read these references:
https://processing.org/reference/draw_.html
https://processing.org/reference/setup_.html
https://processing.org/reference/mousePressed_.html
https://processing.org/reference/mousePressed.html

Tutorial:
https://processing.org/tutorials/interactivity/

:)

1 Like
3

draw() must exist if you want the code to run continuously, or to process events such as mousePressed() . Sometimes, you might have an empty call to draw() in your program

1 Like
4

draw is you friend ! even if you do nothing, you need it.

right now you “setup” your display and make it black. after that nothing can happen, because draw does not run. even when you leave it empty and use the rest of your code “as is”, you will see it works.
“real” programmers will probably stone me for saying this, but it does not matter (most of the time) where your code is written to. at least for your purpose, to get more intimate with processing :wink:

saying:

void setup() {
  size(400, 400);
}
void draw() {
  background(0, 0, 0);
  ellipse(mouseX, mouseY, 10, 10);
}
void drawAnEllipse () {
}

is the same as:

void setup() {
  size(400, 400);
}
void draw() {
  background(0, 0, 0);  
  drawAnEllipse();
}
void drawAnEllipse() {
  ellipse(mouseX, mouseY, 10, 10);
}

think of the method as a roadsign where your code makes a little detour :wink:

it is not inappropriate to use draw ! one of the good reasons to use a method is to keep your code understandable for… yourself. if you have really a lot of lines, it makes sense to break your code down into different parts and put them into methods which you then call from inside draw.

it is not so dissimilar to why people invented for-loops (somewhere back in the stoneage I think…).

instead of writing “ellipse (x,y,10,10);” 100 times, writing down different x,y values for different positions,
it is (in part) better to write:

for (int i=0;i<100;i++) {
ellipse (x,y,10,10);
}

now you could even do uncanny stuff like having a formula for x, every round… or x and y.

for (int i=0;i<100;i++) {
ellipse (x,y,10,10);
x = random (0,100);
y = random (0,100);
}

mousePressed () is “special” because, similar to draw(), it runs all the time. (like mouseReleased() and others. mouseX and mouseY are also update every frame when your code runs.

yet draw() is the thing that… well, draws to the display, makes sure that the code is executed repeatedly.

4 Likes
5

You have an unexpected token in your example:

image
image598×560 24.7 KB

:)

1 Like
6

haha oops, yes, that comes from copy paste :slight_smile: I correct it

1 Like
7

Your post is extracted from this reference:
https://processing.org/reference/draw_.html

It is good etiquette to show the source of a quote.
There is a lot more context and details in the reference.

:)

8

Thank you, this is most helpfull! :slight_smile:

2 Likes
9

Thank you all for your help! Many of your responses would deserve it to be labeled as “solution”. But it can only be done once per question.

2 Likes