In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs as below. Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors and the other one codes the output behaviors.) Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually.
Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compare to interface elements we'll get for free from the browser.
Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
Making the rectangle, filling in colors
Add in mouse interactivity
Add in responsive click and sound
My partner and I decided to create an interactive keyboard programmed to change color with mouse movement and play sound with individually clicked keys. We found that the creation of the keys alone required a few mathematical equations, and the simpler part was actually adding in the interactive component later on. Although we were able to make the keyboard change colors with the rollover of the mouse, the interaction of the black keys proved difficult due to the mapping of each key within a larger key (of which there are 8) on the canvas. Adding in the sound also took several tries because of it’s separate library and unfamiliar code, but its learnability was in using a MIDI to frequency function to map out tones to each key. Ultimately, we decided not to include sound on the black keys, instead resorting to only vary them by their color once clicked. Unfortunately, we were not able to figure out how to limit the sound to the lower keys, while keeping the color variation of clicking the black keys (along with colors of the white keys) as well.
You can find my P5.js code here: https://editor.p5js.org/prk247/sketches/KfZLi0oS3