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

**URL:** <https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898>\
**Category:** Beginners\
**Created:** [February 16, 2026, 9:38pm UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898 "2026-02-16T21:38:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [February 16, 2026, 9:38pm UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/1 "2026-02-16T21:38:21Z")

</div>

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

🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 16, 2026, 11:39pm UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/2 "2026-02-16T23:39:29Z")

</div>

Hello @EricRogerGarcia ,

> [@EricRogerGarcia](#):
>
> I wonder !

“Wonder is the beginning of wisdom.” - Socrates

```processing
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!

`:)`

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [February 17, 2026, 4:11am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/3 "2026-02-17T04:11:30Z")

</div>

:)) 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)

🙂

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

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [February 17, 2026, 8:08am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/4 "2026-02-17T08:08:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 17, 2026, 10:26am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/5 "2026-02-17T10:26:58Z")

</div>

> [@EricRogerGarcia](#):
>
> 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

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 `draw`s

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

---

<div class="post-metadata">

**Author:** ![kit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kit/32/20478_2.png) [@kit](https://discourse.processing.org/u/kit)\
**Post date:** [February 17, 2026, 10:38am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/6 "2026-02-17T10:38:06Z")

</div>

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)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model#job_queue_and_event_loop): 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/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](https://github.com/processing/p5.js/blob/dev-2.0/src/events/keyboard.js#L33) using [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/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

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [February 17, 2026, 11:06am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/8 "2026-02-17T11:06:21Z")

</div>

Thanks @kit!

Adding to this, back when I was trying to understand the event loop, I found [this video by Namaste JavaScript](https://www.youtube.com/watch?v=8zKuNo4ay8E) particularly helpful.

Raphaël

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 17, 2026, 12:16pm UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/9 "2026-02-17T12:16:15Z")

</div>

> [@quark](#):
>
> Javascript does have limited support for asynchronous processing (i.e. separate threads)  
> 1: Promises: primarily used for fetching resources e.g. images  
> 2: Web workers: which are useful for long complex computations

- 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.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 17, 2026, 12:21pm UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/10 "2026-02-17T12:21:38Z")

</div>

Well spotted I have corrected my post 😄

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [February 20, 2026, 8:14am UTC](https://discourse.processing.org/t/mouseclicked-mousepressed-keypressed-keyreleased-are-they-parallel/47898/11 "2026-02-20T08:14:00Z")

</div>

> [@sableraph](#):
>
> Adding to this, back when I was trying to understand the event loop, I found [this video by Namaste JavaScript](https://www.youtube.com/watch?v=8zKuNo4ay8E) particularly helpful.

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