Category: Spring 2024 – Aaron (Section 001)

Looking into Computer Graphics and Art, two artist’s style caught my eye. It is specifically Charles Fritchie and Robert Morriss  where their style consisted of free form lines and a sense of chaos, blending circles and lines – some straight and some aren’t. (Page, 32)

The concept of this code is to tell the tale of how we as humans have become entrapped in a fast-paced life of constantly having to work that sometimes it is hard to break free of that mindset. The circles, which eventually aren’t visible represent us, and the lines represent every aspect of our work lives – assignments, jobs, social life, etc.

As a person who is new to p5.js I found that it was easier for me to start coding without an initial concept but a loose inspiration, it took me quite a bit of time because I wanted to implement some of the ideas we learned in class, the code ended up being simple however very impactful.

function setup() {
  createCanvas(600, 600);
  background(255);
  noFill();
  stroke(0);
  frameRate(4);
}

function draw() {
  for (let i = 0; i < 10; i++) {
    let x1 = random(width);
    let y1 = random(height);
    let x2 = random(width);
    let y2 = random(height);
    line(x1, y1, x2, y2);
  }

  ellipse(mouseX, mouseY, 20, 20);
}

function keyPressed() {
  background(255);
}

The first thing about Casey Reas’ speech that caught my attention was his collaboration with Ben Fry, which focused on visualizing biology data from MIT and the way that proteins communicate back and forth – positive or negative signals within a cancer cell (randomness was used but in a slight manner). This example proved to me that an artwork truly becomes a piece of art when it is shaped by the story it holds, something to which we can relate.

Another project I found interesting was his creation of conceptual vehicles and software, each color-coded based on their wiring, which was influenced by anatomist Valentino Braitenberg’s hypothetical vehicles, whether inverse or positive, straight connection or cross-connection. A quote that then stood out to me was “a little bit of randomness and a lot of decision-making” (11:43), which showed the complexity in art that many see as “simple.”

Further in the video, the reference to random graphics reminded me of Skip Lists in Data Structures where the reliance is on a 50/50 chance serves as a technique to ensure efficient performance. This validates the deep integration of math, computer science, and physics in art. Further, Reas broke down the barriers between these disciplines, emphasizing how randomness, far from being blind, is a planned element that adds an unexpected dimension to the artistic output, an argument with which I completely agree!

Personally, this speech has solidified my belief in the interdisciplinary nature of art. The combination of several distinct disciplines showcased in the work Reas displayed challenged preconceptions that even I had about the simplicity of digital art. That being said, the speech left a question surrounding the impact of technological advancements on art: Is there ever a line to be drawn as to the art is no longer by the artist but rather a computer, and have we reached that age yet, especially with AI generative art, although different from the work displayed in the video?

Inspiration and Concept

I was looking through some of the works in ProgrammInformation21_PI21 when I came across the sketch below. I immediately thought about the curves I used in last week’s assignment and how noise could be introduced to create this effect of slightly vibrating circles. Essentially, if I drew a circle with curves and then introduced controlled deviations in the vertices’ x and y-coordinates away from the perfect circular path, I would then be able to recreate this piece. In the process of conceptualizing the animation, I also imagined that drawing a curve in each frame would give the illusion of a blossoming flower and add some character and movement to the work. That latter thought effectively lingered in my mind and I found myself experimenting with symmetry, eventually creating an expanding flower animation.

Embedded Sketch

Implementation and Code Highlights

The animation was created by a for loop that creates the curves, nested within another that symmetrically partitions the curve lines to generate petal shapes. I used the Perlin noise() function to allow the curves to wiggle a bit utilizing the iterating variable in the nested for loop and an auxiliary control variable to set the x and y-coordinates in the noise space. This elicited the pattern of organic folds of a flower existing in nature. I referred to the way I created my hair in the last assignment and the examples of using Perlin noise in this article to create the curves. The number of partitions (petals) of the flower is determined by a number that is randomly generated from a finite set of integers. Additionally, the stroke color of each curve is also randomly generated. When set against a black backdrop, the eccentric fluctuations in stroke color produce a glowing effect, which I loved. The animation is replayed when the flower expands to the width of the canvas. Additionally, the animation is repeated with a different number of petals when the mouse is clicked for added interactivity.

// partition the circle based on the variable, petal_partitions_control, to create flower petal effect 
for (var j = 0; j < petal_partitions_control; j += 1 / petal_partitions_control) {
  beginShape(); // draw curves 
  for (var i = 0; i < 30; i++) {
    // map angle based on current partition iteration
    // inner loop implementation inspiration: https://genekogan.com/code/p5js-perlin-noise/
    var ang = map(i, 0, 30, j * PI, j * PI + PI / petal_partitions_control);
    // generate x and y coordinates using noise for organic shapes
    var x = radius * cos(ang) * noise(i * 0.1,  perlin_noise_control * 0.05);
    var y = radius * sin(ang) * noise(i * 0.1,  perlin_noise_control * 0.05);
    
    // draw curve
    curveVertex(x, y);
  }
  endShape();
}

The outer for loop, I would say, is the one I am most proud of as it creates the emergent pattern of flower petals. Admittedly, I do owe Casey Reas and his talk some credit for helping me get inspired to add the symmetry needed to pull this animation together.

Reflection and ideas for future work or improvements

I really enjoyed the process of expanding upon my earlier work and integrating the concepts we discussed in class in the making of this piece. I also loved the process of experimenting with different noise values and stumbling upon the often happy surprises that come with working with randomness and geometry. In the future, I would like to perhaps add more of these flower shapes and give the user some more control in defining the parameters that control the randomness behind the shape (by adding a slider, for example). Additionally, I would love to exploit the same concept to recreate other symmetric shapes – like butterflies – in nature.

After further browsing the artworks that were posted to help inspire this assignments idea. My inspiration stemmed from the artwork by Bill Kolomyjec’s “Random Squares.”

At first, I fully convinced myself that it would be rather simple to recreate just a collection of squares. Nevertheless, I was shockingly mistaken. I discovered that my code seems blank after fiddling around with it and making squares within squares. Furthermore, I went ahead and made the decision to push myself simply because I know that if I set my mind to something, I’ll do all in my power to make it happen. I made the decision to attempt to program the squares to change color when the mouse is over them.

To solve the task I set for myself, I began reviewing tutorials on YouTube right away. I wanted to learn how to improvise for the if else statement I used and avoid making my code too long or complicated. and put the map statement into practice so that the code could detect if the mouse was hovering over the squares and alter its color accordingly.

In a realistic sense, the task itself was both difficult and instructive. I came to the realization that I do need to practice a little myself in order for me to find coding to be rather straightforward, so hopefully I will keep doing that. In the future, I do plan to push myself more than I did on this project, but I also want to make sure that I don’t put too much pressure on myself and take my time enjoying the process of producing. Overall, I’m somewhat proud of the outcome.

let squares = [];
let numSquares = 6; // Total number of larger squares
let nestedSquares = 4; // Number of nested squares within each larger square
let squareSize;
let maxSize, minSize;
let spacing; // Spacing between larger squares

function setup() {
  createCanvas(560, 372);
  squareSize = width / (numSquares / 2); // Assuming 3 squares in a row
  maxSize = squareSize;
  minSize = squareSize / 10;
  spacing = squareSize / 50;

  // Initialize properties for each large square
  for (let i = 0; i < numSquares; i++) {
    let x = (i % 3) * squareSize + squareSize / 2;
    let y = floor(i / 3) * squareSize + squareSize / 2;
    squares.push({ x, y, size: maxSize, hovered: false });
  }
}

function draw() {
  background(255);

  for (let i = 0; i < squares.length; i++) {
    let sq = squares[i];

    // Determine if the mouse is over the square
    sq.hovered = (mouseX > sq.x - sq.size / 2 && mouseX < sq.x + sq.size / 2 &&
                  mouseY > sq.y - sq.size / 2 && mouseY < sq.y + sq.size / 2);

    // Draw the nested squares
    for (let n = 0; n < nestedSquares; n++) {
      let nestedSize = sq.size - n * (sq.size - minSize) / nestedSquares;

      // Color change based on mouse position
      let colorValue = sq.hovered ? map(mouseY, 0, height, 255, 0) : 255 - (n * (255 / nestedSquares));

      fill(
        colorValue,
        255 - colorValue,
        map(mouseX, 0, width, 0, 255)
      );

      // Draw each nested square
      rectMode(CENTER);
      rect(sq.x, sq.y, nestedSize - n * spacing, nestedSize - n * spacing);
    }
  }
}

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.