In this homework I try to add some interaction into my previous object. I want to use some sliders to control the speed, diameter, and transparency of the random moving balls.
I tried to use functions of sliders in the library p5.dom.js. So I need first to go to the index.html in the web editor and uncommented the lines involving the p5.dom library.
First I created three variables of sliders that are used to set speed, diameter and alpha of the balls. Then I used the function createSlider(), slider.position() and slider.value() to define these sliders.
But now I encounter a problem displaying the values of the sliders. Since I want to show the traces of the moving balls so I could not use the background function to reset the canvas. But I have to reset the part where the values are shown. I came up with a solution using fill() and rect(). I just draw a rectangle over the area that I want to reset with the background color. In every frame that part of the canvas is equivalent to be reset.
Then I move on to create buttons to control the movement. I intended to create two buttons: stop button and continue button. The stop button simply stops the movement. So the stop function is just noLoop(). Similarly the continue function is just loop().
So I ended up with this: