# Using the draw method as one giant listener

**URL:** <https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306>\
**Category:** p5.js\
**Created:** [January 8, 2019, 7:46am UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306 "2019-01-08T07:46:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![faxinadu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/faxinadu/32/3153_2.png) [@faxinadu](https://discourse.processing.org/u/faxinadu)\
**Post date:** [January 8, 2019, 7:46am UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/1 "2019-01-08T07:46:09Z")

</div>

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?

Thanks

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

 ![p2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/da33d33a2219234e762ca41aefbfecfdb316f5fc.png)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 8, 2019, 6:15pm UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/2 "2019-01-08T18:15:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![faxinadu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/faxinadu/32/3153_2.png) [@faxinadu](https://discourse.processing.org/u/faxinadu)\
**Post date:** [January 9, 2019, 5:43am UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/3 "2019-01-09T05:43:39Z")

</div>

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:  
[https://faxinadu.net/jstest/polyphenom-js/](https://faxinadu.net/jstest/polyphenom-js/)

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.

Thanks

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 9, 2019, 6:13pm UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/4 "2019-01-09T18:13:52Z")

</div>

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](https://stackoverflow.com/help/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.

---

<div class="post-metadata">

**Author:** ![faxinadu](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/faxinadu/32/3153_2.png) [@faxinadu](https://discourse.processing.org/u/faxinadu)\
**Post date:** [January 10, 2019, 5:48am UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/5 "2019-01-10T05:48:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 10, 2019, 6:29pm UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306/6 "2019-01-10T18:29:55Z")

</div>

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.