Author: Ruslan Bashokov

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.