Author: Vivian

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.

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