Ocean Blue – ICM – Week 2

An image of light blue circles placed randomly on top of light blue background that is patterned with small blue squares.

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. 

Check my code here.

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.

An image of layered colorful circles on top of each other

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.

screenshot of coding on p5.js about randomizing the color to have opaque blue color.

I also played around with the blendMode() to experiment the possibilities of different colors sitting on top of each other.

a screenshot of code that creates the image of randomly placed warm-colored circles on top of a matrix of blue cubes on a white canvas.Randomly placed warm-colored circles on top of a matrix of blue cubes on a white canvas.

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).

a screenshot of code to rotate an object by its center on p5.js reference page

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.

A screenshot of p5.js that shows the rotation of rows and columns of small cubes.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.

screenshot of code in p5.js. I am trying to create class and create some objects within the class.

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.

An image of light blue circles placed randomly on top of light blue background that is patterned with small blue squares.

An image of light blue circles placed randomly on top of light blue background that is patterned with small blue squares.An image of light blue circles placed randomly on top of light blue background that is patterned with small blue squares.

Published by Yiting Liu

NYU ITP '21

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: