Category: Spring 2024 – Aya (Section 003)

Idea and Inspiration:

My piece of art aims to create an interactive garden where viewers can witness blossoming flowers and fluttering butterflies. I love nature and I wanted to make a tribute to gardens. At home, my mom and I spend hours working in the garden, it is our bonding time. This project is inspired by nature and the delight of immersing in the sensory experiences of a tranquil garden.

Code that I am proud of: 

grow() {
  if (!this.fullGrown) {
    this.size += this.growthRate;
    if (this.size >= 90) {
      this.fullGrown = true;

followMouse() {
   if (mouseIsPressed) {
     let angle = atan2(mouseY - this.y, mouseX - this.x);
     this.vx = cos(angle) * 3;
     this.vy = sin(angle) * 3;

 

Sketch: 

Difficulties: 

First of all, it was complicated to get the classes in order. It was not working as they were all in random positions. I had to change the names to numbers so that it was in the correct order.

Secondly, I wanted the flower to expand. So I searched in the internet the function to do it. “https://editor.p5js.org/amcc/sketches/3ZLqytY_4”

Thirdly, I wanted to do something interactive with the MousePress option. These lines of code use the atan2() function to determine the angle between the butterfly’s current position and the location of the mouse pointer. Next, they calculate the velocity vector’s horizontal and vertical components using the trigonometric functions cos() and sin(). These results are scaled by a factor of three to determine the butterfly’s speed as it follows the mouse pointer.

followMouse() {
   if (mouseIsPressed) {
     let angle = atan2(mouseY - this.y, mouseX - this.x);
     this.vx = cos(angle) * 3;
     this.vy = sin(angle) * 3;

Improvements: 

I am pretty proud of the work. I spend a lot of time figuring everything out. For improvements, I would like the butterflies to look more real. Adding stripes inside the body.

I think it would also be cool if the flowers after a certain amount of time they disappeared.

 

Chris Crawford’s approach to explaining interactivity was something that struck me as it is not something I considered before. Crawford repeatedly likened interactivity to a conversation, one between users and systems. What I found really interesting about the way Crawford described interactivity is the fact that he showcased a somewhat strong relationship between the two. This kind of relationship goes beyond what I was accustomed to, which is that interactivity between users and systems was merely input-output interactions. In a sense, reading this challenged my preconceived notions about interactivity as it forced me to see how both users and systems actively engage and influence each other, making interactivity more dynamic than I thought it was. 

 

Although I appreciate the perspective Crawford brings in regards to the analogy of interactivity as a conversation, I still think that the author oversimplified  the nature of interactivity. Yes, Crawford showcased the dynamics and complexities of the interactions between users and systems. However, I feel like the way he showcased these interactions tended to be idealized, in a sense. The analogy of conversation made it seem as if there was seamless interaction happening between users and systems, which in reality is not the case. This disrupts the very same “flow” of interaction Crawford brought up in the chapter in regards to interactivity design. This made me question the practicality of Crawford’s analogy in interactive systems in the real world, particularly in regards to its ability to accommodate to different challenges that might appear when discussing the concept of interactivity. Thus, even if the concept of interactivity as highlighted by Crawford brought about an interesting perspective on the concept,  I still believe that, to a certain degree, Crawford needs to address the complexities that underlie the concept he speaks of throughout this chapter. 

Concept

I wanted to create a simple image of myself with some level of user interaction . I started off by trying to use basic shapes to create the eyes, ears, nose and mouth of the self portrait . I realized knowing the coordinates accurately would save a lot of time spent in trial and error , so I added a small piece of code to display the mouse coordinates at the bottom of the canvas . This was very useful and saved a lot of time in positioning the shapes. For user interaction , I implemented two types of backgrounds – day and night –  that switch when mouse is clicked.

The Embedded Sketch is below :

 

Highlight of Code I am Proud of 

The code for generating stars in a different random pattern every time the scene shifts to night is something that I thought was cool to implement .

 //What happens when mouse is clicked
function mouseClicked(){
  isDay=!isDay;
  //The following piece of code ensures that the stars are at new positions 
  //everytime the mouse is clicked
  Stars=[];
  for(let i=0;i<50;i++){
    let x= random(height);
    let y=random(width);
    Stars.push(createVector(x,y));
  }
}

.
.
.
//draw() function
//Stars
    fill(250);
    noStroke();
    for(let i=0;i<Stars.length;i++){
      let Star=Stars[i]; //Star is variable of type Vector
      ellipse(Star.x,Star.y,2,2)
    }

Another Implementation that I am proud of is the drawClouds() function that takes cloud coordinates and size as inputs and draws clouds accordingly .

function drawCloud(x, y, size) {
  fill(255);
  noStroke();
  ellipse(x, y, size, size * 0.7);
  ellipse(x + size * 0.5, y, size, size * 0.7);
  ellipse(x - size * 0.5, y, size, size * 0.7);
  ellipse(x, y + size * 0.3, size, size * 0.7);
}

Reflections and Ideas for Future Work

Overall, I think it turned out to be a good initial exercise with p5 and I got a simplistic self image using basic geometry which is what  I had envisioned while starting with the project  . In future projects, I would love to add animations and even more user interaction . Maybe different backgrounds could also be added and something about the portrait itself can be changed when the background changes .

I look forward to improving my skills and making more realistic images /graphics  .

going back to the first assignment, creating a portrait of an alien with stars popping in the back of the head. I took the starry night background and tried to enhance it so i can create an artwork pulling it out from the first assignment.  At the beginning I tried to make it animated and the stars move horizontally in the canvas but It was challenging for me and faced a lot of errors. but I thought of making it still within the canvas and give it a twinkle effect, by the help of a youtube video, I was able to create the starry night and the twinkle effect. I faced a challenge with the format of the canvas that if I add 44 to the width it doesn’t fully appear on the web, even with the previous assignment. 

let stars = [];
let numStars = 200; 

function setup() {
  createCanvas(800, 644);
  for (let i = 0; i < numStars; i++) {
    stars.push(new Star()); // Create and add stars 
  }
}

function draw() {
  background(18, 18, 30); // dark blue sky
  stars.forEach(star => {
    star.twinkle(); // Update star properties for twinkle effect
    star.move(); // Move the star slightly
    star.show(); // Display the star
  });
}

class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.25, 3);
    this.brightness = random(150, 255);
  }
  
  move() {
   
    this.x += random(-1, 1);
    this.y += random(-1, 1);
    // Keep stars in canvas
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }
  
  twinkle() {
    // twinkling
    this.size = random(0.25, 3);
    this.brightness = random(150, 255);
  }
  
  show() {
    noStroke();
    fill(this.brightness);
    circle(this.x, this.y, this.size);
  }
}

 

Reflection:

I found this assignment very helpful in terms of pulling something I built before and enhancing it to become a new artwork and apply the new things we learnt in class is an effective way of learning.

 

 

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?