mousePressed() gets run before draw()?

[jeffThompson]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0 (I think! Whatever the online editor is using)

Web browser and version

Firefox 117.0.1

Operating System

Mac, Ventura 13.3.1

Steps to reproduce this

Steps:

1. Create a project that draws shapes in mousePressed()
2. Shapes are drawn first, then background() covers them up

Snippet:

function setup() {
  createCanvas(windowWidth, windowHeight);                 
}                  
function draw() { 
  background(220);
}

// Intuitively, I would expect this to be drawn onscreen!
function mouseDragged() {
  fill(0,150,255);
  noStroke();
  circle(mouseX, mouseY, 40);
}

Ok maybe this is the desired behavior or I'm being really dumb here, in which case please close this!

It appears that mouseDragged() gets called before draw(), meaning you can't draw shapes in the function. Intuitively it feels like this would be a good way to draw shapes when the mouse is pressed/moving and I feel like I've done this a lot in the past? We also see this in lots of examples, including the mouseDragged() reference page (second example).

Every so often the shape pops up, but it seems that background() is immediately drawing over it. Not sure if this is the intended behavior or it there's a workaround!

[wong-justin]

Hey Jeff,

Looks like things are working as intended. draw() will happen every frame, which in your example means the whole canvas turns gray 60 times per second. Whatever happened to be drawn between those frames, like from mouseDragged(), will be overwritten (see slowed down example: https://editor.p5js.org/jwong/sketches/1w45kWkHs)

One way to accomplish what you want is to store state in a variable, so mouseDragged() can set it and draw() can get it. (example: https://editor.p5js.org/jwong/sketches/YqhvxD_i1)

I agree though that the second example in the reference is misleading - if you want to draw shapes in mouseDragged(), you'd have to avoid using draw(). (example: https://editor.p5js.org/jwong/sketches/rcJWOgEmC)

[jeffThompson]

Thanks @wong-justin for your thoughtful reply! Seems like there are some bifurcating things here, but the most important probably being that the example in the reference confuses how this works. I'm going to close this, since it does seem to be the expected behavior.

I do wonder if maybe there is a way to manually call mouseDragged() in draw()? It feels confusing that mouseDragged() can really only be used for setting variables. Maybe a mouseIsDragged variable like mouseIsPressed would be useful, but also a feature request and not a bug :)