Category: Spring 2024 – Aaron (Section 001)

Concept:

When I got the assignment, I wanted to better practice for loops without getting bogged down by any complex shapes. So while sifting through the computer generated art provided I found the above mentioned screenshot that met my desires “ProgrammInformation21_PI21.pdf”, specifically the kind that mimics cracked glass. It felt like a neat way to meet the assignment’s goals and still let my creativity loose. My aim was to accomplish the main goal of the assignment and then actually playing around .

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

let numberOfSplatters = 15;
    
    // Loop through the number of splatters
    for (let i = 0; i < numberOfSplatters; i++) {
      // Random position for each splatter
      let x = random(width);
      let y = random(height);
      push(); 
      translate(x, y); 
      
      // Number of lines in each splatter
      let numberOfLines = random(20, 40);
      
      // Lines Circle around to make a pack
      for (let j = 0; j < numberOfLines; j++) {
        // Random angle for each line
        let angle = random(TWO_PI); 
        // Random length for each line
        let length = random(20, 60); 
        let x2 = cos(angle) * length;
        let y2 = sin(angle) * length;
        // Different stroke thickness
        strokeWeight(random(1,3)); 
        line(0, 0, x2, y2); 
      }

Embedded sketch:

V2: Experimental:

 

Reflection and ideas for future work or improvements:

For the future, I’m setting my sights on tackling more complex shapes and honing my skills to create a 3D illusion that responds to mouse movements, much like the examples demonstrated in class. This challenge excites me as it combines technical precision with interactive elements, offering a richer experience for the user. By diving deeper into these advanced techniques, I aim to enhance my understanding and creativity in computer-generated art, pushing my projects to new heights.

I also recognize the need to evolve my approach to the creative aspect of my assignments. It’s clear to me now that pushing my boundaries isn’t just about technical complexity but also about daring to be more innovative and original in my concepts. Embracing this mindset means looking beyond conventional ideas and experimenting with how my work can engage, surprise, and captivate in new ways. I’m committed to not only expanding my technical toolkit but also to challenging my creative limits, ensuring that my future projects are not just technically sound but also creatively compelling.

Concept

My initial concept revolved around a static canvas featuring a variety of monochromatic circles and semicircles. This art was similar to “Structure” by Z.Sykora. Once I could achieve randomness in this static art piece by having different sizes of circles and semi-circles, the concept underwent substantial changes. The idea was a dynamic, living piece of art in which various circles, each unique in size, color, and placement, vibrate across the canvas depending on the mouse’s motion. This art piece also uses mapping (map) and linear interpolation (lerp) methods.

Inspiration

Initial Sketch

Final Sketch

The interactive drawing portrays balls as circles with different sizes and colors, similar to the colorful spheres in a ball pit. In this art,  the color and size changes mimic the visually stimulating atmosphere of an actual ball pit.

Code

The circle colors will be interpolated using lerpValue, whose starting value is set to 0. The color is randomly assigned.

fill(lerpColor(circle.color, color(random(255), random(255), random(255)), circle.lerpValue));
ellipse(circle.x, circle.y, circle.radius * 2);

The fill function applies a color transition between the current color and a new random color by using lerpColor to set the color of the circle. The lerpValue function controls the transition; it gradually increases to provide the impression of a progressive color change, similar to the varying reflections in a ball pit.

let newMaxSize = map(mouseX, 0, width, minSize, maxSize);
circle.radius = lerp(circle.radius, targetRadius, 0.1);

The mouseMoved function uses the mouse’s x-coordinate to change the circle sizes. It converts the x-coordinate to a new circle maximum size. The size of each circle is then progressively adjusted toward this new goal size using the Lerp function. Here, abrupt changes in size are avoided and the interaction is smoothed down by using the lerp function to interpolate between the existing size and the new size. The interpolation factor that controls the transition’s pace is the third parameter (0.1 value). This indicates that the circle’s radius will only move 10% closer to the desired radius with each call to mouseMoved. This prevents a sudden shift in size and instead produces a gradual resizing effect as the mouse goes.

let circles = [];
let maxSize = 80; // Maximum size for the circles
let minSize = 20; // Minimum size for the circles

function setup() {
    createCanvas(800, 800);
    background(0);
    noLoop(); 

    // Initialize circles with random positions, sizes, and colors
    for (let i = 0; i < 100; i++) {
        let circle = {
            x: random(width),
            y: random(height),
            radius: random(minSize, maxSize), // Random radius for variety
            color: color(random(255), random(255), random(255)), // Random fill color
            lerpValue: 0 // To keep track of color interpolation
        };
        circles.push(circle);
    }
}

function draw() {
    // Clear the background without changing its color
    clear();
    background(0);

    for (let circle of circles) {
        // Interpolate to the next color
        if (circle.lerpValue >= 1) {
            circle.color = color(random(255), random(255), random(255));
            circle.lerpValue = 0;
        }

        // Draw each circle
        fill(lerpColor(circle.color, color(random(255), random(255), random(255)), circle.lerpValue));
        noStroke();
        ellipse(circle.x, circle.y, circle.radius * 2);
        
        // Slowly increment the lerp value
        circle.lerpValue += 0.005;
    }
}
function mouseMoved() {
    // Use mouse X position to scale the radius of each circle
    let newMaxSize = map(mouseX, 0, width, minSize, maxSize);
    for (let circle of circles) {
        // Smoothly interpolate the radius
        let targetRadius = random(minSize, newMaxSize);
        circle.radius = lerp(circle.radius, targetRadius, 0.1); // 0.1 is the lerp amount for smoothing
    }
    redraw(); // Redraw the canvas with new sizes
}

Challenges

The “vibration” effect of the circles relied on linear interpolation(Lerp). The difficult part turned out that adjusting the Lerp factor required careful balancing; if it was set too high, the animation’s smoothness would be disrupted by the circles changing size too quickly. If it’s too low, the changes won’t be noticeable and won’t portray the vibrant engagement that’s intended. Finding the optimal value where the interpolation produced the ideal pace of size variations was the difficult part.

Reflections and Improvements 

The assignment was a great learning experience. This week’s reading response was on chance operations by Casey Raes. That talk made me ponder if I can do something similar where the steps of an algorithm have controlled randomness to produce an art piece. My making the art piece above made me realize the main motive behind Casey Raes’ talk.

In my opinion, there is still some room for improvement in the art piece. I might modify this art piece to vibrate and transition into different shapes smoothly. That would be an effective effect yet calming.

For this assignment I took inspiration from the 1966 Version of ProgrammInformation21 which is written in German and luckily I have been learning German for over 6 years now. The piece I was initially interested is this one:

Initially I created the circles and added a little bit of noise but it was too simplistic for my liking so I decided to make the circles come out from one of the edges of the canvas. After doing that I noticed that the circles kind of reminded me of a meteor so I started creating a concept of a meteor heading towards earth.  That lead to me “inventing” the piece code I am most proud of. It looks like this:

for (let i = 70; i < 3000; i += 30) {
    strokeWeight(5);
    let noiseFactor = 5;
    let posX = mouseX - i + random(-noiseFactor, noiseFactor);
    let posY = mouseY - i + random(-noiseFactor, noiseFactor);
    if (i == 70) {
      fill(92, 64, 51);
      circle(posX, posY, i);
    } else if (i > 70 && i < 150) {
      fill(255, 255, 0);
      circle(posX, posY, i);
    } else if (i > 150 && i < 450) {
      fill(255, 165, 0);
      circle(posX, posY, i);
    } else {
      fill(255, 0, 0);
      circle(posX, posY, i);
    }
  }

I wanted to add stars in the background that would be randomized and different every time someone runs the code and in order to make it static compared to the other elements of the canvas I needed to draw on a different buffer. It was also fun to add the element of surprise so now every time we click on the mouse button Earth changes into a random color. The final product looks like this:

I also added a little satelitte which rotates around Earth and adds another layer of animation.

Further improvements can be done and more interesting animations can be added. For the moment I already feel like I am overcrowding the screen with elements a little bit, so I decided not to add any more complexity.

After looking for some inspiration from the books that we were assigned to look at, I have found one that was realistically possible for me to recreate. Even though the ones in the book were very interesting looking, I decided to take a different direction and make it my own in a way.

I have got to admit, I needed help from the internet. So, I started watching some tutorials on how to make it.

After some hours, this was the outcome!

As you can see, they are slightly decreasing by almost each line. At first, they had a triangle shape but I tried to zoom them in to make this effect.

It was a little bit difficult to understand the algorithm but once I got it I was able to make this.

I named it ‘Bubble staircase’ because I thought it fits the theme pretty well!

 

Doing this assignment, I did not have something in mind and I just wanted to explore and play around with creations I could make. Eventually, I ended up using a loop to make lines, which formed a rather interesting shape. I decided to go with that, but I did not want to submit a random creation of complex lines, so I started exploring what I could do to make something out of these lines. After experimenting with movement, I decided to go with an inescapable prison where the harder the person tries to escape, the faster the movement gets.

 

This is my very first time experimenting with an interactive element. It was very simple to apply. However, I am very proud of myself for adding that element.

I am proud of everything on the canvas. I did have to search up how I could have the background change colors and that took a whilr to figure out. While this creation is not perfect, I still deeply love it.

//   Lines
  for (let x = 0; x <= width; x += 50) {
    for (let y = 0; y <= height; y += 50) {
      line(lineX, y, x, lineY);
    }
  }
  //Speed up when mouse is pressed
  if (mouseIsPressed) {
    lineSpeedX = lineSpeedX + 1;
    lineSpeedY = lineSpeedY + 1;
  }
  // Move the lines horizontally and vertically
  lineX += lineSpeedX;
  lineY += lineSpeedY;

  // Reverse direction when hitting the canvas edges and change colors
  if (lineX > width || lineX < 0) {
    lineSpeedX *= -1;
    stroke(random(255), random(255), random(255));
  }
  if (lineY > height || lineY < 0) {
    lineSpeedY *= -1;
    stroke(random(255), random(255), random(255));
  }
}

Reflection:

I had so much fun playing around with code and discovering new ways to implement interaction with creations. I am excited to delve deeper and to find out what this course has in store for me.

Casey Reas initiates profound contemplation on the dynamic interplay between order and chaos within the realm of art. He talks about randomness, from changes in physics to using it on purpose in art, challenging what we usually think about in art. Reas has a way of making art through three steps: form + behaviors = elements, and he calls it “precise geometry,” which adds an interesting twist to how he creates.

In some cases, people worry that digital art messes with how artists express themselves because it’s unpredictable. But Reas introduces the idea of “controlled randomness.” and with this concept, he sets some rules but lets things surprise him, and it gives the art he produces a unique twist. In addition to this, randomness gives artists a sense of control and makes art more diverse and fun.

Thinking about it later, there’s a real rethink about assuming digital art messes up an artist’s message due to its unpredictability. Reas stresses “ordered randomness,” showing how artists control the code but also add surprise with random bits. It’s like a balance between control and unpredictability, uncovering a deeper side to digital art.

Reas’ insights on randomness in art had my mind filled with ideas. When he described the paradigm shift from order to uncertainty in physics and culture, I realized I had falsely assumed randomness was somehow “less intentional” in creative work. Tracing how artists have deliberately experimented with chance way before coding was even possible blew open my assumptions even further. 

I love how Reas constantly tries to balance structure and surprise within his algorithms for that sweet spot of organized chaos. Like how adding a smidge of noise to those otherwise uniform lines in “process 18” made the composition pop with organic energy. You could vividly see homeostasis at play. I also loved seeing the psychedelic patterns generated from the 10 Print Commodore program. I had childhood flashbacks to PC screen savers!

It intrigued me to learn Reas often repurposes snippets of code from other pieces to birth totally new visuals. His “Written Images” with its ever-morphing permutations seems like a concept that has potential for everything from music videos to merch design. As someone getting more into creative coding and graphic design, I find Reas’ perspectives hugely inspiring. The intersection of algorithms and chance is such a rich territory for innovation. Rules exist to be broken!

By engineering the tango between random and restrained, predictable and unprecedented, Reas’ work made me recognize chaos as creation rather than destruction. I’m now excited to further explore similar computational art by pushing boundaries and creating creative messes. 

 

Overall Reflections

After watching the video of Casey Raes it made me wonder about the difference between a traditional artist who draws by hand and a digital artist who generates art using code (algorithm). When making art with hand, the strokes in every painting show that this art/concept belongs to this artist. Whereas the algorithmically generated art can be of different styles by the same artist. So does digital art generated by ordered randomness broaden the artist’s capabilities and style of work? Or does it limit the artist’s personal touch? 

Intriguing Piece 

The art piece that was intriguing to me was when art was integrated with coding and fashion. I was surprised by how modern digital art can have an impact on other fields. The design of the dresses was very unique and appealing. I feel like this integration will give fashion designers a new spectrum of ideas. 

Takeaway

What I initially thought was that the message of the artist may be compromised by digital art’s unpredictability. The art generated is through ordered randomness. The artist is the one who has control over the code and sets the order of the algorithm. However, the art is unpredictable due to random variables. So to check my theory I dedicated this week’s assignment to the theme of ordered randomness. I got to know that the artist has control over their art piece based on how systematic the algorithm is and how often randomness is given control. I even realized how famous artist Jackson Pollock embraced the concept of chance in the art pieces where he made his pieces by splattering and pouring paint over canvases while depending on chance.

In the realm of art, I’ve always held the belief that meaning and visuals represent distinct aspects when appreciating art. My beliefs on the future of art invariably swerved towards visions of lights and interactivity, sidelining the pursuit of deeper meaning, and that is admitted, as I was ignorant of that aspect. However, my perspective was broadened during Casey Reas’s presentation. He introduced various artworks generated through algorithms, a concept that initially aligned with my thought process. Yet, it was his showcase of “Signals” that actually took me back. This piece, illustrating the interaction of protein cells within a cancer cell, not only expanded my appreciation of the intersection between technology and art but also underscored the profound potential for meaning in such intersections, bridging my gap in understanding and igniting a newfound appreciation for the depth of art’s potential.

 

Throughout the presentation, the only question that came to mind was whether any of these pieces of art match old artifacts regarding their value in terms of history. If, hypothetically, our civilization were to vanish overnight, leaving these modern creations as remnants for future generations to discover, how would they interpret them? Would they perceive these pieces as remnants of an extinct religion, or would they recognize them as artistic expressions? This question only comes to me because I wouldn’t personally understand any of it without reading the description or having someone explain what the artist meant by it.

For this assignment, I am not sure I drew my inspiration from the right place; I ended up being inspired by the Club Penguin dance floor. For some reason, while playing around with different-sized squares in p5js, that was all I remembered when I aligned them.

For reference:

The sketch:

While it isn’t the same proportions as the Club Penguin dance floor, It was because I wanted it to be more visually appealing with the size. After all, this is supposed to be an art piece…

let numTiles = 10; // Number of tiles across and down
let tileWidth;
let tileHeight;
let colors = [];

function setup() {
  createCanvas(600, 600);
  tileWidth = width / numTiles;
  tileHeight = height / numTiles;

  // Initialize colors array with bright colors
  for (let y = 0; y < numTiles; y++) {
    colors[y] = []; // Create a nested array for each row
    for (let x = 0; x < numTiles; x++) {
      colors[y][x] = color(random(255), random(255), random(255), 255);
    }
  }

  frameRate(10);
}

function draw() {
  for (let y = 0; y < numTiles; y++) {
    for (let x = 0; x < numTiles; x++) {
      // Randomly change the color of each tile to mimic the dance floor lighting effect
      if (random() < 0.1) { // 10% chance to change color each frame
        colors[y][x] = color(random(255), random(255), random(255), 255);
      }
      
      fill(colors[y][x]);
      rect(x * tileWidth, y * tileHeight, tileWidth, tileHeight);
    }
  }
}

I would say the effect function confused me so often when it came to understanding it because I didn’t want the colors to change so frequently. Still, also the issue that came up was the sketches I had taken down in class did not fully explain how things worked when it came to the randomness part and how quickly it would change, so hopefully, in the upcoming classes, I will get better at note taking so that when it comes to coding, I get to understand it better when I go back and take a look at it.