Using the draw method as one giant listener

We have been experimenting with using p5js’s draw function as one giant listener for normal html created dom elements, mostly range sliders that then manipulate p5js.sound objects.

Obviously this is not “the right way” someone would do this, a normal “correct” approach would be to assign listeners to the elements. This is both cleaner, more logical and more efficient (why check in the draw loops all these values that probably did not change).

On the other hand, this has some great advantages as well.

  • First of all, it is very quick to code this way (i know, bad excuse here) where all you have to do is have one js line in the draw method that checks the slider value.
  • The code is much shorter, since there are no functions defined for each control.
  • Code is much easier to manipulate, just change what’s going on inside the draw.

The question here is this - how much of a performance impact if at all does doing it this way have? our synth has around 50 sliders and even so it seems like the performance is terrific, with a draw method of around 1000 lines of code. Also, are there any other disadvantages I should think about? Is this genius or is this dumb?


P.S. - using a framerate of 25fps for the draw method.


Can you try to be more specific? What do you mean when you say you’re using the draw() method as one giant listener? Can you post a small example program that demonstrates what you mean?

I will say that if you have a single function with 1000 lines of code in it, you should almost certainly refactor it into multiple functions or classes.

Hey Kevin, thanks for taking the time. I was going to copy paste my draw method here but it is too long for the editor.

You can have a look with the browser inspector here:

It is a very long function, but a whole lot inside is conditionals, especially for the virtual keyboard. The code doesn’t evaluate the whole thing with each pass.

Just to mention that while I have code experience this is my first week or so with javascript/html/css/p5js so please excuse if there is awkward stuff in the code.


I didn’t mean for you to post the whole code. I meant for you to post a small example that demonstrates the approach, aka a MCVE.

If it works and you understand it, it’s fine. If you ever plan on working with other people then it might be a bigger deal, but for now it’s really up to you what your code looks like.

In this case posting just a few lines to show the concept does not answer the original question of performance. With a couple of elements or sliders of course this is a non-issue.

We can’t really answer the question about performance anyway, because we can’t measure that without seeing it. At best we can comment on the overall approach, which a simple example would be fine for.