p5.js: Animation, Variables

We are only in our third week of school, but the feeling of new stresses has largely accumulated. I began looking for inspiration in any moment I had a chance to breathe and step out of my thoughts. I sought out a humble escape across the street, and parked in one of those red lounge chairs in the middle of the MetroTech campus. With proper posture for that lounger, I became square with the overcast sky, quietly blanketed with a paper-thin leafy canopy.

I wanted to replicate the subtle breathe of these leaves that barely created shelter from an impending drizzle. I began the assignment by looking at two Recursive Tree examples:

I enjoyed the natural, unpredictable length of branches of the first example, and the interaction of growing branches of the second.

With uncertainty of how to create abstracted leaves and avoiding a direct figurative translation, I began exploring trunk widths through the expression of multiple cylinders. The width was mapped to the mouseX position.

Screen Shot 2019-09-14 at 2.16.46 AM.png
Screen Shot 2019-09-14 at 2.19.29 AM.png

I scrapped this visual and wanted to focus on the breath, not just of these greens but mostly of my own. I envisioned a multicolor mandala composed of layering shapes that would undulate as you exhale. Using the mic, your “breath” or voice controls the rotation of the shapes Z axis. The mapped breath value, mouseX and mouseY coordinates control the R, G, B values of the fill.

Click here to view the sketch.