For my second assignment, my goal became to use simple and basic shapes – rectangles and ellipses, but make the most out of them by playing with sizes and colors, while utilizing the available information resources – p5.js website Reference page, YouTube Channel The Coding Train, and the Internet as a whole. At first, I planned to make a plain art object, but as I was discovering more and more features of p5.js that I could implement to enhance the visual experience, I started seeing the bigger picture with the meaning behind it, and that is why I called it “Going through Life”.
Creating the Art
Art is a very subjective thing, especially nowadays, but I tried to create something that would simply show beauty and uniqueness. I took some inspiration from Computer Graphics and Art Journal, more specifically from “Random Squares” by Bill Kolomyjec, and decided to use shapes, random() functions, and loops as the foundation of my work. I also used the just-gained knowledge of arrays and a couple of other intermediate-level tricks that I took from the resources mentioned in the previous paragraph to make it easier to write the code. My first step was to create rectangles that would be of random size and would emerge in random locations on the canvas while I press the mouse mouseIsPressed(). Later, I decided to make the same effect but with ellipses emerging when I press the space bar using keyIsPressed() . I will explain the part of the code I am most proud of later, but now I would like to talk about the two concepts that I implemented.
1. Paint Blender
Before doing the assignment, I was looking at different works of generative art on the internet and on YouTube. Multiple times I saw how people used p5.js color functions to create something similar to the real painting. Although I was not familiar with any such types of functions, I decided to do some research on the Reference page to find something that I could apply to my work to make it look like a painting too. I came across the filter() function with the built-in parameters to impact the canvas in various types of ways. I started trying to apply them one by one to my work, and I realized that when the BLUR effect is applied, the shapes and colors that are randomly drawn on my canvas look like they are blended together, so I decided to keep it. Whenever ENTER is clicked, the colors and the shapes blend together. For me, it looks kind of like graffiti.
Instructions:
Press the Mouse to draw rectangles!
Press Space Bar to draw ellipses!
When you think that’s enough, click ENTER to blend the colors and the shapes!
2. “Going Through Life”
After finishing the job with the BLUR filter, I realized that although I reached my initial goal of creating a simple piece of art using the basic functions, it was a little bit boring and did not really have any meaning behind it. As an artist, I thought, I should convey the idea through my work, so I decided to change the filter to something more interesting. I found the DILATE filter, which increases the light areas on the canvas. I really liked the effect that it had – all the dark and grey colors were pushed away and overtaken by the bright ones, and it reminded me of how our thoughts and memories work.
The canvas is by default clear and bright – just like our minds. However, when we start facing problems, difficulties, and overall negative moments during our everyday lives, our minds start to get filled up with bad thoughts that constantly grow if we keep focusing on them. To change that, we must let go of all the negative emotions since we cannot change what happened in the past anyway. Once we do that, our minds will start getting back to light, even if it is just a small area of light left. There are wonderful moments and memories inside every one of us, and we just need to remember to turn them on. This is the mindset that I think is important – you always have to stay positive, even when you are going through tough times, and then you will surely find the light!
Thus, I made the rectangles represent the negative thoughts by changing the RGB to the lower range of values. I did the opposite with the canvas – the mind, and the ellipses – the positive thoughts. For the DILATE effect to start working, you need to “let go” and stop pressing the mouse 🙂
Instructions:
This canvas represents your mind.
Life is not life without challenges and troubles!
And we often concentrate too much on the negative emotions and feelings.
They grow just like when you press the mouse.
But it is important to let go.
And really appreciate the good things that are happening to you – unpress the mouse after some time.Â
You can add positive thoughts by pressing SPACE BAR.
Try to mix pressing mouse and SPACE BAR, and then let go to see the effect!
The part of the code that I am most proud of is when I needed to figure out a way to make the process of growing look smooth and unusual. First, I used the floor(random(1, 3)) to make the random choice between numbers 1 and 2 that would represent in which direction – top/bottom (up/down) and width/height – the rectangle would grow. I used a similar technique with the ellipse. Second, I used the trick with frameCount and increased the time variable to regulate the delay before the new rectangle/ellipse started emerging. I am glad that I still remember things I learned in my Python class and am now able to apply them here in JavaScript. Lastly, I used the Alpha value of the fill() to control the transparency and make the so-called “waterfall” effect.
function draw() {
if (mouseIsPressed) {
let width_vs_height = floor(random(1, 3)); // chooses whether width or height of the rectangle will increment
for (let j = 0; j < 100; j += 1) {
let emerging_rectangle = all_rectangles[j]; // takes rectangles for an array one by one
if (frameCount > emerging_rectangle.time) { // delays the emergence of the next rectangle
if (emerging_rectangle.up_vs_down === 1) { // grows down
if (width_vs_height === 1) { // grows in width
if (emerging_rectangle.w < emerging_rectangle.wLimit) {
emerging_rectangle.w += incrementingspeed;
}
} else if (width_vs_height === 2) { // grows in height
if (emerging_rectangle.h < emerging_rectangle.hLimit) {
emerging_rectangle.h += incrementingspeed;
}
}
}
else if (emerging_rectangle.up_vs_down === 2) { //grows up
if (width_vs_height === 1) {
if (emerging_rectangle.w < emerging_rectangle.wLimit) { // grows in width
emerging_rectangle.w -= incrementingspeed;
}
}
else if (width_vs_height === 2) { // grows in height
if (emerging_rectangle.h < emerging_rectangle.hLimit) {
emerging_rectangle.h -= incrementingspeed;
}
}
}
}
fill(emerging_rectangle.colorR, emerging_rectangle.colorG, emerging_rectangle.colorB, random(0, 6)); //random transparency to create the 'waterfall' effect
noStroke();
rect(emerging_rectangle.x, emerging_rectangle.y, emerging_rectangle.w, emerging_rectangle.h);
}
}
Conclusion
I enjoyed working on this Assignment because it challenged me to not only write the code but also find the idea and meaning behind it. I created two variations of my artwork, and I am curious to know which one people would like more – Paint Blender or “Going Through Life”.
In terms of my p5.js skills, I feel that I learned more functions and techniques that I will definitely apply in my future work. There is a lot of room for improvement, and in terms of this particular assignment, I have some things in mind that could make the experience even better. For example, I could implement the restart button that would erase the canvas and make it empty again.
What I realized today is that p5.js is a massive field to explore. It has so many features and advanced-level functions that allow you to create basically anything that you can imagine. While going through the Reference page, I came across the Perlin noise algorithm, which I found to be quite a powerful tool, and I really want to figure out how to use it properly for my future work. I also liked the idea of the WEBGL render mode, which allows you to draw high-level 3D models, and has a number of tools that seem not to be available in the basic mode we are currently working in.
Overall, I am very satisfied with how our class is going. I came to Interactive Media to develop my imagination and creative thinking and explore the idea of thinking about art and producing it. I believe that it really helps me to improve the way I think “outside the box”, and I am looking forward to continuing this journey.