We need our lights to twinkle randomly. The faster the frame rate of our app, the faster they will twinkle.

Once more, explore the JavaScript source code and see how we did it. Observe how we tried to name variables and functions in a 'self-documenting' way to help us (and you, our dear guest) understand the process.

Visually, the twinkles are formed using a smaller white dot that flashes on top of one of the dance lights as it is randomly selected. If you slow the frame rate, you can see this process. Increase the frame rate, and that twinkling really takes off!

You do realize you can search the source code for 'twinkle' code right?

Also notice we added a Pixel 'class' to the mix: we needed it to help us keep x and y values together in a single memory location to keep track of our dancer and light locations which are in 'canvas' coordinates.

Remember, since Pixel code is in a separate file, we have to bring that file in separately with a script tag and src attribute.

We also added code to add a dancer (a small black point) to the canvas. It's their initial location. Once a dancer is placed (either by a mouse click or by a press of the Start/Stop button), the twinkling can begin!

Note: The careful analyst will see some small changes in the drawLightFramework function. It involves the use of 'push' an 'pop' functions, provided by Processing, to store and/or remove transformations when you are done with them. Without them, the lights didn't twinkle in the right place because the coordinate system was out of kilter to the original canvas coordinates. Read more about these curious functions in the Processing reference materials.

Last update: 01/24/20

---