Algorithmic Design App #1 (updated)

While working through this project, I found that including the entire glasses frame looked a bit off and didn’t allow me to include the detail I wanted within the left and right lens frames. To get around this unanticipated problem, as well as a slightly more artistic vantage point, I chose to focus on only one side of the glasses, similar to the image here.

Background and Frame

I found a stock photo of a divergent path. This is meant to symbolize moving through life and making decisions during this journey. I used 2 offset rounded rectangles to create the glasses frame. I used an arch to make the bridge of the glasses and some offset lines to create the arm. In my code there is an array of my three favorite colors (red, Ravens purple, and gold), which informs the colors of the glasses depending on where along the x-axis the mouse is (left third, center third, or right third).

I used 2 sets of nested for loops to manipulate the background image. The first set pixelated the entire image. The second set of four loops undid this pixelation in the area seen through the glasses lens.

‘Objects’ interaction

There is a second array that is filled with 27 icons and images that represent my personality. Some relate to my education, others are direct logos from my favorite authors and musicians, my favorite animals, items from my daily life, and literal symbols of my interests. Using a conditional statement, with every click, several of these images appear, randomly place, within the view of the frame.

Text input

I think it is important to tell the ones you love that you care about them and encourage them. Its even more important to remember that one of those people is yourself. I created a keyPressed() function with conditional statements to allow the user to type, delete, edit, and retype messages onto the bottom of the frame. This feature is meant to encourage positive statements to oneself, since, if this were actually a pair of glasses, the words would be facing the wearer and so the messages are for the wearer alone.

Sight Inhabited by Objects

Continuing to click the mouse, or simply hold the button, will forever continue to fill up this space that represents our sight. Literally, this is “Sight Inhabited by Objects”. I used to cover my room with collages of my favorite things, so this is an extremely pleasant and aesthetically pleasing image to me. However, I think that I have inadvertently created a larger statement about focus and distraction. In the initial view of my project, the subject’s focus is high and tuned in to life and the decisions ahead; there is clarity blocking out the surrounding noise (pixelation). The words of encouragement, or other messages to self, are positive and important (I’ve repeated myself several times about this so I guess I’m really trying to stress it). As attention is given to more and more interests, the subject’s sight is increasingly obstructed until a point at which it is impossible to see the road, life, ahead.

The code used to accomplish this:

String myText = "";

color[] palette = new color[3];
int glassesColor = 0;

PImage[] images = new PImage[27]; //image array
int placeImg = 0;

void setup() {
  size(1000, 600);
  background(255);
  textSize(24);

//add split pathway background
  PImage img = loadImage("path2.jpg");
  image(img, 0, 0, width, height);

//pixelate image outside glasses
  strokeWeight(0);
  img.loadPixels();
  for (int x=0; x <width; x+=10) {
    for (int y=0; y <height; y+=10) {
      color c = img.pixels[y*img.width+x];
      fill(c);
      rect(x, y, 10, 10);
    }
  }
  
  //make image clear within the glasses
  for (int x=68; x <834; x++) {
    for (int y=60; y <534; y++) {
      color c = img.pixels[y*img.width+x];
      fill(c);
      rect(x, y, 1, 1);
    }
  }

//add my fav colors to color palette array
  palette[0] = color(155, 2, 10);  //dark red
  palette[1] = color(45, 46, 116);  //ravens purple
  palette[2] = color(204, 166, 103);  //ravens gold

//add images to images array
  images[0] = loadImage("fckh8logo.png");
  images[1] = loadImage("politicaldarwin.png");
  images[2] = loadImage("coffee.png");
  images[3] = loadImage("laptop.png");
  images[4] = loadImage("skate.png");
  images[5] = loadImage("key.png");
  images[6] = loadImage("pimenta.png");
  images[7] = loadImage("education.png");
  images[8] = loadImage("splashmusic.png");
  images[9] = loadImage("travel.png");
  images[10] = loadImage("OGdarwin.png");
  images[11] = loadImage("aaalogo.png");
  images[12] = loadImage("dna.png");
  images[13] = loadImage("eap.png");
  images[14] = loadImage("Libertarian_Party_US_Logo.png");
  images[15] = loadImage("giraffe.png");
  images[16] = loadImage("humanist.png");
  images[17] = loadImage("invisiblemonsters.png");
  images[18] = loadImage("letter.png");
  images[19] = loadImage("meatless.png");
  images[20] = loadImage("nirvana.png");
  images[21] = loadImage("owl.png");
  images[22] = loadImage("plane.png");
  images[23] = loadImage("ptwleogo.png");
  images[24] = loadImage("rosie.png");
  images[25] = loadImage("Tacos.png");
  images[26] = loadImage("twofacefightclub.png");

strokeWeight(31);
}

void draw() {
  fill(255);
  noFill();

glassesColor = (int) map(mouseX, 0, width, 0, 3);
  stroke( palette[glassesColor]);

if (mousePressed == true) {
    placeImg++;
    if (! (placeImg < 27)) {
      placeImg = 0;
    }
    image( images[placeImg], random(90, 620), random(80, 385));
  }

//glasses
  //stroke(glassesColor);
  //right side of glasses
  rect(50, 50, 800, 500, 100, 130, 210, 250);  //right lens
  rect(50, 60, 800, 521, 160, 190, 220, 270);  //right lense to add appearance of varying stroke weight on same rect
  arc(0, 190, 105, 80, PI+QUARTER_PI, TWO_PI);  //bridge

//arm
  line(855, 120, 1000, 135);    
  line(855, 150, 1000, 165);    //arm offset to add thickness 
  line(855, 180, 1000, 195);    // ditto
  line(855, 200, 1000, 205);    //add different angle to bottom

//nose rest thing under bridge
  noStroke();
  fill(131, 130, 130);  //grey
  ellipse(60, 270, 60, 140);

fill(255);
  textAlign(CENTER);
  text(myText, 155, 545, 600, 200);
  
  //saveFrame("output-####.png");
}

void keyPressed() {
  if (keyCode == BACKSPACE) {   
    if (myText.length() > 0) {
      myText = myText.substring(0, myText.length()-1);
    }
  } else if (keyCode == DELETE) {
    myText = "";
  } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
    myText = myText + key;
  }
}