Month: February 2024

When I think of loops the first thing that comes to mind is the DVD screensaver that I used to see as a kid, a never-ending loop that managed to grab my attention until I saw the corner of the logo line up with the edge of a screen. If you still don’t know what I’m referring to, have a look at this iconic scene from the office:

I Tried to recreate the same loop using if statements, randomized the color change whenever the logo hit an edge, and redirected itself in the opposite direction by going into negatives.

I am particularly proud of this part of the code:

if (pos.x >= width – imgPos.width || pos.x < 0) {
speed.x *= -1;
getColorforImage();
}

I was intially overwhelmed by this task, however using the if statement really made it simpler, by making the image speed into the negatives to redirect and change color simultaneosly (repeated the same code for Y variable) I managed to recreate the OG dvd screensaver.

However, I did not use the for or while commands to create this loop so I started experimenting and managed to find a non traditional loop instead:

This was very surprisingly simple, although I wanted to involve more motion to the circles in the back initially, I felt content when I reached this final product. For the future, I would hope to have done something such as a color loop instead, blending or transforming colors into one another in hopes of making this loop more “traditional”, at least visually.

Casey Reas’ exploration of chance operations, as presented in his Eyeo Festival talk, provides a fascinating lens through which we can view the intersection of randomness and structured systems within the realm of digital art. 

Reas’ work, which combines the precision of algorithms with the unpredictability of random events, challenges the conventional notion of control in the creative process. This duality of chaos and order, as showcased in his artworks, prompts us to reconsider the role of the artist in the age of digital creation. 

The historical context provided in Reas’ talk, linking back to earlier practices of chance operations in art, enriches our understanding of this concept. This perspective not only bridges the gap between past and present art practices but also illuminates the continuous search for balance between intentionality and serendipity in artistic expression.

In reflecting on Reas’ presentation, it’s clear that the inclusion of chance operations within the realm of digital art opens up new avenues for creativity. It challenges artists to give up a degree of control, allowing randomness to introduce unique, unrepeatable elements into their work. This approach not only enriches the aesthetic and conceptual dimensions of the artwork but also mirrors the complexity and unpredictability of the world around us.

Overall, Casey Reas’ talk at the Eyeo Festival serves as a compelling reminder of the potential that lies at the intersection of technology, art, and randomness. His exploration of chance operations invites us to embrace the unpredictable, seeing it not as a limitation but as a source of endless creative possibilities.

For this week’s assignment I wanted to create a feather-like magazine design. I got some inspiration from Peacock feathers since they are known for their iridescent colors and striking patterns, featuring an eye-like design.  While working on the code I wanted each “feather” to move whenever the mouse move over it so I used the sin function to scale the flutter effect. 

 

A code that I’m particularly happy about is the one that creates an ombre effect on the “feathers”:

let inter = map(i, 0, featherHeight, 0, 1);

let col = lerpColor(c1, c2, inter);

This code helps the colors to smoothly change from c1 and c2 creating the ombre effect.

let featherWidth = 100;
let featherHeight = 100;
let cols, rows;
let c1, c2;

function setup() {
  createCanvas(400, 400);
  cols = width / featherWidth; 
  rows = height / featherHeight * 2; 

}

function draw() {
  background(255);
  for (let i = 0; i <= cols; i++) {
    for (let j = 0; j <= rows; j++) {
      let x = i * featherWidth;
      let y = j * featherHeight / 2;

      // Adjusting for every other row to create a staggered effect so that the feathers dont overlap
      if (j % 2 === 0) {
        x += featherWidth / 2;
      }

      // Check if the mouse is over the current feather shape
      let mouseOver = dist(mouseX, mouseY, x, y) < featherWidth / 2;

      drawFeather(x, y, mouseOver);
    }
  }
}

function drawFeather(x, y, mouseOver) {
  if (mouseOver) {
    // Generate a gradient of colors for the ombre effect
    c1 = color(random(255), random(255), random(255), 100);
    c2 = color(random(255), random(255), random(255), 100);
  } else {
    c1 = color(0, 100);
    c2 = color(0, 100);
  }

  // Draw and color the feather with a diamond shape using QUAD_STRIP
  noFill();
  strokeWeight(1);
  beginShape(QUAD_STRIP);
  for (let i = 0; i <= featherHeight; i++) {
    let inter = map(i, 0, featherHeight, 0, 1);
    let col = lerpColor(c1, c2, inter);
    stroke(col);
    
    // Introduce fluttery motion when mouse is over
    let flutter = mouseOver ? sin(frameCount / 10 + i / 3) * 2 : 0; // Adjust flutter effect here
    let baseXOffset = sin(map(i, 0, featherHeight, 0, PI)) * featherWidth / 2;
    let xOffset = baseXOffset + flutter; // Apply flutter effect
    vertex(x - xOffset, y + i - featherHeight / 2);
    vertex(x + xOffset, y + i - featherHeight / 2);
  }
  endShape();
}

function mouseMoved() {
  redraw(); 
}

 

The main point from this lecture that stood out to me was the balance between randomness and order which has been central to the development of interactive art over time.

Prior to learning about the technical process behind coding, I never considered that conceptualization and randomness can coexist within the same work. I was vaguely aware of algorithmically generated art, especially with the rise of AI generated images in the past few years, and I had been exposed to contemporary art which puts conceptualization at the forefront. However, the merging of the two is something relatively new to me and definitely an avenue which I would like to explore in the future to expand the scope of my personal work beyond traditional photographic practices.

One of the examples of this presented in the reading was a project by Reas entitled Chronograph in which he algorithmically generated visuals to be projected onto the New World Center in Miami. What stood out to me from this work was the intentionality behind it as the visuals were created using images of the neighborhood surrounding the center and later manipulated and collaged through coding. This defied my preconceived notion of digital, coded art to be nothing more than a display of technique and skill as it offered a very tangible ‘why’ to the decision making process behind the work. I have included it below.

Another point which stood out to me from the lecture was the effectiveness of simplicity. This became apparent to me as Reas did a live demo of a very basic Commodore 64 program. Despite only using two basic symbols, Reas’ introduction of randomness allowed the program to produce an interesting visual. As someone who is inexperienced in coding, I would like to combine the aforementioned intentionality with the effective simplicity of this C64 program in order to get the most out of my work.

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