My goal for Assignment 3 was to combine the knowledge about loops, OOP, and arrays with the idea of controlled randomness while still using basic shapes (the art of simplicity :)). At first, my main plan was to try to replicate one of the most famous scenes from the movie “Interstellar”, where the main character finds himself inside the so-called Tesseract, – the 4-dimensional space, that looks like a huge library made from strings (check the video if interested).
So it was decided. I will use lines as a main part of my artwork. I wanted for lines to form something similar to what I saw in that movie scene. However, pretty soon I realized that I was not getting the result I wanted. This is probably because I like this movie so much that I can’t look at any replicas that are not as good as the movie itself. So I abandoned this idea.
Working Process
Nevertheless, I did not abandon the idea of using lines as well as the idea of them crossing each other on the canvas. This time I decided to use the black canvas and instead of using completely random colors like I did for Assignment 2, I decided to create a palette from which the colors would be chosen. The black background ideally matches the neon colors, so I googled and asked ChatGPT for the RGB codes of colors, and chose the ones I liked the most. As for the movements, I also decided that I should make more orders compared to my previous assignment, so I decided to make lines emerge from the left side and top and go towards the right side and bottom respectively. The challenge that I faced straight away was to find a way for the lines to draw themselves smoothly from the beginning to the end without ‘teleporting’. Using the internet, p5.js Reference page, and TheCodingTrain video I implemented lerp().
Next, I decided to make the lines disappear over time – again, to avoid too much chaos on the canvas that happened with “Going Through Life”. To make this happen, I used already familiar Alpha value to increase the transparency of lines over time. I also implemented red(), green(), and blue() functions to make colors consistent while fading.
The most difficult part
Since I gave up on the idea of replicating the scene from “Interstellar”, I clearly needed to come up with something else. Referring back to the Casey Reas’ video that I watched last week, I decided that my lines should change the direction. Once again, I decided to implement the idea of controlled randomness, so my lines would change direction under the limited range of values after they pass the middle of the canvas. It was the challenging part because I was not sure how to approach the code. At first, I was thinking of simply drawing two separate lines, but it was too much hardcoding, so I decided to simply search the internet once again. I found the amazing function map() that is used to play with translating the scales and measures of distance. Thanks to the Reference page and TheCodingTrain video, as well as a lot of debugging, I finally reached the desired result.
drawSelf() {
if (this.alpha > 0) { // line disappears when alpha goes below 1
stroke(red(this.color), green(this.color), blue(this.color), this.alpha); // fading color is the same as the line's
strokeWeight(2); // you can play with it to make line bigger/smaller
// drawing horizontal line
if (this.vert_vs_horiz === "horizontal") {
let xMovement = lerp(this.x1, this.x2, this.lifespan); // using lerp to implement smooth drawing
// controlling the randomness - drawing straight before middle of canvas
if (xMovement < width / 2) {
line(this.x1, this.y, xMovement, this.y);
} else {
// after middle of canvas is reached, can change the direction
let curveY = this.y + map(xMovement, width / 2, this.x2, 0, this.change_dir_angle); // using map to project the initial path of line on the change in direction starting in the middle of the canvas
line(this.x1, this.y, width / 2, this.y); // before middle
line(width / 2, this.y, xMovement, curveY); // after middle
The Meaning of my Art Piece – The Path
Halfway through writing my code, I started to think of what it reminds me in a more philosophical kind of way. For me, the drawn lines look a lot like people. The set of colors represents characters and types of personalities. We have similarities, yet we all have different paths in our lives, we are going the different roads and chasing different dreams and goals. At the same time, very few people actually stick to their dreams and keep going down the path they believe they belong to. In my code, change_dir_angle represents the deviation from the initial path the person was pursuing. If this deviation is too big, it means the person abandoned his dream or goal. If this deviation is in the “adequate” range, it means the person did not give up on his dream or goal, and successfully reached it. That is why I decided to add the animation of a circle at the end. It marks the achievement of “success”. Of course, this is oversimplified, but these are the thoughts and the meanings that I inserted into my work.
Just for the fun and the beauty of it perhaps, I added the mouseIsPressed() to make an option to freeze the screen and look at how the lines were drawn.
Thank you for your attention!
Conclusion
I really enjoyed working on this assignment and was glad to see the result that I achieved. It is interesting to notice how the things we like can inspire us to apply the ideas and meaning to something we create. In contrast to the previous assignment, I did not try to superficially plug the philosophical context into my artwork – it came by itself.
As I have mentioned before, my primary goal for the Intro to IM class is to learn how to think outside the box and expose myself to art. I feel like this assignment brought me a little bit closer to this, so I am satisfied with the result.
Reflecting on my code, I think I did a good job in keeping it simple yet implementing the functions that I encountered for the first time. As for the other things that I could implement, I was thinking about making the additional lines go from the right to the left sides and from the bottom to the top, but I decided that it would be too chaotic and not as minimalistic to see. Other than that, I could probably make the effect for the lines crossing with each other – something similar to the circles, but maybe slightly different.
In my future projects, I will try to stick to the same level of randomness that I have created today, or maybe even less. I will try to create more interactivity, especially in my midterm project. I am not quite sure what I will do, but I still have time to think about it. Can’t wait to see what I and other people will come up with!