Category: F2024 – Mang

Concept:  My interactive media class starts just at the end of the day and when I was sitting in the class, brainstorming what I do with loops, I randomly started to draw some simple flowers on P5.js to relieve some stress from having a long day. Then the idea came to my head that having a flower bouquet can make me feel so good, if I don’t have one, then why not create a virtual one? So, here it is!

Proud Moment: I initially sketched some basic flower-like shapes using circles in P5.js, but they didn’t turn out as expected. To achieve the variety and complexity I wanted, I decided to use loops directly as we discussed in class, as manually coding each flower would have been impractical. My main challenge was ensuring that all the flowers had distinct appearances. To address this, I designed each flower type, reusing a base code and adjusting parameters to create different flower variations.

Code Snippet:

function drawDaisy(x, y, size, rotation) {
  let petalCount = 9;
  let petalLength = size;
  let petalWidth = size / 3;
  
  stroke(0);
  fill('#D9E4E6');
  push();
  translate(x, y);
  rotate(rotation);
  for (let i = 0; i < petalCount; i++) {
    push();
    rotate(TWO_PI / petalCount * i);
    ellipse(0, -size / 2, petalWidth, petalLength);
    pop();
  }
  pop();
  
  fill('#F2F2F2');
  noStroke();
  ellipse(x, y, size / 2);
}


function drawTulip(x, y, size, rotation) {
  let petalCount = 6;
  let petalWidth = size / 2;
  
  stroke(0);
  fill('#AEB7FE');
  push();
  translate(x, y);
  rotate(rotation);
  for (let i = 0; i < petalCount; i++) {
    push();
    rotate(TWO_PI / petalCount * i);
    ellipse(0, -size / 2, petalWidth, size);
    pop();
  }
  pop();
  
  fill('#EDEAE6');
  noStroke();
  ellipse(x, y, size / 3);
}

It made the design part of my work easier, but I initially struggled with making the flowers continuously generate as the mouse cursor moves and ensuring they didn’t cluster in one spot. To address this, I turned to various YouTube videos on Mouse Trails, such as the p5.js | Mouse Trail (Quick Code) tutorial. However, I needed to adapt some parameters and functions to fit my specific goals, which differed slightly from those demonstrated in the videos. This aspect of the project was particularly challenging as I had to first grasp the underlying logic before implementing the necessary code to achieve the desired functionality.

In mouseMoved() Function, I’m implementing the logic to generate new flowers as the mouse moves across the canvas. Here’s a breakdown:

function mouseMoved() {
  let currentTime = millis();
  if (currentTime - lastGenerationTime > flowerGenerationInterval) {
    lastGenerationTime = currentTime;
    generateFlowers(mouseX, mouseY);
  }
}

function updateFlower(flower) {
  let dx = mouseX - flower.x;
  let dy = mouseY - flower.y;
  let distance = dist(flower.x, flower.y, mouseX, mouseY);
  
  if (distance > 1) {
    flower.x += (dx / distance) * followSpeed;
    flower.y += (dy / distance) * followSpeed;
  }
  
  flower.x += random(-0.5, 0.5);
  flower.y += random(-0.5, 0.5);
}

When the time condition is met, I update lastGenerationTime and call generateFlowers() with the current mouse position (mouseX, mouseY). This function creates flowers around the mouse cursor, adding to the visual interest as I move the mouse.

Then, I calculate the distance between the flower and the mouse cursor using dx and dy. If the distance is greater than 1 pixel, the flower moves towards the mouse position. The followSpeed controls how quickly the flower moves. By dividing dx and dy by the distance, I ensure that the flower moves in the correct direction and scales its speed relative to the distance. While there might be other efficient ways to implement this, I chose this manual approach by carefully considering the underlying logic.

After watching the video “Eyeo2012 – Casey Reas,” I decided to introduce some randomness into the flower movement. I added the last two lines of code to make the movement more natural and less mechanical by including a small random offset to the flower’s position. This randomness results in a more organic and unpredictable motion, enhancing the overall visual appeal.

However, I was confused about which version to use as my final submission because each offers a unique vibe that I find appealing. To showcase the contrast, I am also including my first draft as a media file. This allows for a comparison between the two iterations, each with its distinct style and feel.

First Draw: 

Reflection and Ideas for Future Work or Improvements:

By using loops and arrays, I was able to efficiently generate and manage an infinite number of flowers, ensuring that the animation remained dynamic and engaging. The code successfully used these loops to update the positions of the flowers and arrays to store and retrieve flower properties, which was crucial for managing the large number of elements and their interactions. Here is what I think can be done in the future:

Performance Optimization: I encountered performance issues when increasing the number of flowers. For instance, trying to use infinitely many flowers caused the webpage to lag, highlighting the need for optimization to handle more elements smoothly. Addressing this performance challenge would help in making the animation more fluid and responsive.

Color Combinations: The current color scheme for the flowers and background could be improved. Some color combinations might not be as visually appealing or harmonious as they could be. Experimenting with different palettes could enhance the overall aesthetic and make the animation more striking.

User Interface and Interactivity: I initially experimented with aligning flowers based on input words, but this approach did not work as intended. Consequently, I simplified the project to focus solely on basic typography and the interactive aspect of the flowers following the mouse cursor. Future iterations could benefit from refining this concept or incorporating new interactive features to give users more control.

Conclusion: Despite these areas for improvement, I am pleased with the overall vibe of the project. The use of rotation to animate the flowers adds a dynamic touch, enhancing the visual interest of the animation. I enjoy the lively and engaging feel it provides and look forward to further refining and expanding upon this project in the future.

By all means, what does ‘generative’ stand for? And what about ‘random’, ‘chaos’, ‘definitive’, ‘rules’, ‘control’, ‘freedom’, ‘certainty’, and so on?

Before getting into details in Reas’ presentation, these questions occupied my mind. I would say that this week’s production had already raised these questions for me, and Reas’ philosophy presented exactly resonates with them. Binary systems could be potentially hazardous in terms of oversimplification from time to time, while they are very much a preferable tool for us humans to reference the world and reality. That happens to the balance between art and artist (as I touched on a bit in the first week’s production), the balance between randomness and certainty, the balance between aesthetics and technicalities (I encountered as many roles like a guitarist, a mixing engineer, a calligrapher, and here as a coder-artist), etc.

One of the observations I made out of the examples is the human physicality in that Mondrian painting where presented is the well-known seeming (or actually, as intended) abstraction of objectiveness. It is very interesting to learn that boogie-woogie music played as an inspiration to it as a musician. However, the great representation of something objective merged exactly from the human strokes of incapability to reach definite control. In that paintng, the refined thoughts and emotions – are spiritual of the mind – instead of spiritual of the body. On the other hand, the common lack of spiritual physicality these days may encourage us to also gaze through the opposite perspective and harness that to-be-decided set of definitiveness to praise the chance in our physicalities. In simpler words (or actually, in this specific context), the rules of computation and programming are grounds for the flourishing randomness in arts or, in other words, the physicality we humans could imagine, appreciate, adapt to, and reiterate we could potentially pursue.

This can be seen in many other examples in the presentation. From the deconstruction and reconstruction of figurative, symbolic, representative fragments or captures of the architecture following definitive rules to music from the Book of Change, chances on the rules and rules on the chances intersect with each other. In fact, the much amusing and providential discovery I found there is the irony of Book of Change in this particular context. While being named the Book of Change (Yi Jing 易经), this ‘book’ is many times accused of superstition but essentially represents the ancient wisdom of finding patterns, trends, and rules of the world to make predictions and guide life. That being said, the juxtaposition of chance and rule has been, in a sense, ubiquitous ever since.

Chance that is always planned and always surprising.

I believe this quote earlier said by Raes goes perfectly with the latest examples demonstrated in the presentation. While we recognize the power of randomness in certainties and the certainties in randomness, to what extent it is random/certain may stretch our attention further – as my opening wonderings suggest, and the question ‘where is the optimum balance between total randomness and complete control?’ lies in this middle ground. That being said, there is no way to maneuver around the definition of randomness and control – or at least while maneuvering, the multiplicity of them should be adopted. For example, the increment of randomness was realized by introducing more ‘randomizeable parameters’ in their second-to-last current project. Regarding merely the result, the randomness was raised for sure to human perception; However, this result was achieved by adding more control (or more controllable codes) to the program. In this case, I would rather perceive this ‘conflict’ as a mutual succession from both sides – when our technical attempts grant ideological and artistic fruits.

To end this reflection, I’d like to leave a question on ‘randomness in isolation.’ To my current understanding, there is no such thing as isolation in this field of mutual interaction – whether which side we picked at the beginning. Eventually, they merge and serve under a broader intention, purpose, collective, etc., and this will probably become one of my rules of thumb in the future.

So, on top of that, isolation could stand where?

Concept: It took me a while to decide on what to create. I had so many ideas but couldn’t implement them without very complicated code that I didn’t understand. I decided to make the following art piece, using the for loop, inspired by the Olympics logo since I’ve been watching it recently.

Code: I was proud of figuring out how to randomize the colors by making it choose randomly any value between 0-255 for red, green, and blue.

stroke(random(255), random(255), random(255));

Reflection and ideas for improvements: I wish I could make the stroke choose out of a set of specific colors instead of choosing randomly because some colors aren’t that appealing. Having a certain color scheme might help make it look more pretty.

Casey Reas’s talk on chance operations made me reflect on an issue I deeply care about, AI art. As an aspiring artist, seeing how far AI has come truly worries me about the future of this field. One can argue that AI can never take over art because the human touch and emotion cannot be replicated. However, when randomness is introduced to art pieces, what is the line that divides what is human and what is AI? If an artwork primarily uses randomness, does that make it AI? What about replication? Would having more chance elements in a piece make it easier or harder for AI to replicate?

I believe that randomness has value, yet I can’t help but wonder whether the artists who have designed these chance art pieces have thought of the implications of their work. Sure, at the end of the day, the person is creating the code and setting the limits for randomness, but what happens afterward, the actual conception of the work, is out of their hand. Using that logic, one could argue that the artwork isn’t original. In my own work, I’m not against using randomness, but I will limit it to simple things like choosing color or text from a certain array. That makes an art piece more human; therefore, I believe the optimum balance is having more control than randomness.

Concept 

For this week’s assignment I had to spend a lot of time brainstorming and somewhat fumbling through the dark before I had a sound idea of what I wanted to create. Originally, I was stumped as to how I would use effectively use a loop while still creating something ‘artistic’. However, after watching Casey Raes’ talk, I felt more confident in the fact that art did not fit some predetermined definition I made us.

Thus, I came to the conclusion that I wanted my piece to focus on comparison, and how it effects us as people. I started out with a sketch and planned for something much more complicated than what I ended up producing but it gave me a starting point for my code.

Components 

After giving myself a bit of a reality check, I decided the three rings would be stationary and depending on where the user clicks the mouse, a different element of the piece would be highlighted. Each of the three rings (representing unity altogether) also represent separate themes. The highest one represents individuality and when the user clicks on it, the rings separate and display yellow and purple colors. I chose these two because across cultures they represent royalty, wealth, and prosperity which I believe can only flourish through sufficient strength and independence.

When the ring to the left is clicked an image resembling the Seed of Life appears which is a symbol of creation and harmony across many religions (in slightly different variations). I chose this symbol to represent the peace that we find through self-reflection. Lastly, when the ring on the right is clicked, the entire unity symbol changes colors randomly which represents a person’s creativity and unique characteristics.

An Aspect I Am Proud Of

The aspect I am most proud of is what happens when you click outside of the three rings. A static-like image is created in the background which is intended to represent the ‘noise’ from society that often distracts us from understanding who we are. I used nested for loops to create this and was a bit indecisive on what I wanted the image to become. As I was writing the code, I was kind of just moving some loops around to see what worked and what didn’t and when I got to the grid design, became interested in how the image could imitate that of static.

function static(){
  noStroke();
  frameRate(40);
  for (let x=0;x<6;x++){
    for (let y=0;y<6;y++){
      fill(random(255));
      rect((x*100),(y*100),100);
    }
  }
}

Final Product

Reflections

Overall, I’m quite proud of the creative process I went through to come up with this concept. Although I did not meet my original goal in terms of the technicalities, it took a lot for me to generate these ideas and actually get something out of them so I am rather satisfied. However, in terms of improvements, there are a lot of areas in which the code could be written more efficiently (i.e. not redrawing the symbol every time user interacts with the mouse and instead just adjusting the parameters). Furthermore, in the future, I would like to dive in to the ‘oscillating-objects-unity-symbol’ idea I had going just to see it through.

As someone deeply interested in art and technology, I found Casey Reas’s works incredibly inspiring. His integration of algorithms, geometry, and art in design, interactive installations, and games has profoundly shifted my perspective on algorithms. Reas’s emphasis on the importance of randomness and chance operations in sparking imagination and pattern recognition truly resonated with me. Previously, algorithms seemed like rigid, rule-bound constructs, but Casey Reas demonstrated their creative potential through his projects. I also appreciated the historical context he provided on the juxtaposition of order and chaos in art and culture. He discussed how various artists, such as Jean Arp, Marcel Duchamp, John Cage, and Ellsworth Kelly, have employed chance and randomness in their work, showing how these concepts have evolved.

Reas’s ideas about randomness and chance reminded me of a photography project I’ve been working on, capturing different flowers from the NYUAD campus. I realized I could introduce more randomness into the process by experimenting with various camera settings and unconventional techniques. This approach could lead to more unexpected and intriguing results while maintaining cohesion and structure. I was also intrigued to learn about how military research into randomness has evolved into generative art. For example, his 10 PRINT algorithm, which generates unique and intricate patterns, fascinated me by showing how a simple algorithm can produce complex and beautiful results based on randomness. His work has motivated me to delve deeper into creative coding and explore the vast intersection of art and technology.

In general, a balance between randomness and control can be achieved by introducing elements of chance and unpredictability into a structured framework. This can help to create a sense of tension and surprise, while still maintaining a sense of coherence and direction. Casey’s use of the 10 PRINT algorithm to generate unique and intricate patterns is a great example of how a balance between randomness and control can be achieved. The algorithm provides a structured framework for generating patterns, while the random elements introduce a degree of unpredictability and surprise.

I thought Casey’s talk on chance operation was really cool! I feel like when people talk about computers/ tech, they think about how the systems are built from am extremely rigid structure. When in reality, computer system (especially now with AI) have the capability to produce series of random results beyond what humans can think of and learn/ fix their own programming. Although there is structure in the way computer programs are given sets of parameters (position of the pivot points, color of the objects, movement of the shapes, etc.), the way which the program takes the information and returns a result may not always be what humans expect to happen.

Throughout Casey’s talk, I kept thinking if he could have imagined how far generative art has come. Since Casey’s talk 12 years ago, we have applications such as OpenAI and ChatGPT that have the capabilities to generate some artwork based off user prompts. User do not even need to have technical skills in order to tell the computer what to do; whereas compared to 12 years ago, users likely had to understand the computer manual and/or operating system in order to create some digital art.

With that said, my favorite part of his talk was his demonstration from 30:52 to 34:14 of the commodore 64. Whenever I see technology from the ’80s to early 2000 I am just absolutely fantastically with how far the digital and physical world of technology has come. The commodore 64 is a simple 8-bit home computer in the ’80s, and knowing something so simple was able to produce something complex humans consider as art, is the coolest thing to me. Now as programs and technology continue to advance, I wonder what the future would bring for not only the art community, but how else technology can influence our society.

SHORT DESCRIPTION: 

In week 2 of intro to IM we were introduced to the concept of for and while loops in class and was asked to create a small project using these concepts. For my project, I decided to create a simple generative art program that selects a random shape and fits them onto the screen based off a given coordinate point. In order to achieve randomness in my project, I had used the Math.random() * n + 1 to generate number between 0 to n inclusively.

Design Concept 

Initially, I had wanted my design to be static, pure black and white piece with square grids that are filled with semi-circles rotated to different degrees, but I felt li

ke this concept has been used or seen before, so I decided to try something new. When I started the project, I knew I wanted to keep it simple, yet complex at the same time. My goal was to create a portrait that resembles modern contemporary art with color, where someone can make their own subjective opinions about the piece.

In the end, I created a dynamic and colored piece that changes what the individual sees on the screen every 2-seconds, and when the users press their mouse, the piece turns black and white. While I diverted from my original concept, I am still extremely happy with my final result and was still able to incorporate the black and white feature into my project.

Coding Processes

To achieve a structured, yet random pattern, I started by designing a grid pattern, where each square is 50 x 50 pixels. Then, in each square, there would be a randomly selected shape in the center of that grid. For the program to select a random shape, I created a function (getRandomShape) that would return a type:string from a shapes array (type: string).

The function that I wrote to select a random shape is as follows:

function getRandomShape() {
  const shapes = ['circle', 'triangle', 'square', 'ellipse', 'rect'];
  let randShape = shapes[Math.floor(Math.random() * shapes.length)]
  // console.log(randShape)
  return randShape

In the code, I had taken advantage of the Math library function .floor() and .random() in order to generate an integer that is within the length of the shapes array. Later I could also use the same functions to randomly assign the size of the shape. After which, running the code created a simple static design.

Some examples of the shapes bound within each 50 x 50 grid :

While I could have stopped there, I decided to play around more with the Math library and decided to shift the shape’s center, so it wasn’t restricted within each 50 x 50 square grid. As a result, it led to complex and unpredictable placements of the shape size and centers.

Some example of the randomized shape center

The Hardships

On top of the unpredictable pieces, I wanted to go further and implement an interactive “water ripple” effect that would emerge from where the user clicked on the screen. Unfortunately, I didn’t realize how complicated that process was because I had used the noLoop() in the draw() function to only produce one image at a time. Therefore, I couldn’t have the shapes stay static which the background continues to refresh (or at least I couldn’t figure how…). I spent a couple frustrating hours trying to get my idea to work before realizing the noLoop() was the issue. To future me and anyone else, understand the affect noLoop() will have your project and background, especially when working with for and while loops.

Eventually, I did get rid of the noLoop() in my draw() function and reduce the framerate to 2 fps because I didn’t want to give up on making my project interactive. [Another pro tip: the default framerate (60 fps) will make a project like this incomprehensible because the canvas is changing constantly.]

Achievements 

After dropping the ripple effect idea, I went back to my original idea of a black and white canvas. Using the mouseClicked() function, I set a variable “colorChange” to true if the mouse is pressed and make the canvas black and white, otherwise it would return to its default state of false and make the canvas colored. I really enjoyed this process because it exposed me more to p5’s library and allowed me to incorporate another idea I originally wanted to do.  I also felt like it added more depth and cool composition to my project.

let colorChange = false
... 

function mouseClicked(){
  return mouseIsPressed
  }
...

function drawShape(x, y){

  colorChange = mouseClicked()
    
    if (colorChange){
     circleColor = '#FFFFFF'
     rectColor = '#FFFFFF'
     circleColor = '#FFFFFF'
     squareColor = '#FFFFFF'
     triangleColor = '#FFFFFF'
     rectColor = '#FFFFFF'
     ellipseColor = '#FFFFFF'    
    }
}

Final Design

Below is my final design. I am happy with how it turned out and made me appreciate the process behind generative art and randomness. In the future, I hope to figure out how to implement a ripple effect and ability to create more generative projects.

[Press anywhere to make it black & white!]

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.