Category: Spring 2024 – Aaron (Section 001)

In his Eyeo lecture, Casey Reas explores the relationship between art and chance, emphasizing how order and chaos interact in creative expression. He presents the idea of “controlled randomness,” in which artists set guidelines while leaving room for unexpected outcomes, providing a novel viewpoint on the process of creating art. Reas presents the idea of “ordered randomness” to show how artists may retain control while offering unpredictability in response to worries that digital art is stifling artistic creativity. In addition to promoting investigation into digital art and coding, this conversation challenges preconceptions and heightens appreciation for the deliberate use of unpredictability in creative expression. It also improves awareness of the link between order and chaos in art.

Furthermore, he highlights how programming languages become vital to the creation of art, drawing connections between code determinism, creative expression, and controlled unpredictability. This point of view encourages a deeper exploration of the creative possibilities inherent in code by showing how straightforward code may result in patterns that are both visually pleasing and meaningful artistically. These insights provides a new previously untapped avenues for artists to explore the interplay of chance, intention, and order, greatly expanding their artistic canvas.

The implementation of algorithms showcased in the video intrigued me, particularly the simulations where algorithms breathe life into meaningful constructs. Witnessing the utilization of body and tissue geometries to craft clothing was especially striking, demonstrating the fusion of art and technology in multiple ways.

The portrayal of randomness in Reas’s presentation was particularly interesting to me. Each pattern, stemming from a singular algorithm, unfolded into multiple distinct artworks with subtle alterations in speed or character selection. This showed us the ways in which randomness has the capability in generating diverse artistic expressions, raising questions about the nature of creativity in algorithmic art.

However, in a previous course I  attended the debate of when does an algorithm is allowed to be credited for the work it creates popped a lot. Especially when AI can generate images using solely a prompt. Of course, in Reas’s case it is completely different due to the fact that code is being used as a tool, but, what does it mean for artists now when using a prompt?

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);
}