Month: February 2024

For this assignment, I aimed to create an artwork based on geometric shapes, especially squares and rectangles. For that, I searched for famous artists that use this kind of technique and found the work of Piet Mondrian, which became the inspiration for this project. At first, my goal was to create a Canva of size 1920, 1080 composed by several squares that give the sensation of overlapping colors, as you can see in the following image:

For this I used for loops, constants, and the full screen option when the mouse is pressed, following this tutorial.

However, I was not satisfied with the result, so I decided to modify it and create something more visually appealing. That’s when I thought of the tesseract concept we have in movies, such as Interstellar, that also illustrate this kind of chaos and order composed by geometric shapes. That’s when I worked to add some animation and make the squares revolve in an elliptical orbit.

For that, I used variables to determine the number of squares, the speed factor, square size, etc. And I’m particularly proud of the following snippet code, as it allowed me to add a bit of interactivity because when the user clicks on the screen, it increases the speed of the squares, giving a cool motion effect as you can see in my sketch as well:

// Increase speed factor if mouse is pressed, otherwise reset speed factor
  if (mouseIsPressed) {
    speedFactor = 0.5; 
  } else {
    speedFactor = 0.05; 
  }
  
  // Loop through each square
  for (let i = 0; i < numSquares; i++) {
    // Calculate x and y positions based on sine and cosine functions
    let x = map(sin(frameCount * speedFactor + i), -1, 1, 0, width - squareSize);
    let y = map(cos(frameCount * speedFactor + i), -1, 1, 0, height - squareSize);

Reflection: While I successfully implemented for loops, constants, and mouse interactions, exploring additional programming techniques and functionalities could enhance the depth and complexity of future projects. This could involve delving into advanced animation techniques or incorporating other libraries for more intricate visual effects.

 

To think that art is just a collection and aesthetic grouping of random objects, and that we find beauty in it is baffling to me. I never thought about it that way. Listening to Casey’s talk and observing the pictures shown, I noticed that it was mostly just randomness concocting a beautifully crafted piece.

Casey Reas, in his Eyeo Festival talk, explores the fusion of algorithms and randomness in digital art, challenging traditional notions of control in the creative process. Linking information from the past, Reas connects chance operations in art, highlighting the balance between intentional ideas and serendipity. This mixture unlocks new creative avenues, encouraging artists to embrace unpredictability for unique and enriched artistic expression.

I think that’s what artworks are mostly about these days. Which could be somewhat tiring to see, as I miss the stories that are conveyed through work such as “The Starry Night”. I guess the concept of chaos can be applied to more than just visually pleasing art, such as music. Specifically Jazz or any instruments that are played really. I wonder what inspired people to create such devices that make sounds that just come together so harmoniously.

 

My inspiration for this assignment came from when I went camping in the desert last semester with my peers. There we were, sitting under the night sky, gazing at the stars and getting lost in the moment. We were talking about how the “small” stars we see are actually ginormous balls of fire flying around in space. We think it’s small because of how far they are. And then I started to ponder, how anyone seeing our world would think the same thing. An insignificant flying rock in mid-space. At that moment, I felt so small. My actions seemed inconsequential.

The power of gravity from the Sun held our Solar System together for so long and will do so for many more millennia. And what I do now or in the next 10 years can’t possibly change the trajectory of Earth. And I guess that’s why I wanted to create our Solar System as the project. And intentionally made it not-interactive to depict that we have no control over this captivating phenomenon.

A particular code I’m fairly proud of is creating randomized stars to depict constellations and making the planets with their respective colours, and distances and setting the rotation of the planets around the sun.

// making the planets rotate around the sun
function drawPlanet(name, distance, size, speed, planetColorR, planetColorG, planetColorB) {
  let angle = frameCount * speed;
  let x = width / 2 + distance * cos(angle);
  let y = height / 2 + distance * sin(angle);

  // giving the planets their color
  fill(planetColorR, planetColorG, planetColorB);
  ellipse(x, y, size, size);
}

class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.timer = random(0, 4);
  }

  show() {
    fill(255, 255, 255, (0.5 * (Math.sin(this.timer)) + 0.5) * 255);
    ellipse(this.x, this.y, 3, 3);
    this.timer += deltaTime / 1000;
  }
}

I believe I can do better to make the stars appear and disappear a bit slower to make them look like they’re exploding to dust to make them look more realistic. Additionally, I would like to try adding a part where the stars disappear and appear in different positions. Moreover, I would like to add an interactive element which is when I click on a part of the sketch, the stars burst or suddenly appear.

 

Casey Reas’ talk provides an interesting glimpse into the intersection of art and chance, challenging conventional notions of control and order in artistic creation.  The artists’ work utilizes the juxtaposition of order and chaos, a theme prevalent throughout art history, using chance operations and randomness. The transition from early controlled coding to the exploration of emergent behaviors reflects a shift in the artist’s mindset, raising questions about the role of intentionality in the creative process.

The exploration of algorithms, particularly in the tissue simulation based on Valentino Braitenberg’s Vehicles,  was fascinating for me. The simulated behaviors of conceptual vehicles responding to their environment introduce an element of unpredictability and organic growth. Reas’ emphasis on the paths taken by these vehicles rather than their static positions resonates with the idea that the journey, filled with constant restructuring, holds artistic significance. This challenged my conventional understanding of art as a static, predetermined outcome, urging me to appreciate the dynamic nature of the artistic process. 

Also, Reas’ exploration of biological data in the “Signals” artwork, visualizing the communication among proteins within a cancer cell was another intriguing piece due to the deliberate combination of structure and randomness in determining the position and scale of protein cluster. It’s as if the artwork becomes a dynamic representation of the delicate dance of life at the cellular level.  Overall, the concept of chance in art prompted me to reconsider the traditional boundaries of creative control as well as made me rethink the dynamic outputs we can create from algorithms.

I remember watching video by numberphile called Chaos Game years ago which I found very intriguing.  I wanted to create a generative art illustration around that topic something that would involve Fractals and creating order out of randomness. Fortunately, I found Daniel Shiffman’s video regarding Chaos Game where I followed his tutorial for the initial version of the project which draws Sierpinski triangle.

Even this simple configuration of Chaos game is surprisingly beautiful and very interesting as we have created triangle shaped forms simply by drawing points halfway to one of the three random points that is randomly created and then selected.

Next step was to add more complexity to the project, thereby adding more seed points and refactoring whole thing to make changing variables for future reference more dynamic. Tutorial was very helpful in achieving this. To be more precise, I had two values which I could dynamically change: percent (the distance to a randomly chosen point where new point has to be placed at) and const n which is basically number of seed points.

I could make a very lengthy post talking about each aspect of the code but instead I want to highlight the code I am most proud of and rest I will either explain in class or you can see through embedded comments of P5 sketch.

for (let i = 0; i < 200; i++) {
    
    strokeWeight(1);
    stroke(255, 255, 255, 200);
    
    let neighborIndex;
    do {
      neighborIndex = floor(random(points.length)); //from array
    } while (neighborIndex === previousVertexIndex || neighborIndex === (previousVertexIndex + 1) % points.length || neighborIndex === (previousVertexIndex - 1 + points.length) % points.length);
    let next = points[neighborIndex];

    current.x = lerp(current.x, next.x, percent);
    current.y = lerp(current.y, next.y, percent);
    
    point(current.x, current.y);
    
    previousVertexIndex = neighborIndex;
  }
}

This is an additional condition I added to make it so that newly chosen point can’t be the same as the old point or a neighboring point from the polygon. We are using LERP (linear interpolation) for updating position.

In the future, I could possibly experiment with more shapes and more drawings and users are also welcome to modify the code and play with it. Perhaps, adding a slider would make things much more fun to play with parameters. Additionally introducing color, or an interactive element users can play with could potentially be more captivating. For now, I am including the project with parameters of the shape I liked the most, but we can try other ones in class. I really liked making this project and I hope you like it too.

 

 

 

 

 

The presentation prompted a thoughtful examination of the nature of creativity in the digital era by examining the relationship between chance and creativity.  In particular, it resonated with me that randomness can foster creativity within the inflexible confines of code. It suggests that the “unintentional” can contain a new kind of intentionality, challenging the conventional narrative that art is solely a human endeavor. This counterintuitive notion begs the questions, “Is creativity a uniquely human trait, or can it emerge from the interaction between computational randomness and human intention?” I was prompted to reevaluate the artist’s function in the digital age by the talk. Rather than being the only creator, it’s possible that the artist is becoming more of a curator, arranging the circumstances in which art is produced through human-machine collaboration.

The conversation on using code-generated randomness to create unexpected and meaningful art struck a deep chord as well. It suggests a change in perspective from seeing art as a static representation to seeing it as a dynamic process where meaning is created via interaction and interpretation rather than being predetermined. This viewpoint is consistent with broader societal movements that prioritize experience over possession and procedure over product. It also raises difficult issues regarding authorship and authenticity in art. In the event that the “creator” consists of a collection of human-designed algorithms, how can we distinguish between the creator and the medium? Furthermore, how does this affect how we see art itself? In addition to providing insights, the talk created a forum for a more in-depth examination of the changing dynamics between people, art, and technology.

(Click on screen)

For this assignment, I wanted to create something that looks appealing but is interactive as well. Ever since we learnt loops and manipulating speed and colors, I wanted to create a display of fireworks, because fireworks are something I admire not just as a kid but even now.

When the user clicks on the canvas, a new firework is created at that position. The firework ascends from below the screen, and when it reaches its designated height, it explodes into a burst of lines, each growing in length until it reaches a random maximum length. Once a firework is exploded, it is removed.

I implemented this by using an array to store and delete the fireworks and an array for the lines for each firework. I used 5 for loops: the first one is to iterate over the fireworks array and call the functions (in reverse order since we are deleting items), the second one is to iterate over the lines array and increase their length, the third one is to recheck that all lines reached its max length and updating the ‘done’ flag (this was to fix some glitches), the fourth one is to have the lines of the firework at different angles around the center, the fifth one is to find the endpoint of each line using the length and angle to finally create the firework.

I am happy with the entire code since I had to learn how arrays and functions work to implement this. What helped was that I am familiar with using arrays in Python and C++. The part that I am particularly proud of though is the function that brings everything together, since I had to recall how polar coordinates work to find the endpoint of a line:

function showFirework(firework) {
  R = random(10,250);
  G = random(10,250);
  B = random(10,250);
  stroke(R,G,B);
  strokeWeight(2);
  fill(R,G,B);
  if (!firework.isExploded) {
    ellipse(firework.x, firework.y, firework.radius * 2, firework.radius * 2); //center of firework
  } 
  else {
    for (let i = 0; i < firework.lines.length; i++) {
      //determining end point of line using angle and length
      const xEnd =
        firework.x +
        cos(radians(firework.lines[i].angle)) * firework.lines[i].length; //polar coordinates
      const yEnd =
        firework.y +
        sin(radians(firework.lines[i].angle)) * firework.lines[i].length;
      line(firework.x, firework.y, xEnd, yEnd);
    }
  }
}

Overall, I am satisfied with the output. In the future, I would like to make it more realistic by adding some fireworks using particle explosion as well as adding sound.