This week I struggled coming up with something to make, so I ended up spending some time experimenting with various default p5.js shapes using a simple sin wave animation, which was a lot of fun. I ended I up creating some nice fabric-like movement using the vertex() function and polar coordinates. So here's sort of the evolution of where I ended up visualized through several sketches.
In this first sketch, the radius of the circle is determined by the calculated y-value and the y -of the ellipse is fixed at the origin.
This sketch is similar, but uses the triangle() function.
I then started playing with Perlin noise and the vertex function to create overlapping lines. By inverting the x and the y coordinates of the vertices, I was able to have them appear to rotate around each other and create and interested fluid, fabric-like effect. You can see the code here.
I started playing with colors and opacities, while also adding another set of vectors moving in the opposite direction.
Lastly, I worked on this sketch, which uses the length of the circle array to adjust the radius of the circles along the wave. I like the flow of this sketch, the change in radius towards the center of the canvas, makes it look like there is kinetic energy being transferred between these two wiggly objects. Or that there's an attraction between the two that will never physically reach.
What I Learned
I'm still having a really hard time wrapping my head around visualizing trigonometric functions in p5.js, so this week I tried to take some time to play and see if I can gather a better understanding of the shapes are being visualized based on how the variables are manipulated. I definitely felt a bit overwhelmed this week with the content, but I did have fun playing this week and I do think it helped in my understanding of the concepts a bit better.