Week 3: Create UI elements to change control a design and introduce chaos into the project - kalibirdsall/Creative-Coding-Class-Wiki GitHub Wiki

For this assignment, Rujia and I collaborated. To start, I watched all the Dan Shiffman videos and I looked through Professor Brain's examples. I was able to create a simple button that changes color when the mouse hovers over it, and when the button is clicked, the background color changes. My button is very simple, but since this class is the first time I've ever coded, I'm starting from the beginning and trying to not compare myself to the more advanced students in the class! I'm trying to follow the advice on this billboard image:

Here's my button sketch: https://editor.p5js.org/kalibirdsall/full/BNJfD7jhb

I shared my button sketch with Rujia and she shared her sketch with me. Rujia has a lot of prior experience with processing and p5.js and the project she had created was absolutely beautiful. She had created random spinning arcs which could be sped up or slowed down with a slider.

Since her project was so impressive, we decided to keep it as-is and just add my button to change the background color from white to black when clicked. We adjusted the size of my button, rounded the corners, and revised the color to better match her color palette.

The "chaos" aspect is reflected by how a different random set of arcs are created, in different colors, each time it's run. The spinning arcs also just have a chaos vibe, as if you're looking at a representation of something chaotically spinning through space. When you change the background to black, it sort of feels like an explosion, and when you speed it up it looks out of control.

Here's is our creation: https://editor.p5js.org/kalibirdsall/full/CsFShKMVn