Category: F2023 – Shiloh

Casey Reas’ Eyeo talk on chance operations

This talk challenged my belief that code is one of the opposites of nature. I used to think that people could employ code in an attempt to replicate nature: humans (“natural” organisms) ordering a computer (an “unnatural” object) to create art. However, Reas’ talk made me realize that perhaps code and nature could operate on the same level. They both operate on certain core principles to create patterns that are then interpreted by humans as art. There is not so strict of a distinction between the natural and the artificial. This concept reminded me of Donna Haraway’s Cyborg Manifesto, in which she blurs line between humans and non-human organisms, and between humans and the technologies/systems we use.

(the top line is my previous belief, and the bottom line is the new concept introduced by the talk)

I think that’s Reas, as a digital artist, is biased towards portraying his own profession in a positive light, in the sense that he is in a position to make meaning out of abstract art. Some of the examples he showed, like the picture created by an artist dropping pieces of paper on the floor and leaving them there, made me wonder if such pieces are only considered art because of who created it and who is interpreting it. Both the artist and the commentators are likely already established within the rather gate-kept art world. If a child in kindergarten dropped some pieces of paper on another piece of colored paper and then painted the result, I doubt that people would pay the same respect in their analysis — they’d probably tell the child to clean up the floor. This points to power dynamics in the creative world, in which people with certain identities are more likely to be taken seriously. I am not trying to discount the importance of artist’s intention and concept, only posing the question: are certain artworks only considered art because the people creating them are already seen as artists?

I also want to comment on Reas’ latest project trying to reveal the algorithmic structures behind artworks. I feel that there is an ideological undertone throughout the whole talk that we should aspire to gain an algorithmic understanding of the world and of art, which I don’t know if I agree with. Especially with the rise of AI and the way it is impacting artists’ rights and pay, it is worthwhile to think about how computers’ ability to emulate randomness may come with both benefits and consequences.

Concept: Retro 3D Art

I was inspired by old school computer graphics that you would see in movies like The Matrix. Because of this, I knew that I wanted to make some ASCII art in the signature green color that most retro graphics used. After some experimenting, I decided to make an ASCII representation of a Menger Sponge, which is a fractal geometry that I thought would be very interesting to look at.

Process

I began by creating a sample video that I could use to turn into ASCII art. To do this, I created a 3D cube in Processing, which is a predecessor of P5.js. I attempted to do this in P5.js, but found the saveFrame() function too limiting. I created a simple box using the 3D renderer in Processing, and added some lighting to give the sketch some dynamic range. This is important as I needed to use the difference in brightness later on when converting the video to ASCII, and the greater the dynamic range is the easier it is to perceive the ASCII video.

void setup() {
  size(600, 600, P3D);
}

float a = 0;
void draw() {
  background(0);
  noStroke();
  spotLight(10, 80, 240, width/2, height/2, 400, 0, 0, -1, PI/4, 2);
  pointLight(255, 0, 0, width/2, height/2, height/2);
  ambientLight(100, 0, 100);
  fill(255);

  translate(width/2, height/2);
  rotateX(a/2);
  rotateY(a/2);
  rotateZ(a/3);
  box(280);

  a+=PI/100;

  saveFrame("src/box-######.png");
}

I incremented the rotation angle by a fraction of pi because I wanted to be able to count when the cube resets to its original position. This made it easier to create a video that could be looped seamlessly.

Once I had the output frames, I combined them together using Microsoft Movie Maker. The final result was this video:

Next, I wanted to work on converting this footage to ASCII art. I followed Daniel Schiffman’s coding challenge on creating ASCII text images. After experimenting with the video size and character density arrays, the following sketch was the result I got:

However, I wanted to create something a bit more complex. This is when I remembered an old project that I worked on by following another one of The Coding Train‘s challenges, which was the Menger Sponge coding challenge.  After generating the frames and compiling them into a video, this was the result:

All I had to do then is to insert this video into the original code and play around with different parameters until I got the desired result.

Code Highlights

I’m really proud of the code that makes the animation look like its being built up slowly using ASCII characters. The way I achieved this is basically by filtering out the highlights on the Menger sponge. When I compiled the video, I saw that the lower right corner of the sponge had a bright highlight on it that was blocky.

//finding the right character based on brightness of pixel
let len = charArray.length;
let charIndex;

//playing with map values for the building up effect
charIndex = floor(map(apparentBrightness, 0, 100, len, 0));

When I filtered the brightest points of the sponge out, I essentially removed the lower left corner until it got a bit darker later in the animation, which created the building-up effect.

Reflection

Compared to the first assignment, I had a more solid idea of what I wanted to achieve. Because of this, I had planned out my workflow beforehand and that streamlined the entire creative process. I knew I had to create source animation and then convert it to ASCII characters. This made my code more readable, and I had better control of the sketch overall.

However, the building-up animation that I am most proud of is dependent on the source video. It looks the way it is because in the source animation the highlights are blocky as well. If I wanted to recreate this project, I want to work on some logic that allows the effect to be more generalizable. Maybe I could filter out sections of the object based on a distance function instead of the brightness levels. That way I can substitute different source videos and still get the cool effect.

Sources

• Retro Computer Graphics – Behance
• ASCII Text Images – The Coding Train
• Menger Sponge Fractal – The Coding Train
• Relative luminance – Wikipedia

 

 

When Science and Art become one, unexpected things happen. This thought came into my mind while watching “Eyeo2012 – Casey Reas”. At first, I was confused, as the speaker was talking in a metaphorical tone. However, what followed was a journey of great exploration, where the realms of science and art intersected to yield breathtaking results. Casey Reas revealed a world where technology and creativity came together, leading to interesting concepts and expressions.

Through the lecture, a couple of concepts inspired me. I hope that I will explore even further during this course. Some of these were the phenomena of emergence, the conceptional vehicles project, emotions in Art, and the use of randomness to create art pieces.

The phenomena of emergence:

In this part of the lecture, he touches upon the idea that in coding behavior and forms become elements that create the fundamentals of the images he creates. I understood that these generative properties took a lot of precise geometry and calculations to take form. It was interesting how ideas in physics, biology, chemistry, or day-to-day interactions could be transformed into coding logic and then into generative art. In this part, I realized that understanding the underlying fundamentals is key to boosting creativity and decision-making.

 

The conceptional vehicles project:

 This part was focused on the concept of hypothetical vehicles based on the animal nervous system. What I like the most about this part is how it gradually transforms into Art. I have realized that when we only see the final product of a project we do not understand or appreciate the underlying process or story behind it. If I only saw the final piece, I would have never thought it was based on this specific concept or any concept at all. I would have thought it was a form of expression and that is it. I have realized that often the story behind something along with its representation gives beauty and a stronger connection between the viewer and the piece.

Emotions in Art:

Human connections between one another and between the surroundings are vital characteristics in my opinion. In the lecture, Casey Reas showed some forms of Art that were far from human connection. These pieces were interesting but are not something I would want to explore. I believe that when Art has a humanitarian dimension it is far stronger than when it lacks it.

 The use of randomness to create art pieces:

 In this part of the lecture, Reas showed how some artists like Marcel Duchamp. His idea that through Art you “make your reality” made me think of how filmmakers, performances, and illustrations put individuals into a new place where they can explore a new logic alienated from reality.

Then he explored the idea of random numbers. When he showed the demos, I realized the infinite possibilities of creating different forms of art with the same logic. Here I understood the importance of exploring different things and taking risks because in this part, if one does not try so many ways, one would not realize the possibilities or discover what one wants to present.

Finally, during his lecture, I realized that there are limitless opportunities to bring in my thoughts, logic, and creativity to create Art. In a world where science and art intersect, a lot of unexpected possibilities take form.

As a psychologist, I learned about chance, randomness, and probability through the scientific perspective. I learned that there is always room for chance when making conclusions, decisions, etc. Reas’ talk reminded me of this but also helped me to see the similarities and differences in understanding chance in arts and science. The most obvious difference is the people’s attitudes toward chance events. In medicine, for instance, people hope to minimize it and bring negative connotations to it, while artists look at chance as something positive, bringing more variability and opportunities in their works. Understanding such varied opinions on the chance concept, makes me think about humans’ urge for power. Power in medicine lies in the fact that scientists want to control chance and eliminate it. Artists want to have less control over chance in order to create works of art that can be powerful in the sense that they are decentered or are moving away from the preconceived traditional notions, e.g., symmetry, rationality, perspective, etc. This point was brought up by Reas and I find it extremely pleasing. However, I might wonder whether his opinion on moving away from “traditional” is a little bit biased in the sense that he talked about specific points of art history or coding when a radical change was necessary.

One idea from the talk which I agree with was that we are all similar in the fact that we are the key decision-makers in the process of choosing how much randomness we allow in our lives/artworks, etc. My key question to this would be how do we decide what is good or bad? Is it more chance or less chance? Although, the answer to this question depends on the context, how much of a chance we are truly capable of perceiving, welcoming, and approving? Moreover, because chance is something that in the long run emerges into something predictable, I believe that it is hard to make a clear judgment of whether chance is always surprising and always unpredictable, which can oppose people thinking of chance as something new. 

 

Portrait:

Concept:

For this assignment, I attempted my first-ever p5.js project, creating a self-portrait of my beloved cat, Luna. As a beginner, I relied on tutorials and lecture notes to learn how to craft different shapes and apply colors effectively.  This project marked the beginning of my journey into coding, and I enjoyed the challenge of capturing Luna’s character on the canvas.

Code:

function setup() {
  createCanvas(400,400);
  background('orange');
 
}

function draw(){
  
  //luna's head
  fill('gray');
  noStroke();
  ellipseMode(CENTER);
  ellipse(200, 200, 150, 150);
  fill('');
  
  //luna's body
  fill('gray');
  noStroke();
  arc(205, 320, 150, 150, PI, TWO_PI);
  rect(130, 320, 150, 150);
  
  
  //luna's left ear
  fill('gray');
  triangle(160, 140, 180, 80, 200, 140);
  fill('white'); triangle(170, 135, 180, 85, 190, 135);
  
  
  //luna's right ear
  fill('gray');
  triangle(240, 140, 220, 80, 200, 140);
  fill('white');
  triangle(230, 135, 220, 85, 210, 135);
  
  //luna's eyes + puplis
  fill('white');
  ellipse(170, 180, 35, 35);
  ellipse(230, 180, 35, 35);
  
  fill('black');
  ellipse(170, 180, 20, 20);
  ellipse(230, 180, 20, 20);
  
  //luna's nose
  fill('pink');
  triangle(200, 190, 195, 200, 205, 200);
  
  //luna's mouth
  stroke('black');
  strokeWeight(2);
  noFill();
  arc(200, 220, 80, 40, 0, PI);

  //luna's left whiskers
  line(150, 200, 110, 195);
  line(150, 210, 110, 205);
  line(150, 220, 110, 215);
  
  //luna's right whiskers
  line(250, 200, 290, 195);
  line(250, 210, 290, 205);
  line(250, 220, 290, 215);

}

Reflection:

Concept: Order and Chaos

I get the inspiration from this week’s reading (watching) assignment, which is a talk by Casey. He talks about chaos and order in computer generated arts, and I think it is interesting to explore myself how computers can generate arts of order and chaos. My idea is to use simple lines to generate different shapes. I have experimented mostly with random() function, and discovered that even the randomly generated lines can actually follow certain patterns to form different shapes! In the meanwhile, the user can manipulate these lines to form different patterns and shapes so that they can personally feel the change from complete chaos to some order. Hope you enjoy!

Highlight of the code

The code is relatively short and simple. I mainly started with generating completely random lines with random sizes:

for (let i = 0; i < 50; i ++){
  let xPos1;
  let xPos2;
  let yPos1;
  let yPos2;
  let thickness = random(1, 5);
  strokeWeight(thickness);
  xPos1 = random(mouseX, 400);
  yPos1 = random(mouseY, 400);
  xPos2 = random(mouseX, 400);
  yPos2 = random(mouseY, 400);
  
  line(xPos1, yPos1, xPos2, yPos2);
}

Then for the user to manipulate the lines, I created a circle that follows the mouse so that the user can see clearly where the mouse is and better control the lines. Moreover, I modified the last line of the previous code to achieve user’s manipulation of the lines:

line(xPos1 - mouseX, yPos1 - mouseY, xPos2, yPos2);

I tried to use Perlin noise to make the lines move more naturally as we learnt in class. However, I feel the natural movement here undermines the sense of chaos, which is not intended here. Therefore, I decided not to use it and keep how these lines move as now.

Reflections and improvements

The execution is relatively easy, but it took me some time to finally come up with this idea. I tried several other ideas, but they all failed because my coding ability did not allow me to realize them. And this is why I ended up with this relatively simple code, but its effectiveness in exploring chaos and order is still strong.

And for future considerations, I am interested in knowing probably what other elements, such as other shapes, colors, movements, etc, could be added to the work to further explore the idea of chaos and order in computer generated arts. To me it is a very interesting concept even in other fields. Therefore, I’d like to explore more possibilities to discuss and apply this concept!

Sources:

Casey’s talk: https://vimeo.com/45851523

P5.js reference page: https://p5js.org/reference/

Concept:
After learning in class about how the Perlin noise effect simulates more natural movement, I experimented with it using circles instead of lines. The way the circles moved reminded me of bubbles in a lava lamp, which is quite a nostalgic object from my childhood. I never actually owned one, but I would often be mesmerized by them whenever I saw them in classrooms or stores. To recreate the feel of a lava lamp with different size bubbles, I set 4 offset values and made them control different aspects of the circles. For example, for the first circle circle(n, n, 0.4 * n), the x-coordinate, y-coordinate, and diameter are all changing at the same time, while for the second circle circle(v - 10, 400, 0.4 * v) the y-coordinate is fixed. I did this so that the bubbles would have their own “territory” on the screen and not overlap that much.

offset = offset + 0.003;
  let n = noise(offset) * width;
  circle(n, n, 0.4 * n);

  offset2 = offset2 + 0.003;
  let v = noise(offset2) * 200;
  circle(v - 10, 400, 0.4 * v);

  offset3 = offset3 + 0.003;
  let k = noise(offset3) * width;
  circle(400, k, 0.2 * k);

  offset4 = offset4 + 0.003;
  let u = noise(offset4) * width;
  circle(40, u, 0.3 * k);

Highlight:
A part of the code I had many difficulties with was the forloop. My aim was to make the background color change slowly by altering the “g” value in my background function using a forloop. However, my p5.js kept crashing whenever I did anything, which was quite frustrating. I eventually found out that it was doing so because I had made an endless loop with g+1. Since  the value of g +1  is never reassigned to g, g stays at 0 forever. Therefore, g is always less than or equal to 255, so the forloop will run forever, causing p5 to crash.

function draw() {
  for loop does not work, why?
  for (let g = 50; g <= 255; g + 1) {
    background(255, g, 50);
  }

After I fixed this problem, the forloop was still not causing the background color to change, and I am still unsure of the reason why. I asked a NYU Shanghai IMA major for help, and she explained that I do not need a forloop to accomplish my aim, I could simply initialize a global variable g and then tell g to increase by 1 in the draw function.

let g = 50

function draw() {
  background(255, g, 200)
  g = g + 1
  
  drawBubbles();
}

This created the below effect:

However, this project still lacked the use of a forloop, so my friend proposed that I could make a gradient by drawing vertical lines of varying colors from left to right. She showed me the code, but I did not want to simply copy and paste it without knowing how it worked, so I really tried to break down each part I did not understand. Writing it out on paper helped with that:

So, the final forloop code creating the changing background gradient was as follows:

let r = 50; // red
let b = 200; // blue

function draw() {
  //increase x by 1 every time the for loop runs
  for (let x = 0; x <= width; x = x + 1) {
    noFill();
    strokeWeight(1);
    let g = 200 - x / 2; // vary the "g" value according on the "x" value
    stroke(r, g, b);
    line(x, 0, x, height); //draw line from (x, 0) to (x, height) from left to right to create gradient
  }

  r = r + 1; // gradually increase r value by 1
  b = b + 1; // gradually increase r value by 1 

Embedded sketch:

Reflection and ideas for future work or improvements:
I’d like to figure out how to make the gradient change back the other way, so the background will keep changing forever once you run the program.

As a self reflection, I have never been very quick at understanding mathematical logic, so I always feel extremely lost when it comes to coding. Some functions of code seem like they should be simple, but I always need to walk through each step slowly in my head (or even better, on paper) to understand how it works. However, this may not be a bad thing, it just means I need more time for the information to marinate.

Resources:
Many thanks to the IM Discord and Pacey Wang for their help!

Casey’s talk on chance operations perfectly shows the use of technology in arts. The most significant and profound argument I think he is making is that people are using computers, which are ordered, rational machines, to create randomized, chaos art. As he develops his argument, he starts from the nature, religion, and science to show the relations among order, chance, and chaos, and how these could to apply to art works after artists started to generate art using software and chance operations.

I personally agrees with Casey’s argument, and believe that machines are very good experimental place to test the relations between chance and order. By looking at the examples Casey gives during his talk, it is clear that developing from chance and order in art to chance in code, chance and order seem to find a balance in code, or in other words in machines. The last example, 10 PRINT, he shows sheds light on it.  Even though it uses random operations, the final art work generated is still somehow in a certain order. The patterns are still detectable if analyzed closely. Does it mean that even the chaos is still confined in a ordered system, in this case computers? Does chaos follow a certain pattern to be chaotic? This reminds of an installation art I visited in Iceland. The work was titled “The only certain thing is uncertainty”, and used random mechanical motions to explore this theme. Even though the results of these motions were unpredictable, the mechanical systems were always the same, such as a metal piece plucking a thing, hanging bent mental wire. Therefore, I find Casey’s argument and examples reading interesting and inspiring.