mouseClicked(), mousePressed()... keyPressed(), keyReleased()... are they parallel?

p5.js Beginners
1

Hello,

My question is When are theses functions processed / what is in draw() ?

(is it the same thing in Processing ?)

Is there some sort of parallelism (multiple threads) or not ? (I guess not)

I wonder !

thank you

:slight_smile:

1 Like
2

Hello @EricRogerGarcia ,

“Wonder is the beginning of wisdom.” - Socrates

let events = []; // list of everything that happened (keeps growing)

function setup() {
  createCanvas(400, 600);
}

function draw() {
  background(245);
}

function logEvent(msg) {
  // when an event happens, record frame + time + message
  let f = frameCount;      // which frame we are on
  let t = floor(millis()); // milliseconds since the sketch started

  events.push({ f: f, t: t, msg: msg }); // store it in the array
  console.log("[f " + f + "] [" + t + "ms] " + msg); // print to console
}

// these run automatically when you click or press keys
function mousePressed() { logEvent("mousePressed"); }
function mouseClicked() { logEvent("mouseClicked"); }
function keyPressed()   { logEvent("keyPressed: " + key); }
function keyReleased()  { logEvent("keyReleased: " + key); }

I have yet to scrutinize the output!
I did not give the references a thorough read… yet!

Often I will write code first to examine the behavior.

Have fun!

:)

3

:)) thanks :))

… but that doesn’t answer my question at all lol

What I would like to know is, when it happens compared to what happens in draw(): before draw(); after draw(), in parallel on another thread … in a given frame (but I may have expressed myself poorly: I understand English but when it comes to nuances, I inevitably make mistakes at times!).

I need to know for my code because depending on what is happening in draw(), the objects that are calculating or being displayed, they should not receive signals from the Observer pattern at any time which are sent at the initiative of these functions (if there were several threads for example)

:slight_smile:

PS. I’ve just downloaded 4.5.2. processing version, the new interface is great !

4

Thanks for raising this, it’s an interesting question.

If you’re curious about the internals of Processing or p5.js, the best way to really understand it is to look at the source code. That’s one of the nice things about open source; you can see exactly how things are implemented.

Both projects are on GitHub, so you can browse the code online with the built-in search, or clone the repo locally and explore it with your preferred tools.

1 Like
5

Javascript runs in a single thread so all event handling and drawing are processed synchronously i.e. one after another. It means the mouseClicked event-handler would never be called while the draw function is executing.

In p5js the draw function is invoked approximately every 17ms (60 fps) but between frames many events might have been detected, these are placed on a FIFO (first-in-first-out) queue and wait to be processed between calls to draw. So there is no real concept of ‘before’ and 'after ’ draw rather what happens between draws

Javascript does have limited support for asynchronous processing
1: Promises: primarily used for fetching resources e.g. images
2: Web workers: which are useful for long complex computations and are executed in their own threads

4 Likes
6

Hi @EricRogerGarcia , good question. Thanks for your answers too @glv @sableraph (edited: also @quark)! I’ll try to add to the answer for p5.js.

As you guessed, there are not multiple threads in JavaScript, but it has an event loop with a queue:

  • Queue (of jobs): this is known in HTML (and also commonly) as the event loop which enables asynchronous programming in JavaScript while being single-threaded. It’s called a queue because it’s generally first-in-first-out: earlier jobs are executed before later ones.

From mdn docs on JS execution model

Here’s the p5.js 2.0 code which connects p5.js logic to JavaScript events: p5.js/src/events/keyboard.js at dev-2.0 · processing/p5.js · GitHub using addEventListener()

To your question of how this relates to draw():

  • draw loop is part of p5.js execution model
  • event loop is part of JavaScript execution model, runs continuously, and processing keyboard/mouse events “takes turns” with other tasks like p5.js draw loop (edit: @quark’s answer above is a better description of this)
  • because JavaScript handles the events, although it’s a single thread, it is managed outside of both the sketch and the p5.js library

I hope this is helpful!
Best,
Kit

4 Likes
8

Thanks @kit!

Adding to this, back when I was trying to understand the event loop, I found this video by Namaste JavaScript particularly helpful.

Raphaël

4 Likes
9
  • Just a small pedantic correction: Promises don’t use threads but the event loop.
  • Thus promises’ execution have to await other enqueued functions as well!
  • However, web workers and their event loop are true threads.
  • And they run their code in parallel to our main code thread.
  • Although not required, browsers can place an <iframe> on their own thread.
5 Likes
10

Well spotted I have corrected my post :smile:

5 Likes
11

Namaste Javascript is really great ! Very very interesting !!! thanks !