Assignment 2(Loops)- Blinding Lights

Concept

My art assignment was inspired by a The Weeknd concert that I attended. I was amazed by the stage setting particularly how the lighting was done which I really liked. The criss-crossing lights that were constantly moving from all around the stage and changing colors perfectly rhymed with the vibe of the song being performed. If the song was more chaotic the lights would move faster and the color be more dark but when the song was more of chill the lights would move more slowly and be of more bright color. Adding to the video by Casey Reas on art, I came to visualize how the lights bear a chaotic theme in terms of movement and color but this chaos is what makes the concert more lively by creating a good vibe. This inspired me to try and recreate a similar thought but in terms of art. I do this by excluding the stage as a whole and just focus on the lights and the pattern of illumination and color. My art has light coming from the top and side which is moving to represent the light that is fixed to illuminate the stage alone. The circles which change size and color represent the moving lights that illuminate the audience.
Code Highlight
The part of the code that I am really proud of is how I executed the moving circles and making them change their size while moving.

// Changing size of circles let size = 30 + sin(speed + i * 0.05 + j * 0.05) * 20;

fill((speed * 20 + i) % 255, (speed * 30 + j) % 255, 200);//random colouring ellipse(x + sin(speed + i * 0.1) * 20, y + cos(speed + j * 0.1) * 20, size);

j += 50;

I implemented this by first ensuring that the circles have a minimum size. Then I used the sine function to generate values that change between -1 and 1. The sine wave makes the circles to move up and down and each circle having a different oscillation . Then by multiplying the sine function by the constant 20 ensures that the size of the circles also changes as they move. This whole results in the circles changing size in a wavy way. The circles also change color depending on their position on the screen which results in the circles having unique color in different places on the screen.

Visual Code

Reflection/Future improvements

I am proud of how I have been able to use loops to come up with something lively as compared to my first assignment. I am also proud of how I explored my creativity and being able to put down my experiences in terms of art using p5. For the future work I would like to have more user interaction with the art work like having mouse or keyboard engagement to directly change the art. I would also like to refine the movements of my art to be more complex and more random in order to embrace Casey’s logic of chaos. Other than that I am impressed with the art that i came up with and the progress that I have had.

Week 2 – Reading Reflection

I enjoyed Casey Reas’s talk more than I expected to, especially considering that this was the first time I had heard the idea of “randomness” and “chance” being used in an artistic context as compared to a math or probabilistic one. After I began to appreciate this notion of chance in art, I was struck by how even this is very subjective and can be used in countless ways. One example of this is when Casey Reas talked about the concept of decision-making regarding the level of randomness incorporated into artwork. This means that artists sometimes also make conscious choices about how much of their work they leave to chance, creating “a delicate balance between order and chaos”. This also remined me of the quote by Gerhard Richter:

Above all, it’s never blind chance: it’s a chance that is always planned, but also always surprising. And I need it in order to carry on, in order to eradicate my mistakes, to destroy what I’ve worked out wrong, to introduce something different and disruptive. I’m often astonished to find how much better chance is than I am.

What I found extremely interesting about this idea was the intentionality behind randomness in art. It is about letting go of complete control but not entirely abandoning it, which can lead to unexpected, sometimes better outcomes than planned. This challenged my initial assumption that randomness in art is purely accidental and without thought. In the end, it made me contemplate: what exactly is the role of the artist? Is he still the creator of the work, or merely a medium that guides chance to reach the final piece? It also made me consider how we can use randomness not just to fill gaps but as a crucial tool for innovation and breaking away from mistakes.

One part of the talk that made it more interesting for me was the use of examples and actual works of art to illustrate this use of randomness. For instance, I found it very intriguing that something seemingly simple like the Table of Random Numbers could have such widespread use across several industries. I also liked the example of the piece “Fractal Invaders”. The idea of using a coin flip to generate art created very interesting results, but what was even more interesting was how symmetry and duplication suddenly sparks our imagination and makes us see figures in the art. It made me think that something that might initially seem highly structured or algorithmic can still engage the imagination in many ways. Overall, the talk made me rethink the creative potential of combining strict rules with the freedom of randomness, and helped me see that the “unexpected” is an important element in the artistic process.

Assignment 2: Worm

Concept

sandworm – circle – sin/cos wave

I begin with wanting to create a sandworm-looking creature from Dune. During my research, I found out this B&W worm that is visually more appealing than a big yellow worm hiding in the desert.

After the initial brainstorm, I started playing around with circle() & ellipse() just to experiment with the for loop. This snippet I got from one of the readings inspired me to show more of the liveness of the basic shapes.

Keeping the shape of the sandworm and the potential movement they might have in mind, I decided to create a wave. With the help of this Youtube tutorial on sin & cos wave, i was able to create a normal wave. By adding framecount into that, I create the illusion as if this sandworm is 3D. To practice using if statement, I added a colorful background that is only triggered when your mouse is moved there.

Somehow Casey Reas came in mind, so I decided to explore a bit further. For the clarity of my worm, I removed the background interaction and replaced all cos with tan. Thi si the final result:

Code & future improvement

I am happy with how the frameCount came in handy in both the fill() & circle. In future, I would give more meaning to the background.

for (i=0; i<width+100; i=i+1){
  fill(
    178+177*cos(i/2 +frameCount/2)
  );
  circle(i, height/2  + 100 * cos(i/100+frameCount/20), 50 * cos(i/30 + frameCount/50))

}

Week 2 Assignment: Spinning Records

Concept:

This idea of records spinning came into my head as I was djing over the weekend and seeing how the dj software looked like:

I was also inspired by the album cover of Kanye West’s album “yeezus”:

My piece inspired by these has a couple of functions. It spins freely when nothing is touching it. Once a mouse is hovering and pressed down above one of the records, that specific records starts slowing down, eventually coming to a stop, much like a real record. Once the mouse is released, the record starts spinning again, but with a different rectangle and central circle color, as if you have swapped the record out.

Code highlight:

// Rotate and draw elements for each circle
 let angles = [angleLeft, angleRight];
 let rectColors = [rectColorLeft, rectColorRight];
 let innerCircleColors = [innerCircleColorLeft, innerCircleColorRight];
 for (let i = 0; i < centers.length; i++) {
   push();
   translate(centers[i], 200); // Move the origin to the center of each circle
   rotate(angles[i]); // Rotate by the current angle for each circle
   drawSpinningElements(rectColors[i]); // Draw spinning arcs and rectangles
   pop();
 }

// Update angles based on rotation speeds of each record
angleLeft += rotationSpeedLeft;
angleRight += rotationSpeedRight;

This segment of code is in charge of the spinning element of the piece, using a loop, it affects both records. Within the loop, rotate is used to rotate the elements of the rectangle and the arcs. the angleLeft and angleRight incrementing is what creates the animation.

Reflection and future improvements:

For future improvements of this piece, I would love for the record to be spinning only when music is planning, and/or have the colors respond to different parts of music like drums or snares.

Assignment 2

Concept:

For this project I really wanted to experiment with geometry and adding chaos to a shape which is commonly deemed as stable, the humble rectangle. I chose to have the rectangles rounded and translucent to further add to the playful nature of the artwork. The randomness in size, color, and movement makes each play through unique, creating a sense of spontaneity every time the code runs. The fact that they only begin to move when the mouse is hovered is meant to mimic the human ability to see art even if any isn’t there. If a tree falls in a forest and no one is there to hear it, does it still make a sound? (If your mouse is hovering over it, then sure)

Code Highlight:

The part of this code that I’m really proud of is the way the rectangles handle hitting the edges of the screen:

if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    //if statement checks whether mouse is inside the canvas by analyzing       x and y positions
    //if inside the canvas, the x and y values of each rectangle is changed based on its speed and direction value which was assigned in the setup function
    rect_object.x += rect_object.speed_x * rect_object.dir_x;
    rect_object.y += rect_object.speed_y * rect_object.dir_y;

    //this checks whether the object is hitting the horizontal border by analyzing if the left or right side of the rectangle have exited the canvas, it then reverses the rectangle's direction to ensure it stay on screen 
    if (rect_object.x <= 0 || rect_object.x + rect_object.w >= width) {
      rect_object.dir_x *= -1; // Reverse horizontal direction
    }
    //this checks whether the object is hitting the vertical border by analyzing if the top or bottom side of the rectangle have exited the canvas, it then reverses the rectangle's direction to ensure it stay on screen 
    if (rect_object.y <= 0 || rect_object.y + rect_object.h >= height) {
      rect_object.dir_y *= -1; // Reverse vertical direction

It’s a small section, but it’s key to making the animation feel fluid and continuous. Each time a rectangle hits a boundary, it bounces back in the opposite direction, keeping each rectangle within the bounds of the canvas. This adds to the randomness of their movement and ensures the canvas is not slowly emptied throughout a run.

Final Product:

Reflections:

Looking ahead, I think there’s a lot of potential to make this interaction even more engaging. I want to add a feature where clicking on a rectangle changes its size or color. Another idea would be to incorporate deceleration/acceleration effects to make the motion more organic, and make it seem as if the rectangles have weight. I’d also love to experiment with sound or other visual effects that react to the movement, turning this simple animation into something that engages multiple senses.

Reading response #1: Casey Reas

View code as a tool to bring imagination to life

Reas’ website & talk.

I’m the most impressed by Casey Reas’ ability to code art from the easily overlooked details in life and how some of his works can find their roots in art history. Every piece he presented contains multiple layers of meaning, with deep consideration before arriving at a final artwork. Those works draw from scientific concepts, like that neuro model, or something as simple as the characters on a keyboard. They start with such tangible concepts but lands in somewhere abstract.

What sets coding art apart from traditional forms of art? I believe it’s the ability to accept constant changes. Reas references artists like Duchamp, the Dada movement, and John Cage to illustrate the concept of ‘chance in art.’ These works embrace improvisation as part of the creative process. Coding takes this a step further by having randomness at its core, demonstrating how randomness can have a certain intentionality. It shows how meanings can shift and layer as the program runs. These added-up layers can be endless, not just limited to one canvas and small changes in a code can result in something drastically different from before. Another key distinction is accessibility. Traditional art often requires specific skills and techniques, while creative coding lowers that threshold and provides the public with the tools to easily replicate a great piece of creative coding.

Assignment#2_piece of art

CONCEPT:

Two artists have caught my eye for my concept: Vera Molnár and Dr. Bill. Vera Molnár’s use of grids and squares with small touches of randomness was something I thought of as cool and want to bring to my own piece, especially after watching Casey Reas and learning how randomness can create unique art pieces. Her piece “(Dés)Ordres” shows an example of balance between order and chaos by introducing little changes in color and shape within a structured grid (Molnár, 1974). I want to do something similar by using a grid of squares and making each square unique, creating a sense of predictability within the order. The second artist’s art, Dr. Bill’s, has inspired me to incorporate interactive elements into my artwork (Kolomyjec, n.d.). I plan to incorporate an interactive element where the colors of the squares shift as the viewer moves their mouse across the screen, making it engaging.

To be more specific about my design, I will use the loop function to add squares all over the canvas. However, like Molnár’s designs, I’ll also add squares within the squares, but I’ll be using randomness to change either how the square moves or how big it is inside the square, or the colors of the square. Also, I wanted to make it more interesting by picking one color on one side of the canvas that changes with the user and the mouse interaction with it. In addition to that, I wanted to make it a vibrant piece by adding random colors, but as I said, I’ll be choosing one specific color that changes within the interaction of the viewer and the mouse. Hopefully, by combining Molnár’s structured randomness with Dr. Bill’s generative interaction, I am aiming to create a dynamic and engaging piece, by working with order and unpredictability, to make something that evolves with each viewer’s interaction.

The images below are Vera Molnár and Dr. Bill’s work that inspired my piece:

SKETCH:

HIGHLIGHT:

One part I’m really proud of is figuring out how to make the cubes “shake.” I used the “random()” function to add small random movements to the X and Y coordinates of each square. By setting “randomShakeX” and “randomShakeY to values between -3 and 3, the squares move slightly, creating a subtle shaking effect.

It took me a while to get this right and was the most time-consuming part about my code. I started out by testing different ranges for the movement and tested the effect with various square sizes. After some trial and error, I found the perfect balance where the shaking felt noticeable but not too chaotic. This part of the code may seem little, but it makes the design feel more dynamic and playful, which is something I was excited to achieve. In the end, I was proud of how it turned out because it brought my art piece together, which proved Casey Reas’s message of how small random changes can make a big difference in how a design feels.

heres a code snippet on how to do it:

// Adding random movement to create an effect of shaking (inner squares)
      let randomShakeX = random(-3, 3); 
      let randomShakeY = random(-3, 3); 

// Draw three inner squares with the shaking effect, decreasing in size.
      rect(x + randomShakeX, y + randomShakeY, 30, 30); 
      rect(x + randomShakeX, y + randomShakeY, 20, 20); 
      rect(x + randomShakeX, y + randomShakeY, 10, 10); 
    }
  }
}

REFLECTION:

One thing I learned from this assignment is how randomness can play a big role in art. It adds variety and surprises that make the piece more engaging. One thing I want to improve is to add more interactions with the user in my piece. For example, I had an idea where pressing a key on the keyboard would change the shapes, and using the arrow keys could adjust the size of the shapes. Along those lines, I’d like to eventually turn the art into a game where people can play with the shapes and make their own patterns that fit their personalities. It would be more fun to do this with the art piece.I’m happy with how the code turned out, though. It makes me feel like the art piece fits with who I am by being colorful and unique.

References

Kolomyjec, B. (n.d.). Dr. Bill, Generative Art OG. https://www.drbillkolomyjec.com/

Molnár, V. (1974). Désordres. Digital Art Museum. https://dam.org/museum/artists_ui/artists/molnar-vera/des-ordres/

Reading Response 1

In Casey Reas’ presentation, he explores the tension between order and chaos through the lens of visual art, particularly how software and algorithms have allowed for a deeper engagement with these concepts. His work demonstrates how randomness can coexist with controlled systems, creating art that is both calculated and unpredictable, offering new perspectives on the artistic process. What stood out to me was how his work evolved from simple systems to complex installations, with the unpredictability of the process being the common thread between all his artworks. His reliance on algorithms and chance, combined with borders, reflects a deep connection between control (borders) and randomness(algorithms and chance), making each artwork unique yet part of an artistic collection.

But the real question on my mind is whether his work is considered art. Even though his work stood out to me and it was interesting to see what pieces were created from software, algorithm, randomness and chance, I’m still wondering if this is actually considered a piece of art. I’ve been thinking about this because my twin, who is majoring in visual art, often questions what is considered art. In my opinion, not everything can be considered art; true art is what has been made with genuine feelings, created by hand, and has a meaning or story behind it. Some might argue that it is considered a piece of art because this person programmed it to do this piece of work, but I still argue that even though the person gave the commands the person still didn’t know how the artwork will end up looking like and there isn’t any story or meaning behind this piece of work. So, the question remains: is his work considered art?

Assignment 2- Art Design

CONCEPT:
For this assignment, my inspiration mostly came from Bill Kolomyjec’s art piece ‘Random Squares’.
‘Random Squares’ Bill

However, I wanted to add a bit of a twist and make it more chaotic or trippy in some sort of way. I’ve gotten the idea of the changing shapes depending on the area of the canvas from class and interpreted it into my design, which thankfully pulled the piece together. In addition, the crazy random colours definitely added to the effect of it being trippy at least I hope so. Moreover, it still felt a bit bland, and after watching Casey Reas’s video, I knew I needed to add something to make the piece seem more alive or organic, as he says. In doing so, I discovered a growing and shrinking factor, which, after some trial and error, I realized it was just a variable that I needed to create and then just adjust the shape size accordingly, and it turned out not so hard after all. This would probably be what I’m most proud of in the whole code.
Code that I’m most proud of:

/ Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

Reflection/Improvment:
Next time, I would love to have the shapes rotate, which is something I tried doing but unfortunately failed, I did watch videos on youtube but i still didn’t understand it so i decided to scratch that until i fully understand how it works. So hopefully next time!

My design:

My code:

// Variable for size change
let sizeChange = 0;
// Variable for the shapes (growing or shrinking)
let growing = true;

function setup() {
  createCanvas(400, 400);
  frameRate(5);
}

function draw() {
  background("black");

  // sizeChange variable to create growing/shrinking effect
  if (growing) {
    sizeChange += 1;
    // If the size gets too large, start shrinking
    if (sizeChange > 20) {
      growing = false;
    }
  } else {
    sizeChange -= 1;
    // If the size gets too small, start growing again
    if (sizeChange < 0) {
      growing = true;
    }
  }

  for (let x = 0; x <= width; x += 40) {
    for (let y = 0; y <= height; y += 40) {
      // Outer stroke for the shapes
      strokeWeight(3);
      stroke("black");
      // Right half of the canvas - enlarging and shrinking squares
      if (mouseX > width / 2) {
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested squares
          rect(x + (30 - size) / 2, y + (30 - size) / 2, size, size);
        }
      } else {
        // Left half of the canvas - enlarging and shrinking circles
        for (let size = 30 + sizeChange; size > 0; size -= 10) {
          fill(random(255), random(255), random(255), 150);
          // nested circles
          ellipse(x + 20, y + 20, size, size);
        }
      }
    }
  }
}

Assignment#2_reflection

The first time watching Casey Reas speech, I had so many thoughts. But one main point I kept thinking about is how the author focuses on artists using randomness to create art that represents history, biology, or society, but none of these works seem to connect with deeper human emotions. So then I kept thinking about this, and I asked myself. Does randomness restrict personal expression?. For example, the artist said, “We used a little bit of randomness and a lot of sort of decision-making based on how we wanted things to feel.” From my point of view, this quote shows how randomness keeps art from being predictable, leading to unexpected results that might move the piece away from personal emotional expression. So, this makes me question whether relying too much on randomness prevents personal expression since the process seems more about handling the chaos of the system than about conveying intentional emotions. The reason I focused on this part of the video is because I always thought of art as a form of personal expression that reflects the artist’s emotions, thoughts, and experiences. So, when too much randomness is involved, it feels like the artist loses control over that emotional connection, letting the system or algorithm take over, which could overshadow the personal meaning and emotional depth behind the work.

However, watching the clip for the second time, I decided to think with an open mind. For example, does the unpredictability in art lead to more innovative pieces that lead to deeper stories?. Casey Reas mentioned a few artists who used randomness to create works with meaningful messages. For example, he talks about a project visualizing cancer cell communication. “Everything is structured and ordered, and randomness is used slightly to determine the position and the scale of these individual clusters.” In the example, randomness plays a role in producing a lifelike representation. The artist used randomness to decide where the protein clusters would go and how big they would be, which reflects the natural unpredictability of real biological processes. As a viewer of this artwork, I felt as though it captured the chaotic nature of cellular interactions. So, in this case, I think that the randomness added depth in the art piece, which in a way made me feel connected with the processes of life in a way that a pure structured system or algorithm might not be able to. Overall, while at first randomness may seem to get in the way of personal expression, it nevertheless lets artists make works that reveal deeper truths about nature, society, and the human experience in ways that pure intention or structured systems might not be able to just by using unpredictability in some part of the art.

REFRENCES:

Reas, C. (2012). Form+Code in Design, Art, and Architecture.

Retrieved from the weekly PowerPoints: https://vimeo.com/45851523