Listen (input) – Think  (process) – Speak (output)

One thing that Chris Crawford mentioned at the end really enlightens me: have the right form for the right function. Despite that user interface design and interactivity design are two different things, their should be an inseparable link in between. For my week 2 assignment, I added an if statement to trigger the background changes whenever the mouse moves to a specific area.  This is a last-minute changes to the generative work I have already done with the pure intention of increasing interactivity. Looking back to it, I realize that it breaks the balance between the wave in the foreground and the single-tone background. Although the degree of interactivity seems to rise, the important code I wanted to highlight is interrupted. 

The above reflection brings me to the second point i’d like to discuss: what determines the degree of interactivity, listening, thinking, or speaking? Though Crawford uses book and movies as examples of forms that have low interactivity, I remember reading books that direct you to different sections of the page based on the choices you made for the protagonist. In 2018, Netflix also launched its first interactive film Bandersnatch on their streaming platform with more to come in the following year. These innovations create a conversation between the audience and the actors. However, do these innovations turn the medium into something they are not? Do these books and movies become a game? What more can be done to increase the interactivity of these mediums while not ruining their fundamentals?  

Concept

sandworm – circle – sin/cos wave

I begin with wanting to create a sandworm-looking creature from Dune. During my research, I found out this B&W worm that is visually more appealing than a big yellow worm hiding in the desert.

After the initial brainstorm, I started playing around with circle() & ellipse() just to experiment with the for loop. This snippet I got from one of the readings inspired me to show more of the liveness of the basic shapes.

Keeping the shape of the sandworm and the potential movement they might have in mind, I decided to create a wave. With the help of this Youtube tutorial on sin & cos wave, i was able to create a normal wave. By adding framecount into that, I create the illusion as if this sandworm is 3D. To practice using if statement, I added a colorful background that is only triggered when your mouse is moved there.

Somehow Casey Reas came in mind, so I decided to explore a bit further. For the clarity of my worm, I removed the background interaction and replaced all cos with tan. Thi si the final result:

Code & future improvement

I am happy with how the frameCount came in handy in both the fill() & circle. In future, I would give more meaning to the background.

for (i=0; i<width+100; i=i+1){
  fill(
    178+177*cos(i/2 +frameCount/2)
  );
  circle(i, height/2  + 100 * cos(i/100+frameCount/20), 50 * cos(i/30 + frameCount/50))

}

 

View code as a tool to bring imagination to life

Reas’ website & talk.

I’m the most impressed by Casey Reas’ ability to code art from the easily overlooked details in life and how some of his works can find their roots in art history.  Every piece he presented contains multiple layers of meaning, with deep consideration before arriving at a final artwork.  Those works draw from scientific concepts, like that neuro model, or something as simple as the characters on a keyboard. They start with such tangible concepts but lands in somewhere abstract. 

What sets coding art apart from traditional forms of art? I believe it’s the ability to accept constant changes. Reas references artists like Duchamp, the Dada movement, and John Cage to illustrate the concept of ‘chance in art.’ These works embrace improvisation as part of the creative process. Coding takes this a step further by having randomness at its core, demonstrating how randomness can have a certain intentionality. It shows how meanings can shift and layer as the program runs. These added-up layers can be endless, not just limited to one canvas and small changes in a code can result in something drastically different from before. Another key distinction is accessibility. Traditional art often requires specific skills and techniques, while creative coding lowers that threshold and provides the public with the tools to easily replicate a great piece of creative coding.

 

Sketch

Idea

I’m quite new to P5js so I started the project by drawing myself out.

The sketch is easy but I ended up giving up on the complicated version of my bang and chose to use an arc & a transparent triangle. I removed the stroke at the end because I like how an image is created just by these big chunks of color composing together. The blush, the piercing, and the top are all obvious characteristics of mine so I decided to include them apart from just coding my facial features out. The self portrait looks sad because I was sleepy when working on it.

I like photography a lot so I decided to use the background to show that.

 

Highlighted code

I used the variable & random code that we talked about in class to create the camera that appears at the beginning and the flashes. To make them obvious, I chose a plain green background. The camera’s movement is set using CameraX & CameraY global variables. I used CameraX = frameCount % width to make sure that they will reappear. The flashes appear using random. One thing that I might change in the future is to make the rectangles into a diamond shape and add white highlights so that they = look more like flashes. I might also add interactivity: users click on the camera to produce the flash.

//the flash
//make random camera flashes
frameRate(10);
let x = random(600);
let y = random(600);
fill('yellow');
rect(x,y,90,120);
fill('white');
//the camera
fill('rgb(224,216,216)');
rect(CameraX+4,CameraY-10,40,100,0)
fill('white');
rect(CameraX,CameraY,150,100,10);
fill('grey');
rect(CameraX,CameraY+20,150,60,5);
fill('rgb(175,165,165)');
circle(CameraX+80,CameraY+50,80);
fill('black');
circle(CameraX+80,CameraY+50,60);
fill('yellow');
circle(CameraX+90,CameraY+40,10);
CameraX = CameraX +1
CameraX = frameCount % width
CameraY = frameCount % width
noStroke();