Week 2 – Reading Reflection

I really like using random elements in my work; both assignments so far have incorporated random elements because I feel like it adds so much movement and engagement with only a few lines of code. The computer program almost creates the art for you; you just have to give it a guiding path to follow. Even though I like randomness, there’s still specific visions I want it to follow. I use random as a way to represent reality and organic ways of forming images. For example, carefully placed and well-thought out placements of certain objects feel artificial; being able to simulate randomness means mimicking real life. 

The book of random numbers (million digits) in Casey’s talk mirrors my point; people use these numbers to simulate and test things in the real-world. It did get me wondering though, if multiple areas and teams are using this specific set of random numbers, would it eventually be unreliable? Depending on the context in which it’s used, I’m sure it doesn’t matter, but I just felt like if the whole point of these random numbers is to give unbiased data on society, they shouldn’t be reused over and over again. Another thought came to mind when watching the video: our universe is just a random simulator. What if our world was just programmed by someone who used randomness to let organic life move and form freely? This reminds me of the theory popularized by the Matrix about how we’re very likely living in a simulation because eventually, a civilized society will develop the ability to simulate worlds, which then can also simulate worlds, and so on. That means there are probably millions of simulated worlds and only one base reality; the likelihood of us being one in a million is unlikely. We might be a simulation to test a specific outcome, and that technology could be rooted in the randomness shown in Casey Reas’ talk.

Week 2 – Graphic Art

TURN YOUR SOUND ON

(click on embedded sketch to turn it on)

https://editor.p5js.org/bobbybobbb/full/V2hgFFToc

I was looking through the old computer arts magazines for inspiration and really liked some images, so I wanted to incorporate them into my project. These 2 specifically were of interest:

Imagine you’re watching a space broadcast on your old TV that glitches out quite often. My concept was to have a bunch of random lines make up a TV frame surrounding my canvas and have these lines animate and be random. I also wanted random stars to twinkle in the night sky and every now and then have static appear on the screen. As for the sound, I downloaded some NASA radio chatter to fit in with the space theme as if you’re watching an actual broadcast about space. Then the static comes in as if your TV is glitching out every now and then, kind of like an old-timey vibe. 

I created separate functions for all the elements in the animation like the TV frame, stars, and static. I had the hardest time with the stars because drawing lines in a circle around a center pivot point is not as easy as it seems. I learned about rotate() and transformations (which you had to use with rotate):

push();
// translate so that it rotates at pivot point: middle of the line
translate(startX+12.5,startY+12.5);
// rotate evenly around a circle
rotate(j*360/7);
translate(-startX-12.5,-startY-12.5);
line(startX,startY,startX+25,startY+25);
pop();

It took me so long to figure out how rotating the lines to form stars works, and at one point, my program crashed and I lost all my work after figuring it out and finishing the TV frame and stars (I was under the impression that p5.js autosaves, but it didn’t), and had to redo a good chunk of the project. There was a lot of math involved for all my elements and lots of randomness; I wanted random line thicknesses for the TV frame and stars, random number of lines and stars, and random shades of gray for the static.

I also used audio files I uploaded to the sketch:

staticNoise = loadSound('staticNoise.mp3');
nasaChatter = loadSound('nasaRadioChatter.mp3');

These two sounds toggle on and off with each other depending on what comes on the screen.

For the future, I’d like to sync up the audio and screen a bit more; it feels like the audio is lagging behind what’s being shown on the screen. At the same time, it kind of adds to the old-timey effect.

Glitch Self Portrait – Week 1

Click on the piece with your mouse!

When coming up with an idea for this project, I wanted some kind of dynamic or interactive image; I feel like a static portrait can’t portray me. The final product ended up being a face made out of typed letters positioned in a way to create an image with animated and random glitches in the background. I also put the entire thing in a computer frame as if I’m trapped in a confined space. Every time the user clicks on the mouse within the canvas, a glitch effect happens where my portrait duplicates in strange ways, as if I’m malfunctioning. This represents my sensitivity to external stimuli. I guess the portrait is conveying that deep down, behind my exterior (behind the screen), there’s a mess boiling up, especially if I’m exposed to overwhelming experiences.

I used the mouseClicked() built-in function to get the interactivity to work:

// when user clicks on mouse, glitch effect with portrait
function mouseClicked() {
  // random offset and color for the portrait 4 at a time to create glitchy effect
  for (i=0; i<4; i++) {
    var newColor = color(random(255), random(255), random(255));
    portrait(newColor, random(-40,40));
  }
}

I also defined my own function to be called throughout the project called portrait() that draws the overall shape of my portrait and takes 2 arguments, textColor and xOffset. Even though the overall shape of the portrait stays the same, the color and position can change because of these arguments.

function portrait(textColor,xOffset) {
  // styling of the text
  fill(textColor);
  textSize(25);
  textStyle(BOLD);
  
  // trapezoid part of hair
  text("hihihihihi", 150+xOffset,100);
  text("hihihihihihihi", 130+xOffset,120);
  text("hihihihihihihihihi", 110+xOffset,140);
  
  // start of the two sides of hair
  text("hihihihi", 100+xOffset, 160);
  text("hihihihi", 230+xOffset, 160);
  
  // two sides of hair looped over and over to create length
  for (let i=0; i<8; i++) {
    text("hihihi", 100+xOffset,180+20*i);
  }
  for (let i=0; i<8; i++) {
    text("hihihi", 250+xOffset,180+20*i);
  }
  
  // face
  text("O", 180+xOffset, 200);
  text("O", 220+xOffset, 200);
  text("3", 200+xOffset, 230);
}

I had some more ambitious ideas that came to mind (that can be applied in the future); I wanted to make the portrait be typed out over time instead of being shown all at once (since the portrait is made out of text, it’d be cool if everything was typed out in a progression). Or, even when the mouse clicking happens, I can generate random letters to populate the portrait instead of just one type of image with the same letters. I think the potential use of random and animations interest me the most for future iterations of this project. In a way, I also want the visual imagery to evoke more of an eerie feeling as well. Having your entire self reside in the digital world and be made up of text feels a little dystopian and out of touch with reality.

Brainstorming/brain dump throughout couple of days (every time I had an idea, I’d write it down):

  • Click on it and the eyes go everywhere, mouth blah blah
  • Interaction inspired the idea
  • Sensitive nature, external stimuli will cause me to internally explode
  • Using text to create drawings and animations
  • Density of characters to shade
  • Use glitchy random background
  • Tv – glitchy colors – glitchy animations