Category: Spring 2024 – Aaron (Section 001)

Loops… I wasn’t really sure how I could use a for, or while loop when the draw() function is itself a loop anyways. My previous experience with programming (which isn’t much) has taught me using for, or while loops in sorting algorithms but I didn’t know where to use loops when drawing an image in p5js. In any case, I looked through the magazines to see if there was anything I felt I could do.

 

When I saw the image above, I immediately began to think about how I could create it in p5js. I knew I could use ellipses to create what, in the image, looks rings around a tube. I also knew  that by making the background black, making the outline of the ellipses white, and removing the fill of the ellipses it could look almost exactly like the image. The only problem was that I didn’t really know how to make the shape without hardcoding all the values. So, instead of hardcoding all the x-coordinate, y-coordinate, width, and height values of all the ellipses I realized I could use a for loop.

When first testing out the idea I made a class and an array and made variables of that class which I put in the array and was just testing to see what worked and what didn’t since I wasn’t familiar with the syntax. In hindsight, I didn’t need to use a class or an array but it was good practice nonetheless. In any case, I ended up with the code below:

for (let i = 0; i < ellipseArray.length; i++) {
    
    
    let something = map(i, 0, ellipseArray.length, -1, 1);

    w = map(tan(frameCount * something * 0.025), -1, 1, 0, 100);

    y = map(i, 0, ellipseArray.length, 10, height);

    ellipseArray[i].make(width / 2 - 100, y, w, 20);

    ellipseArray[i].make(width / 2 + 100, y, w, 20);
    
    
  }

The method of the class which drew the ellipse was called make. Looking at it again I could have just had ellipse() in the place of ellipseArray[i].make … it would be easier to look at but I’ll just call it good practice. Despite that, I am happy with the code I wrote above. I was especially happy with my use of the map() function. At first I wasn’t sure how to use it, I also felt that the p5js references didn’t explain it very well but with a bit of trial and error it became obvious. I was also happy with how I used the frameCount variable to make the image move. I think it might be slightly obvious that I didn’t really know what I was doing throughout all of this as I named one of my variables something, I’m still not sure what to call it but the idea was that depending on where the ellipse was in the array it would have a different value from the tan() function.

At the end, I made the background slightly transparent so that it would leave a shadow of the previous ellipses, which I think makes a similar effect as the slightly fuzzy lines that can be seen in the image I took inspiration from.

 

Reflection

I mentioned this a few times before and it is that I should just use the ellipse() function alone rather than use a class and array to make the code more readable, and maybe even more efficient. I also think I could have added more comments to explain what each line or section did, I left most of it uncommented because I myself wasn’t sure what I was doing and was making changes fairly quickly. I feel with more practice and if I lay out my thought process with comments I can be more efficient when writing my code.

Future Ideas

For the future if I ever choose to come back to this style I could have a design where it uses a trigonometric function as I used it for this assignment but the ellipses are made around the cursor then it would look cool as you move the cursor. Also, I only varied the width of the ellipse, I could also vary both the height and width in the future.

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

 

 

 

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.