Author: Ruslan Bashokov

Thinking about my midterm idea last weekend, I realized that I wanted to create something that was related to Christmas. Being far away from home, I often think about my childhood and those cozy winter holidays that I used to spend with my family and friends, so my midterm is a representation of one of my favorite times of the year.

When deciding on the style of my project, at first I wanted to create some sort of game. However, I decided to try something new – different from the typical collision-detection or platform games that I did all the way through my Introduction to Computer Science class. I decided for it to be an interactive game that would incorporate different elements of my memories about Christmas – music, visual elements, and the overall atmosphere of the celebration because it would be both a pleasant experience for me and something more unusual. As I found out later during the week, when the professor was showing us the previous midterms, my idea about the interactive game was not so unique. The Cafe game is a great example of such, and in some way, I got some additional inspiration by looking at it, but, of course, I will do my best to make my game even better.

Designing the Idea

As I did not have much time this week, my goal was to simply outline the idea and start working on the basic fundamentals of my game. First of all, the opening screen will be full of Christmas celebration elements. One of the first concerns that I faced was to find good high-quality textures for my game, because usually, the free game images I see on the internet are not that good-looking, and for the good ones you need to pay. However, after I spent some time looking for a free PNG no-background images website, I came across a couple where I found exactly what I needed for my game. This is one of the good websites I used – CleanPNG. I also decided to add the possibility of entering the fullscreen – when you press ‘f’ inside the p5.js editor. I remember the technique the professor showed us to make the canvas and all the elements automatically adjusted based on the size of the window, so I even tried to implement it using windowResized() function, but I decided that it would add unnecessary complications further in the game in case I needed to hardcode something, so I abandoned the idea and decided to stick to the size of the canvas 1800×900.

The second stage of my game will take place inside the house. Once the user clicks the door, the inner side of the house will appear on the screen. I took some inspiration from the game called ‘Fortnite’ which I used to play in my middle school years. It had a very nice Christmas event called Winterfest, and that is what it looked like:

The idea was that you log in to the game every day and you can open one gift per day. It had some in-game outfits, weapon skins, and other customizable items, but the main reason I still remember this game is the memories of how I used to play it with my friends during the school winter break.

For my midterm project, I want to implement the idea of opening gifts. I think that it will be the biggest challenge – to think of how the animation of opening the gifts will work and what I want to put inside. I really want to make it a good-quality interaction, so I will do my best to find all the necessary resources to learn the code elements I need to implement for that. As of now, I have not chosen any specific solution, but I am sure I will use a lot of OOP in my code, as well as a lot of functions. In fact, I already started creating functions for each of the elements that are shown on the screen because I can potentially add some animations or sounds for them next week.

Conclusion

So far I really like how I am working on developing my idea. I really want to use my imagination and try to create something that I would be proud of. As I have mentioned before, this game is a good representation of my memories, and I will try to make the most out of my time to make it great.

 

Computer vision is an extremely interesting concept, and emerging technologies significantly boost its development. Although the author mentioned that machines were not capable of doing ‘generalized’ visual input analysis and were heavily dependent on the specific set of programming techniques that would allow them to recognize only certain real-world scenes, I believe that soon (if not already), thanks to the rapid growth of AI, computers will be able to receive and process the information in a ‘general’ way without the need for the special setup in the software. Still, such a technology will probably not be widely applied at the beginning. In one of the Core classes that I recently took, we were talking a lot about Machine Learning, and one of the techniques that are used in that field with the purpose of computer vision enhancement is the Convolutional Neural Network, or CNN which learns by filtering the inputs of text, images and even sounds. Other techniques that were mentioned in the reading include brightness adjustment threshold, background subtraction, and frame differencing. All of them are described to be used to help a computer recognize the visual patterns and track changes in them, but I am sure that now there certainly exist some highly advanced technologies that, although probably based on the techniques described by the author, but still work much more efficiently and maybe incorporate a number of other methods simultaneously.

The development of computer vision is obviously a large step in our technological and scientific progress. It can be used for a lot of good things aimed at improving our lives. In healthcare, for example, it can be used to help doctors diagnose and treat patients or even assist them during surgeries. It is also widely used in self-driving vehicles, which can potentially improve road traveling conditions by making them much more regulated and safer. Computer vision can also be used for leisure activities and entertainment like games – I remember playing Xbox 360 with Kinect, a device that could track your motions and allow you to play some very cool games where you actually needed to jump and do some physical activities in real life, and they would affect the actions of your character in the game. As for Interactive Art, a great example of computer vision implementation is the installation that we recently saw in class, where you can catch the letters with your arms.

However, by implementing all these advanced technologies like motion and face recognition, we should always keep in mind the potential ethical issues that can arise as the line between interaction and privacy becomes more and more blurred. Not to mention, surveillance devices can also raise concerns among people as they become more and more ubiquitous and use high-level precision that is trained by analyzing hundreds of thousands of patterns of human facial expression, emotional behavior, etc. There are many questions that put in doubt the legitimacy of the development of such technologies as human rights can be at stake, but I guess such a discussion can last for a very long time. In my opinion, we just need to keep in mind that each of us can have different perspectives and attitudes toward computer vision, and this is completely normal.

I really liked the reading, especially how the author structured the idea and the definition of good design. The funny stories, facts, and pictures (Coffeepot for Masochists by Jacques Carelman actually made me laugh for a moment), in my opinion, positively impact any type of written work, and this is just something I wanted to point out. With these elements, even a long reading can become interesting and fun to read.

This chapter includes a lot of good points, many of which I highlighted while reading, but there are so many that it would not be possible to fit them into 2 paragraphs, so I will talk about what ideas came to my mind as a reflection of what I read. First of all, I really liked the statement that if the design is so confusing that you need to check the manual, and after that, you still struggle to figure out how the thing works, then the whole purpose of the design is lost. I completely agree as I experienced similar situations so many times in my life. One of the most recent happened when I was staying in a hotel in Uzbekistan for a couple of days. It is worth mentioning that it was a top-level hotel with a widely recognized brand name, so maybe that is why they had a very, very sophisticated AC system. I came to the hotel extremely tired after the flight and the car trip, so I just wanted to turn on TV, relax, and maybe even sleep a little. It was quite hot, and I decided to turn on AC, but there were so many buttons on the panel as well as so many indicators on the screen that I simply could not figure out what to do. Manual was not in the room, and I was too lazy to call the reception (besides, who am I not to handle the AC myself and call for help), so I spent quite a lot of time figuring out the brand and the batch number of the AC to find the manual on the Internet, and then figure out how to set the proper mode and temperature. As a result, I put so much effort into it that I did not want to sleep anymore and was very annoyed by it, so I decided to go out and eat… Uzbekistan is a pretty hot country, especially in the summer, so I appreciate the efforts of hotel management to provide their customers with the best ACs, but I think it is worth leaving the printed copy of a manual in the room. And as for AC manufacturers, they should definitely read this book…

Another thing that I liked from today’s reading is the idea about the paradox of technology. We have invented so many sophisticated devices and objects and not less sophisticated software for them that sometimes it can be too much. Regarding that, I also want to highlight the importance of understanding how the brain of young people is used to all those technologically advanced things. For me, figuring out how to set up the settings on the newly bought smartphone would not make any problem. Not because it is so easy, but because I am facing technology every day by using electronic devices to read, work, study, rest, and many other things. However, if you take my grandma or even mum, it will be a challenge for them to figure out what works, with what purpose, and how exactly should it be set up and used.

Lastly, with regard to my future projects in Interactive Media, I will definitely do my best to make my projects as transparent as possible to the users. Transparent does not mean they will be simple and silly, but rather they will be well-designed. They will be discoverable and understandable, and to achieve that, I will try to think from the perspective of a person who just came across my work instead of assuming that if it seems simple to me then it should seem simple to everybody. This class as well as others teach us how to understand technology, but our goal if we create something for other people is to understand them. If we achieve that goal, interaction with our work will be a pleasurable experience even for those who do not anything about the technology.

Since my early childhood, I have loved to fly. It was always an exciting moment for me to board the plane as it promised me the upcoming trip. In anticipation of adventures, I always wondered how often I would travel when I became an adult.

Now, I still love to fly, and I do it much more compared to my younger self. Nevertheless, my feelings are still the same whenever I enter the airport. These moments are quite fascinating to experience, so to remind myself of them, I decided to dedicate this small assignment to the airports.

Data Search and Code Implementation

Finding the data about the airports was not as challenging as I expected. Although I could not find it at first, and the websites that I tried to download it from were blocked for some reason, I immediately decided to look for the data on GitHub, and I found it relatively quickly. Thankfully, it was already pretty organized, so I did not need to edit the file in any sort of way. Just to familiarize myself with how data upload in p5.js works, I watched the videos of TheCodingTrain from this playlist.

As my favorite time to catch a flight is night, I decided to make the background black and the ellipses representing the airports yellow. I used the wonderful function map() in my previous assignment, so it was fairly easy for me to implement it here to adjust the longitude and latitude to the dimensions of the canvas (to x (width), and to y (height) respectively).

The part of the code that I am proud of the most is the design part. To make some add-ons, I decided to add the ability for users to look for the airports in the specific country by inputting the 2-letter country code (my CSV file had the column dedicated to it). For that, I decided to add the input window, format it in a way to correspond to the colors of my sketch and make the ellipses change color and grow in size if the airports are stated under the country code name in the file. I also decided to implement the console text output by adding the button. When the user types in the country code and clicks the button, all the names of the airports inside that country are displayed in the console. The button is also very well designed thanks to the functions mouseOver() and mouseOut().

    // if user input the existing country code, highlight the airports in this country with green
    if (country_code === input_country_code) {
      fill('rgb(0,255,0)');  // Green for matching airports
      noStroke();
      ellipse(x, y, 2, 2);
    } else { // by default all yellow - nice color reminding of the night flights
        fill('rgb(255,255,95)');
        noStroke();
        ellipse(x, y, 1, 1);
    }
    
    /* if (dist(mouseX, mouseY, x, y) < 5) {
      console.log(one_airport_name) 
    } */ // idea of displaying airport names when pointing at them on the canvas
  }
}

function show_airports() { 
  
  console.log('Airports in this country:');

  // If user not only input the country code but also pressed the button, display the names of airports in this country in the console
  for (let j = 0; j < airportsCSV.getRowCount(); j++) {
    let iterating_country_code = airportsCSV.getString(j, 'country_code');
    let iterating_airport = airportsCSV.getString(j, 'airport');
    
    if (iterating_country_code === input_country_code) {
      console.log(iterating_airport);
    }
  }
}

function highlight_button() { // changing style of the button when mouse is over it
  button.style('background', 'rgb(255,255,95)')
  button.style('color', 'black')
  button.style('border', ' 0.1px solid rgb(0,255,0)')
}

function default_button() { // default style, whenever the mouse is not pointing at the button
  button.style('background', 'black')
  button.style('color', 'rgb(255,255,95)')
  button.style('border', ' 0.1px solid rgb(255,255,95)')
}

Conclusion

Honestly speaking, I did not enjoy this assignment as much as I did the previous ones. This assignment was quite straightforward in some sense, and, in my opinion, visualizing data is not as cool unless you know the advanced-level programming that can help you make art out of the letters and numbers. Nevertheless, I liked working on my sketch, it gave me a nice perspective on how to combine working with data and coding in p5.js. I also learned how to work with text input and output, so I am happy with the result I have.

To further improve my work, I was thinking of displaying the name of the airport whenever a user points with the mouse at it. I even started coding it, as you can notice if you look at my code (I used // for some lines, but you can remove // to see how it works), but for the sake of time, I decided to leave this idea for the future. I also had some ideas in my mind, for example, adding the zoom-in/zoom-out options, or maybe even adding some animations of planes flying from one airport to another. I also thought about visualizing the busyness of the airport by making the busier airport look different, but I decided that it would be too much as I wanted to stay minimalistic.

Overall, it was a nice assignment, maybe not as creative as the previous ones, but also very useful! Can’t wait to start working on my midterm project!

Chris Crawford provided, in my opinion, a great explanation for what people think interactivity is, and how it should look like in real. Although some might find the author’s claims surprising, I, personally, always had pretty much the same thoughts on the matter of interactivity. I am not sure when Chris Crawford wrote this, but it seems that the word “interactivity” is still quite often overused and, perhaps, even misused or confused with the words react or participate.

The thing that I see differently though, is I believe we should clearly separate the interactivity with people and the interactivity with machines. While the former should obviously “listen, think and speak”, the latter can be limited to “taking in and responding”, and maybe add “processing” in between. The strongly interactive system, as I see it, would include all three of these features, and would obviously allow us, users, to influence the outcome. Nowadays, with the rise of Generative AI, interactivity with machines is moving on to a completely different and advanced level, and the goal of people working in the interactivity design industry is to keep up with the fast pace of new technologies to be able to integrate them into the work they create for users.

Another idea from the reading that I liked is of mixing the “art” and the “code” people as it can indeed enhance the experience we get from using the technologies. It is important to have a diverse set of skills and knowledge, and back-end programmers who can also understand the goals of graphic/UX/UI designers (and vice-versa) can significantly improve the level of work. It is interesting to see such a mix even in our class – people who were majoring in Computer Science or other technical (and direct) disciplines throughout the whole time in the university come to Interactive Media class to learn about art.

As I have mentioned in the conclusion of my Assignment 3 blog post, my goal for the next assignments will be to add interactivity to what I create. Of course, I will not be able to do it on an advanced level yet, but I certainly want my work to give a certain response – audio and visual. For my midterm, I am considering creating a game, which is an example of interactivity, at least by my own definition of this word.

 

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!

 

 

I found Casey Reas’ talk quite interesting as I discovered a number of new things I never thought of before. To begin with, as I have mentioned in this week’s assignment blog post, art is very subjective, and I feel that while some people can be fascinated by the art of chance and generative art as a whole, others will not even consider this art but rather set of unpredictable computer drawings that do not make a lot of sense. Personally, I am still not sure which side I belong to, but I really enjoyed watching the video as it gave me food for thought about the randomness implementation, and how it influences both physical and computer art.

First of all, there is a big difference between the randomness that humans create and the randomness that is generated by computers. It was unusual and captivating to see the pieces of art from the times before computers were invented, but I believe that as humans, we cannot ensure the complete randomness of our actions. On the contrary, computers are capable of producing chance operations that are much more unpredictable, and this is why it is important to control this process and find the right balance in order to get something that makes sense, something that can be called art. I was particularly impressed by the conceptual vehicles simulation (timecode: 9:03-10:00) that Casey Reas showed, and the way how he divided these random moves into stages and transformed them into drawings is interesting to think about. Overall, I agree with the ‘limitations’ of randomness that Casey Reas is setting in his works. In my opinion, a good thing to keep in mind is that I can always add some manual control to improve the visual effect of what was randomly generated, just like Casey Reas showed at the end.

In terms of my future generative art projects, I am definitely planning to keep the element of randomness as it surely adds uniqueness to the work. At the same time, I want to add more order, control, and interactivity for the user with what will be happening on the screen. As I watched the video after my assignment, I realized that although I tried to balance between ‘beautiful’ and ‘ugly’ randomnesses, maybe it was not enough. In my next work,  I will do my best to find a better balance.

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.