Assignment
Create a sketch that includes (all of these):
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
Performance
Ocean Blue is a sketch that allows users to draw by clicking the mouse. When the mouse is clicked, the opaque blue-to-green-ish circles will appear on the canvas. When the mouse is pressed, the radius of the circle increases. It’s background has the pattern with several squares with changing colors ranging from dark blue to light blue. I wanted to give users a sense of tranquility while creating their own piece of artwork.
Draw
You can play with it below and save your artwork.
Inspiration
I have been meditating and following the guides to help me be more aware of myself. One practice I really love doing is called “deep relaxation” where they have the sound of ocean waves in the background mixed with the sound from the singing bowl. It is super calming and relaxing to me that each muscle on my body is completely relaxed. In this piece, I wanted more people to experience the calming feeling. Therefore, I chose the blue color as the base and added transparency to all the colors in the sketch.
Process
I experimented with mouseClicked() to add layers of circles and also played around with the transparent colors stacking on top of each other. I also played around with mousePressed() to make sure the longer I press, the larger the circles.
I feel the background is missing something. Therefore, I used for loops to create several small squares to make the background more interesting to look at.
In order to make sure the colors of the square will change as time goes by, I made sure the color is randomized yet is still with in the cold-color range.
I also played around with the blendMode() to experiment the possibilities of different colors sitting on top of each other.
However, this creates a more playful tone rather than calming feeling I wanted. Therefore, I didn’t use the blendMode() in this project.
Struggles
Rotation Problem
I wanted to create a patterned background that keeps changing. It could either be changing colors or it could be rotating individually. The original idea was to create rectangles that can rotate individually yet I couldn’t figure out how to do so since the rotate function in p5.js rotates from the (0,0). Yet, I want to make sure each individual object rotates by the center of itself. I am thinking maybe I need to use class to create the object and call it in the draw function in a for loop. I am not sure which method would be better applied to my project.
I searched on the reference page about how to make rotation of an object. But when I apply to a group of object. It starts rotating from the (0,0).
I also tried to translate the (0,0) into the center. However, it still shows the similar pattern, which all the squares rotate from one single point.
I played around with the class and try to work it out but I am not sure if that is the better way to do so that each square stays in its position and rotate from its center.
Conclusion
All in all, I am quite happy with the result. You can play around and create different artworks in this setting. I love the potential possibilities of creative drawing. Here are some of my drawings. But I would love to learn more about how to fix my rotation problem for my future projects.
