Creative Technology – Design Challenge #3
Use p5.js to create a more robust artistic composition using trigonometric concepts, with bonus points for 3D.
Due to how vague the prompt for this challenge was, I really struggled to settle on a design. As a result, I ended up with several different final products, all with varying degrees of complexity. I noticed that the challenge mentioned working in 3D. I had never attempted that before, so I decided to challenge myself. I was determined to incorporated 3D objects and movement in my project.
To start, I created an interactive swirling pattern of circles. I set that pattern as the texture of a cube that rotated and orbited around the display. The sketch for this version can be found here: https://editor.p5js.org/jppoulter/sketches/h6uDYxcpl
The next version started with the same basic ingredients. I added music, with a play/pause button, and a circular sound visualizer to the middle of the display. I increased the number of cubes to 4, and had them all orbit around the visualizer. The sketch for this version can be found here: https://editor.p5js.org/jppoulter/sketches/zw02P7zdK
My third iteration took the inclusion of music a step further. Along with the 4 cubes and the visualizer, I added a rotating sphere to the middle of the display. The color of the sphere was constantly updating based on the volume of the music. The sketch for this version can be found here: https://editor.p5js.org/jppoulter/sketches/aw3y1z5qR
Finally, I decided that this project had gotten out of hand and was a bit over stimulating. I liked many of the elements, but I wasn't happy with all of them put together. My first step was to remove the sphere. I felt it was an interesting part of the design, but overall it was more distracting than anything. I also decided to cut the number of cubes in half. With two cubes the viewer can still get the full experience of the movement and the iterating swirl texture, without being completely overwhelmed by how much is happening.
The end result includes trigonometric functions in multiple elements. The swirl is created and colored with sine and cosine functions. The cubes' orbits around the display are created by translating them in the X, Y, and Z directions with sine and cosine functions. And lastly the music visualizer is formed into a circle with sine and cosine functions. The sketch for the final version of this project can be found here: https://editor.p5js.org/jppoulter/sketches/_S_sUw0kp