Month: February 2024

In week 2, we learned loops. I wanted to take that further by introducing them to my animated art in Processing.

I used random to create a rainbow effect for the elements, while the waves were generated using loops. Similarly, the tiles are also generated using loops, while the colors are randomized for each tile, hence creating this gradient-ish effect.

For this assignment, I really wanted to get myself familiar with the way P5 draws each frame. To quote, I think I should simplify the codes and be creative with the limited tools I have rather than going over the top. Basically, I am opting by using optical illusions to create the art shown.

Here are the codes I used for the art:

var x;
var y;
var changeDirection;


function setup() {
  createCanvas(600, 600);
  frameRate(6);
  y = 300;
  changeDirection = false;
}

function draw() {
  background(0);

  //loop for tile grids
  for (let x = 0; x < width; x += 50) {
    for (let y = 0; y < height; y += 50) {
      noFill();
      strokeWeight(1);
      stroke(random(255));
      rect(x, y, 50, 50);
    }
  }

  stroke(255);
  strokeWeight(5);
  //loop for the rainbow waves rectangles
  for (let x = 0; x < width; x += 50) {
    fill(random(100, 255), random(1, 200), random(50, 100));
    rect(x, 0, 50, random(150), 0, 0, 20, 20);
    rect(x, 600, 50, random(-150), 0, 0, 20, 20);
  }

  //text
  textAlign(CENTER, CENTER);
  textSize(48);
  fill(255);
  stroke(0);
  strokeWeight(4);
  fill(random(100, 255), random(1, 200), random(50, 100));
  text("Synthwaves", width / 2 + 5, y + 5);
  fill(255);
  text("Synthwaves", width / 2, y);
  fill(180);
  text("Synthwaves", width / 2 - 5, y - 5);
  
  //If - Else statement to change text direction
  if(y>320){
        changeDirection=true
  }
  else if (y<=270){
      changeDirection=false
  }

  if (y>=0 && changeDirection == false){
      y=y+5
  }

  else if(changeDirection == true){
      y=y-5
  }

  
  

}

 

Watching Casey Reas at Eyeo2012 unfold the layers of complexity within generative art, particularly through the lens of randomness, was a revelation that challenged my preconceived notions about the nature of creativity and the binary between order and chaos. His discourse on the implementation of randomness to generate art that is ever-evolving and unique each time it’s created stirred a deep curiosity in me about the essence of creativity itself. Is creativity a structured process governed by predefined rules, or does it thrive in the absence of constraints, propelled by the unpredictable forces of randomness?

The aspect that struck me most was the paradox of controlled randomness. The idea that an artist can set parameters within which randomness operates, guiding chaos towards a form of order, resonates with me on a philosophical level. It prompts a reflection on how much of our lives are governed by the illusion of control. We navigate through our existence setting boundaries, creating rules, and forming patterns, yet the most profound moments often arise from the unexpected, from the serendipitous collisions of chance.

Reas’s exploration of randomness as a tool for artistic creation also led me to ponder the intrinsic nature of human perception. How does the introduction of randomness affect our interpretation of art? The concept that a single piece of generative art can evoke a myriad of interpretations based on the viewer’s personal experiences and biases underscores the subjective nature of art and perception. It’s fascinating to consider that what we see in a piece of art is not just a reflection of the artist’s intent but a mirror of our own psyche, shaped by the random accumulation of our life experiences.

Moreover, the dialogue between order and chaos, as presented by Reas, challenges the traditional boundaries of art. It suggests that beauty and meaning can emerge from the most unexpected places, blurring the lines between the deliberate and the accidental. This approach to creating art not only expands the artistic lexicon but also offers a metaphor for embracing the unpredictability of life itself. It’s a reminder that amidst the chaos of existence, there are patterns, rhythms, and a form of order that we might not understand yet but can appreciate for their aesthetic and existential significance.

Casey Reas’s talk was a profound journey into the heart of what it means to create and perceive art in the digital age. It was a call to embrace the unpredictable, to find beauty in the randomness, and to reconsider our notions of order and chaos. This exploration has ignited a desire in me to delve deeper into the realm of generative art, to understand not just the mechanics but the philosophy behind using randomness as a medium for creativity.

It was something new for me to dive into how art projects are more than just what meets the eye, especially when Casey Reas explored the theme of randomness. I found it quite interesting to see how a simple tweak in shapes and algorithms can transform art in unexpected ways, that create something new each time.

This got me thinking—why do we use art to reflect the randomness around us, or in creating randomness, is it ever purely random? Or we just choose how much of it we truly want to be random. This whole idea makes me curious to think deeper about the intention behind art and the unpredictability it represents. Because for me randomness seems like a paradox, despite our efforts to control or understand it.

Concept:
I wanted to create an animated visual effect this time. I was trying to represent the fluid nature of water and fishes by capturing the randomness. I have used HSB color mode for vibrant, holographic colors of the small circles that represent the fishes. The program generates 1000 points with random positions, sizes, colors, and movement angles. Each frame, draws these points as ellipses, creating a trail effect with a semi-transparent background. Points move based on their angles, occasionally changing direction, and wrap around the canvas edges. The color of each point gradually changes, creating a dynamic display.

Code:

let pointCount = 1000;
let shapes = [];

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 255); // Use HSB color mode for the holographic effect
  noStroke();

  // Create initial points with random positions and properties
  for (let i = 0; i < pointCount; i++) {
    shapes.push({
      position: createVector(random(width), random(height)),
      size: random(1, 5),
      color: color(random(255), 200, 255, 100), // Holographic color with some transparency
      angle: random(TWO_PI),
      speed: random(0.005, 0.03), // Speed of change
    });
  }
}

function draw() {
  background(0, 0, 0, 25); // Semi-transparent background for a trail effect

  // Draw each point and update properties
  shapes.forEach((shape) => {
    fill(shape.color);
    ellipse(shape.position.x, shape.position.y, shape.size);

    // Update position
    shape.position.x += cos(shape.angle) * 2;
    shape.position.y += sin(shape.angle) * 2;

    // Randomly change the movement angle
    if (random(1) < 0.05) {
      shape.angle += random(-0.5, 0.5);
    }

    // Wrap around the edges of the canvas
    if (shape.position.x > width) shape.position.x = 0;
    if (shape.position.x < 0) shape.position.x = width;
    if (shape.position.y > height) shape.position.y = 0;
    if (shape.position.y < 0) shape.position.y = height;

    // Update color
    shape.color = color(frameCount % 255, 200, 255, 100);
  });
}

Embedded Version:

Reflection and Improvement:

I am happy that it finally worked in the end because I was having a hard time wrapping around the edges of the canvas. In the future, I would like to ensure that the randomness is affected by the user interaction through the mouse or keyboard. Maybe also integrate some shapes, so that the small circles are affected by them and then place them in a transparent grid.

The talk Casey Reas gave on the role of chance in art sparked my curiosity around the human perception of randomness. Throughout various exhibits, Reas showed how order can emerge from chaos and the value of ordered randomness. I think that one of the major factors that contribute to the appeal of these artworks to us is our brain’s urge to find patterns everywhere. The ordered-chaos artworks defy our brains ability to interpret the image so easily, but also invite the brain to try and seek as much information and patterns as possible. Therefore, the key to creating chaotic but attractive artworks is to embed a clever interplay between order and randomness and let our brains wander in the presumed chaos and work our way to understanding the artwork, while not confusing us or, in contrast, letting our minds get lazy by providing works that are easy to decode.

When I think about ordered chaos I always remember fireflies. When fireflies are in a group together on a tree, initially they blink in a chaotic order. However, due to an algorithm determined by mathematics, they synchronize into a massive, uniform ball of light, blinking together in constant intervals. There is more order in chaos than we think, and there is more chaos in order than we could imagine, but the most important takeaway for me was that the balance between the two can be infinitely beautiful.

For this assignment, our task was to create a simple artwork using loops and our knowledge from previous classes.

My approach began with crafting an array of circles. Initially, I programmed the display of 10 circles at random locations on the screen. However, to add an interactive element, I modified the code so that numerous circles would appear with each mouse click.

The circles are endowed with distinct properties like colors, speeds, and diameters. I achieved this by employing a random function that assigns different values randomly. This randomness adds variety, ensuring each circle appears unique with its own color, speed, and diameter, enhancing the overall visual appeal of the artwork.

To bring these circles to life, I employed a for loop to create and animate them. I made sure they stayed within the designated canvas space by setting limits on their movement preventing them from disappearing off-screen.

As the artwork evolved, I noticed that the screen became somewhat cluttered after multiple attempts by a user to create circles. To address this, I introduced an option allowing users to clear the screen by pressing the ‘c’ key. This feature enabled users to start afresh without needing to manually restart the entire program.

// Declares a variable and initializes it as an empty array
let circles = [];

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(220);

  // generate circles on mouse click
  if (mouseIsPressed) {
//   create a circle 
    let newCircle = {
      x: mouseX,
      y: mouseY,
      diameter: random(10, 50),
      speedX: random(-2, 2),
      speedY: random(-2, 2),
      // Generate random color
      r: random(255),
      g: random(255),
      b: random(255)
    };
    // Newly created circle object is added to the circles array
    circles.push(newCircle);
  }

  // This for loop iterates over each circle object stored in the circles array and updates its position
  for (let i = 0; i < circles.length; i++) {
    circles[i].x += circles[i].speedX;
    circles[i].y += circles[i].speedY;

    // Bounce off walls
    if (circles[i].x <= 0 || circles[i].x >= width) {
      circles[i].speedX *= -1;
    }
    if (circles[i].y <= 0 || circles[i].y >= height) {
      circles[i].speedY *= -1;
    }

    // Set fill color
    fill(circles[i].r, circles[i].g, circles[i].b);
    // Draw circle
    ellipse(circles[i].x, circles[i].y, circles[i].diameter);
  }
}

function keyPressed() {
  // Clear the circles array when the 'c' key is pressed
  if (key === 'c' || key === 'C') {
    circles = [];
  }
}

Reflections:

I thoroughly enjoyed working on this project, drawing mainly from the knowledge acquired in class. However, I felt compelled to explore further, leading me to incorporate an additional function into the code. This experience not only allowed me to apply class learnings but also pushed me to expand my understanding. Moving forward, I am excited about the possibility of engaging with more advanced projects, leveraging a broader knowledge base to enhance my skills.

I enjoyed Casey Reas’s talk more than I expected I would. Although the presentation is from 2012, I think the talk is more important than ever in the new rise of Generative AI arts. In his talk, he explained his work, which utilizes chance operations and algorithms to create visual outcomes, and claimed these demonstrate the tension between order and chaos. However, the more I looked at his works, the more I felt the presence of an emerging order or pattern out of the caos. I think this just further exemplifies the quintessential human endeavor to find coherence in chaos. The technical difficulties of achieving randomness and the limitations of noise in the arts have been explored quite well in the talk, raising the question of whether it is truly possible to generate randomness with technology where everything is bound by the code. Reas’s assertion, “Artists maintain order in the face of nature,” stuck with me throughout the talk. And this assertion again questions the ownership of the generative AI arts: is the AI or the person behind the model trying to maintain that order?

Concept

The assignment was to create an artwork using loops in p5.js. I started by experimenting on a canvas size of 500 by 400, by using various shapes and incorporating them to a for loop, for it to be randomly appearing on the canvas. I used Circles, ellipses and rectangles, looped them in such a way that they appear randomly on the canvas with different sizes and colors.

To make it even more interactive, I added a bouncing red ball. When you click on the mouse, the ball starts bouncing from one side of the canvas to the other, and I also increased the frame rate so that when the mouse is clicked, the loop speeds up, making the artwork feel alive and engaging. Overall, I wanted to make something visually interesting that you can interact with, and I had a lot of fun experimenting with loops and movements!

A highlight of some code that you’re particularly proud of

//loop for the generation of random shapes
 for(let i=0; i<80;i++){
   frameRate(2); // generation of shapes slows down
   
   //initializing
   let c= random(width);
   let d= random(height);
   let size1= random(10,100);
   let size2= random(10,50);
   
   // initializing random color
   let r= random(50);
   let g= random(50,225);
   let b= random(50,255);
   
   fill(r,g,b); //random colors of shapes
   //shapes
   circle(c,d,50,50);
   ellipse(c,d,size2,size1);
   rect(c,d,size2,size1);
 }

Embedded sketch

Reflection and ideas for future work or improvements

I want to make it more colorful and add more user interactivity to it, not just the bouncing ball.