# P5.js gui library slider control

**URL:** <https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114>\
**Category:** Libraries\
**Created:** [December 4, 2019, 2:11pm UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114 "2019-12-04T14:11:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![morgantp98](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@morgantp98](https://discourse.processing.org/u/morgantp98)\
**Post date:** [December 4, 2019, 2:11pm UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/1 "2019-12-04T14:11:08Z")

</div>

I have a row of shapes which I have made, with a slider from the p5.gui library controlling the rotation speed of one of the shapes. I would like the “Fan” slider to be able to pick specific shapes so I can change the speed of all of them separately. Sorry if I have worded this badly I am just a beginner and am struggling quite heavily I’ve been looking around for something to help me and haven’t been successful

[https://editor.p5js.org/morgantp98/sketches/KP-jzDZNH](https://editor.p5js.org/morgantp98/sketches/KP-jzDZNH)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 4, 2019, 11:43pm UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/2 "2019-12-04T23:43:48Z")

</div>

first step is to go back and try without GUI,  
you need a array of speeds (ok) and a array of current angle ( not only ONE )  
and a smarter draw function.  
[https://editor.p5js.org/kll/sketches/kaYULGIFA](https://editor.p5js.org/kll/sketches/kaYULGIFA)

now start again with GUI,  
on a click/change event  
must set/change the speed of the selected fan inside the speed array.

---

<div class="post-metadata">

**Author:** ![morgantp98](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@morgantp98](https://discourse.processing.org/u/morgantp98)\
**Post date:** [December 5, 2019, 3:10pm UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/3 "2019-12-05T15:10:51Z")

</div>

Awesome! Thanks for the help.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2019, 2:19am UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/4 "2019-12-06T02:19:48Z")

</div>

that is the problem with the libraries,  
at the beginning ( using one of the examples )  
all looks a lot easier as to try to code it…

but if you want something out of the ordinary ( like your 2 slider multiplex idea )  
you have to dig deep, not understand the advanced examples or the documentation  
and finally have to say  
" i not know if that can be done with that library"  
so possibly wasted lots of time, better play  
[https://p5js.org/reference/#/p5/createSlider](https://p5js.org/reference/#/p5/createSlider)  
[https://editor.p5js.org/p5/sketches/Dom:\_Slider](https://editor.p5js.org/p5/sketches/Dom:_Slider)  
anyhow the point is that your idea would require a EVENT thinking:  
if ( Fan Number Slider Changed ) set Speed Slider to setpoint from speed array [Fan]

- 
  - ( and that i not found how to do with that lib )

if ( Speed Slider Changed ) read Speed Slider and write to speed array [Fan]

* * *

if you want try that idea again, start from  
[https://editor.p5js.org/kll/sketches/ingo688HL](https://editor.p5js.org/kll/sketches/ingo688HL)  
i think i found a way

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2019, 11:46am UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/5 "2019-12-06T11:46:01Z")

</div>

or use a selector for the fan instead slider?  
[https://editor.p5js.org/kll/sketches/n8b0Ej894](https://editor.p5js.org/kll/sketches/n8b0Ej894)

 ![fanselector](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/66e002c35a7d058356a06e9e7c391f8d00f96935.png)

---

<div class="post-metadata">

**Author:** ![morgantp98](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@morgantp98](https://discourse.processing.org/u/morgantp98)\
**Post date:** [December 6, 2019, 12:03pm UTC](https://discourse.processing.org/t/p5-js-gui-library-slider-control/16114/6 "2019-12-06T12:03:03Z")

</div>

Wow! Thank you so much! That’s so cool I’ll spend some time looking through references and your code. I’m still rather new but really enjoy working out how things work and stuff. Thanks again.