Category: Spring 2024 – Aaron (Section 001)

RECREATION & CONCEPTUALIZATION

For this assignment, my goal was to recreate Herbert Franke’s artwork, “Random Square” from COMPUTER GRAPHICS AND ART May1976 (page 6), using p5.js as accurately as possible. Inspired by Franke’s collaboration with Georg Färber, where Färber utilized computer systems at the University of Munich to generate intricate plots based on dates provided by the artist, my goal was to capture the nature of the original piece by utilizing loops based on random coordinates within a specific range.

Code Highlight

function checkOverlap(x, y, rectangles) {
  for (let i = 0; i < rectangles.length; i++) {
    let { x: rectX, y: rectY, w: rectW, h: rectH } = rectangles[i];
    if (dist(x, y, rectX, rectY) < (rectW + rectH) / 2) {
      return true; //this means overlapping
    }
  }
  return false; //this means not overlapping
}

One aspect of the code that I take pride in is the implementation of a function that checks for (coordinate) overlaps using boolean statements. Initially, the large black rectangles were overlapping, which, to me, was distracting and not aesthetically pleasing, as they are naturally the first thing you see. This function is triggered every time the screen is clicked, causing the rectangles, both large and small, to rearrange themselves according to the specified conditions.

Challenges & Reflection

Initially, I generated black squares of different sizes at randomized locations, relying solely on the provided PDF link. However, with further research about the art piece, I realized it wasn’t a black & white piece but rather a colorful one, resembling the colors of a Starburst in my opinion! Once I came to the realization, I used the colors yellow, pink, and black and played with the opacity of the pink squares to achieve a similar effect when overlapped with yellow. Also, as I was randomizing the size of each square, I later noticed that each color had a specific size, with pink being the smallest and black the largest. You could see that every time I thought I was done, I noticed a slight detail that I had missed.

At first glance, the artwork didn’t seem to have much depth; it appeared like random squares on the screen. However, after looking into the artist’s background and understanding the process behind the artwork, I realized the significant time investment required to create such a piece. One aspect I would like to improve or explore in the next iteration of my attempt is to move away from the literal randomization of coordinates. Instead, I would like to make them dependent on meaningful factors such as dates, NETids, or other elements that can add more meaning.

Casey Reas’ Eyeo talk on chance operations opened my eyes to a fascinating realm where art and randomness converge. The discussion around the dynamic interplay between order and chaos in art challenges conventional perceptions. Reas introduces the concept of “controlled randomness,” emphasizing the artist’s ability to set rules while allowing for surprises, ultimately contributing a unique twist to the art produced.

What struck me was the initial concern about digital art disrupting artistic expression due to its unpredictability. However, Reas showcases the idea of “ordered randomness,” demonstrating how artists can maintain control over the code while infusing an element of surprise. This not only adds diversity and excitement to art but also challenges preconceived notions about the medium.

The reading also sparked a thoughtful reflection on the difference between traditional hand-drawn art and algorithmically generated digital art. Casey Reas’ Eyeo talk not only expanded my understanding of the intricate relationship between order and chaos in art but also inspired me to explore the creative possibilities within the realm of digital art and coding. The presentation challenged stereotypes, fostering a deeper appreciation for the intentional and meaningful aspects of randomness in artistic expression.

Jihad Jammal

Intro to IM

Professor Aaron Sherwood

Reading Reflection Week 3

Feb. 5, 2024

Controlled Randomness at the Intersection of Programming and Creativity

After watching the video, my understanding of digital art has been significantly broadened by the concept of “controlled randomness”, especially with the intersection of computer programming and creative exploration. Reas’s explanation, where he describes the process of “simply flipping a coin and drawing a left or right but it creates this pattern where we have open areas and closed areas; it becomes vaguely maze-like, and we are able to approach computing from many different angles just from using a single program,” (31:10 – 32:00) eloquently captures the essence of this innovative method. Because the “controlled randomness” methodology uses unpredictability as a basis for creativity in a digital world that is normally perceived as a rigid and unchanging medium, it has changed my understanding of what may be deemed artistic creation/expression. While I understood that art might be highly personal to the individual, I had always thought of art as a clear expression of the artist’s intention, as seen in the brushstrokes or the chiseled stone. Reas’s work, on the other hand, offers a convincing alternative by demonstrating how artists can create the conditions for chance to occur within limitations, so questioning traditional ideas of artistry and emphasizing the special possibilities that arise from the collaboration of computational processes and human creativity.

Furthermore, Reas’s assertion sheds light on how well-managed randomness can act as a link between the fluidity of artistic expression and the deterministic character of code. This combination elevates programming languages from being only tools to being active players in the creation of art, encouraging a deeper reflection on the creative possibilities they possess. It is both illuminating and encouraging to see that intricate, visually beautiful patterns with substantial artistic value can be produced by basic code. It opens up new avenues for artists to investigate the dynamics of order and chaos, intention, and chance by extending the creative canvas beyond conventional media. As such there is a great deal of room for creativity at any skill level when it comes to transforming computer engineering tools for creative expression, especially now that it is known that specialized equipment is not necessary.

Citations:

Festival, E. (2012). Eyeo2012 – Casey Reas. [online] Vimeo. Available at: https://vimeo.com/45851523 [Accessed 5 Feb. 2024].

‌

In approaching this assignment, my initial inspiration stemmed from the intricate illustrations found in “Homage to the Squares Derivations.” However, faced with the complexity of the original concept, I decided to pivot and explore a different avenue. The revised plan led me to create a captivating Turing wheel illusion. By incorporating concentric rotating squares and pentagons, I aimed to convey a dynamic and visually intriguing composition. The shifting background color, coupled with the varying transparency levels, adds depth and dimension to the artwork. This reinterpretation allowed me to explore the interplay of shapes, colors, and optical illusions in a way that both challenges and engages the viewer.

To bring this idea to life, to code a series of concentric rotating squares and pentagons. The choice of concentric shapes creates a compelling visual hierarchy, with each layer featuring a unique size and rotation speed. The background color dynamically changes, providing an additional layer of visual interest.

The decision to incorporate transparency in both the squares and pentagons enhances the illusion, adding a nuanced play of light and shadow to the composition. This not only introduces an element of depth but also offers viewers a captivating visual experience as they observe the interplay of shapes and colors.

In essence, the assignment became an exploration of the balance between complexity and accessibility, as well as a study in the visual aesthetics derived from the juxtaposition of rotating geometric forms.

let angle = 0;
let bgColor = 0;
let colorChange = 1;
let numSquares = 8; // Number of rotating squares
let squareSize = 100; // Initial size of the squares
let numPentagons = 12; // Number of rotating pentagons

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  angleMode(DEGREES);
}

function draw() {
  // Shift background color
  bgColor += colorChange;
  if (bgColor > 255 || bgColor < 0) {
    colorChange *= -1;
    bgColor = constrain(bgColor, 0, 255);
  }

  background(bgColor);

  // rotating squares and pentagons
  push();
  translate(width / 2, height / 2);

  
  for (let i = numSquares; i > 0; i--) {
    push();
    let alpha = map(i, 1, numSquares, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numSquares - i + 1)); //  rotation speed 
    let size = squareSize * i;
    square(0, 0, size);
    pop();
  }

  
  for (let i = numPentagons; i > 0; i--) {
    push();
    let alpha = map(i, 1, numPentagons, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numPentagons - i + 1)); //rotation speed for each pentagon
    drawPentagon(0, 0, 40 * i);
    pop();
  }

  pop();

  angle += 0.5; // rotation speed 
}

function drawPentagon(x, y, radius) {
  beginShape();
  for (let i = 0; i < 5; i++) {
    let angle = map(i, 0, 5, 0, 360);
    let px = x + cos(angle) * radius;
    let py = y + sin(angle) * radius;
    vertex(px, py);
  }
  endShape(CLOSE);
}

[⚠️ Trigger Warning: This article uses intense, hyperbolic language and metaphors for dramatic effect, otherwise my high school English literature class is a waste. Reader discretion advised.]

Let’s get down to business.

Below is the p5 sketch, click 👆 anywhere to “introduce chaos” within the system.

In case p5js Editor website is down, below is the recording of working demo on YouTube.

TL;DR : Conceptualization

Against Entropy is a self-organizing system simulated in p5.js, where you play as the point of view of the universe, giving the system “problems” or “disturbances” – and the system will simply not care about any of your attempts to create problems, and will effortlessly restore the order, and get things working in no time.

1) 🤔 Long-Winded Conceptualization

This artwork is a direct response to Casey Reas’s Talk. I am confused by his appreciation for chaos and randomness. I hate chaos and unpredictability – just imagine growing up in a country with only 4ish hours of daily electricity, without knowing when it will be cut off… your computer just shut down, all your day’s work unsaved…year after year .

“I hate chaos and unpredictability…Chaos is usually the enemy of my heartblood… aesthetics and practicality”

~ Pi

My brain is simple. Things in life need to 1)  work practically – even in impossible situations and 2) be extremely beautiful. Anything which leads to these, I utilize any means to achieve them. Anything which prevents these, I avoid. Chaos is usually the enemy of my heartblood… aesthetics and practicality.

Chaos gives rise to unreliable systems. Unreliable systems are the worst, and they kill lives.  Systems need to work. When they fail, they need to restore themselves to working state.

Systems need to work. When they fail, they need to restore themselves to working state automatically.

~ Pi

Unless such unreliable systems result in extreme aesthetics (as exemplified by Casey Reas), or exhibits tangible practicality (such as in pseudorandom number generators utilized for encryption), or achieves both, it must be annihilated, eradicated, and exterminated through merciless massacre, carried out in the coldest blood and with “negative” empathy and iron fist, then shot twice and bayonetted to guarantee its complete cessation of existence.

This is how much I disgust unreliable systems.

And the professor taught loops and randomness today. And I am feeling swarm robotics these days. So, I needed a system which:

1. Restores back to working state
2. Uses randomness and
3. Use Loops
4. And of course, the cool swarms

Hence the piece “Against Entropy” is born.

i = 0x5f3759df - ( i >> 1 );

2) ⚙️ Technical Plan of Attack & Implementation

The code I am very proud of is of course, the use of loops. Because this piece is about editing the behaviour of a large group of entities, it is all loops over and over again.

//On line 57
for (let i = 0; i < NUM_GROUPS; i++) {
  swarms.push(
    Array.from(
      { length: SWARM_SIZE }, ...

//On line 141
for (let i = 0; i < points.length; i++) {...

// On line 332, this is the blast modelling, without the loops, I will have to write code for each entity in the swarm 😱😱😱
repel() {
    for (let swarm of swarms) {
      for (let entity of swarm) {
        let distance = p5.Vector.dist(entity.location, this.location);
        if (distance <= this.radius * 1.8) {...
// ... and so on

Also, the professor told us that using some random() is appreciated, so here are some randomness…

// When initializing the entities in the swarm, I utilized the random function such as
    swarms.push(
      Array.from(
        { length: SWARM_SIZE },
        () => new Entity(random(width), random(height), i)
      )
    );

Having implemented loops and randomness, let’s add some simple minor details 👌.

The algorithm to simulate a swarm of self-organizing organisms/entities is called the BOIDs algorithm. In human language, to implement a swarm cluster of self-organizing organisms, you just need to tell them to always move toward a goal, and not hit each other.  I also wanted explosions to disturb these swarms, so I lay down the laws of my universe in human language as –

1. Never get lost. (a.k.a Always have a goal)
2. Don’t bump into each other.
3. Explosions are dangerous, run away from them.

Then sprinkle some maths magic and convert the rules into a viable model as follows, to get one cluster of swarm with n entities which follows one target :

Seeking Behaviour (a.k.a Always have a goal)

Separation Behavior (a.k.a Don’t bump into each other)

Acceleration and Velocity Update


Blast Interaction (a.k.a Explosions are dangerous, run away from them)

To model the explosion, I just have a linear force model.  Easy peasy lemon squeezy 🍋.

Monitoring Chaos of the System

I am also quantifying chaos of the system using average distance of entities to the center. This allows me to tie the rest of the system (audio,colors) to the state of the system. It goes red when chaotic, and green when in order. The chaos is formally defined as
The Stable Chaos Value is the radius of the swarm circle to the origin of the circle. This is because if the average distance of all particles to the center is the same as the radius of the circle, it means the particles are on average, more or less moving in a perfect circle, and hence more organized and less chaotic. As blasts occurs, they are more scattered, average distance increases, and hence chaos value rises.

The formal definitions of funky symbols above are

$latex i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>$

Self Organizing Behaviour by expanding number of clusters

Then to give a self organizing behaviour as a ring, I just create an array of clusters where each entities in each cluster follows the corresponding target, and these targets rotate in a circle. Then just hide the target so the audience goes “Woah 🤯🤯!”.

3) 🎨 Artistic Plan of Attack & Implementation

Once the practicality part is handled, we enhance the aesthetics through trails, colors, audio,  and connecting lines.

I considered adding bloom effects, but this would overload both my computer and yours, so I decided against it.

4) 💪 Challenges

Again, no challenge. The entire sketch was done in one sitting during the last class lecture.

5) 💡 Potential Improvements

To make the movements of the entities more realistic, I could have used proportional–integral–derivative (PID) controllers. My current model has no calculus, but by just adding these differential and integral terms below:

you can have particles reacting dynamically according to how far they are from the target, and not just static arithmatic.

Also yes, add obstacles, obstacle avoidance and path finding.

6) 🖥️ Source code

🖥️ Source code is just a single sketch.js file at : https://github.com/Pi-31415/Intro-To-IM/blob/main/Assignment-2/swarmfinal.js

📖 References :

Good artists copy, great artists steal. Of course, I stole everything by googling these publicly available stuff below 🤫😉.

• Ernst Schmidt’s Swarm Implementation (https://editor.p5js.org/Kubi/sketches/7U1KhS5S6)
• Ronik Bhattacharjee’s Music Visualizer (https://github.com/Ronik22/Audio-Visualizer/blob/main/examples/circular%20waveform%203/app.js)
• Music Used – Gunnin’ for You by Nick Nolan (https://www.youtube.com/watch?v=0fMQRw4IxOQ)
• Swarm Robotics (http://www.scholarpedia.org/article/Swarm_robotics)
• BOIDS algorithm (https://people.ece.cornell.edu/land/courses/ece4760/labs/s2021/Boids/Boids.html#:~:text=Boids%20is%20an%20artificial%20life,very%20simple%20set%20of%20rules.)

For this assignment, I used this piece by A. Michael Noll as my starting point.

Naturally, I wanted to expand on the concept of generating randomly-sized rectangles across a canvas and I decided to do this through introducing random movement to them. Upon doing so, I felt that recreating the same monotone color palette in Noll’s piece would lack depth, so I experimented by filling the rectangles with a randomly generated (yet still specific) color palette. Initially, I went for brown but, as I was experimenting with the RGB values, noticed that introducing green reminded me of a forest’s color palette. The movement of the squares (which I had already coded at this point) aided in this imagery as it was reminiscent of the swaying of branches and leaves in the wind. To complete this imagery, I changed the background color to a shade of blue which attempts to mimic the sky’s color just after the sun has set.

My main challenges and highlight of my code one and the same as I struggled to figure out how to incorporate randomness into my for loops. However, I was definitely happy with the result after incorporating them into my code. I have included it below.

for (let i = 0; i < 200; i++) {
   let x = random(width);
   let y = random(height);
   let rectWidth = random(100, 20);
   let rectHeight = random(100, 20);
   rect(x, y, rectWidth, rectHeight);
   
   
   let r = random(140, 170)
   let g = random (120, 150)
   let b = random (10, 40)
   fill(r, g, b)

Some further points of development could be to incorporate the use of noise to produce a swaying effect rather than the random generation of squares each frame (however I do like the “pixelated” appeal of my outcome). Another point which I considered would be to incorporate a moving gradient into the background to create a more immersive experience. A larger scale development could be to create an entire interactive exhibition with an environment made in the same style as this outcome.

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!