Algorithmic Patterns and Buttons in p5js

This week, we were introduced with for, while, and nested loops. Our assignment was to worked in pairs and create an artwork with:
1. algorithmic pattern
2. button/slider

Aaron and I decided to play around individually with our codes first and combine halfway with whatever we got. I created this spiral spinning wheel with loops and rotation. And he created an self-expanding colored ellipse.

We both use ellipse as our base design, so we decided to combine the two elements with a slider that alters the spinning offset and expanding speed.

Full Code Here:

Thoughts, Questions, Evaluations:
1. Rotate and translate are tricky functions!
I had a session with the residents because I could not figure out how to rotate my spiral. Apparently, it was because I put the translate before even drawing my spiral. The translate function used to change the center point of the spiral should also be reset to the original of canvas before drawing.

2.  Combining other people’s code
Codes get messy when combined together. Aaron and I need did some debugging before we were able to add the slider control function.

3. Slider control function
We actually just copied and tweak a bit of the code from the resource. They use a new function called constrain. I am thinking that it’s doing the same work as the map function.