Compositions in Color

This week’s Visual Language assignment required students to, first, choose a color palette that represents them and then use that color palette in six compositions. As I began brainstorming the project I knew that I wanted to use visual imagery to choose my color palette.

I also decided that I wanted the palette to have a personal connection to me so I decided to choose from my photography portfolio. I decided to use a series of photos from my travels in Portugal and Southern Spain. The light tones and pastel colors are some of my favorite in Europe and bring back memories of my travels in that area. Below are a few photos that I added color palettes to.

lazySunday.jpg
sevilleScene.jpg
34950002 (1)-Recovered.jpg

I decided to use the color palette from the fourth photo.

the first few compositions I created came from the idea that this color palette is not common to see in large American cities or just in America in general. That being so, I decided to manipulate two photos from the Pacific Northwest and one photo of NYC to add this Southern Portuguese color scheme to.

  Cannon Beach Scene

Cannon Beach Scene

Hood Valley_edited.jpg

Hood River Valley

 NYC

NYC

The next set of compositions I created were inspired by Spanish Artist Eusebio Sempere. I had discovered his work after visiting the Museo de Reina Sofia in Madrid earlier this year.


Eusebio Sempere influence.jpg
my picasso.jpg

My final composition is a modified piece I created for Computational Media. The piece itself is a parabolic graphic inspired by American Computer Graphics Artist John Whitney. I added my color palette to it and found it quite enjoyable to view.

This assignment opened me up creatively to the use of color and how a certain palette can influence a piece of artwork.

Reimagining John Whitney

The Idea:

I have enjoyed minimalist animation and fractal art for a long time. For this week’s Computational Media assignment I wanted to try and meet the assignment parameters and implement some form of fractal or simplistic generative art.

I began by trying a couple different fractal patterns that incorporated circles but was not happy with any of the results achieved. After some research I discovered the works of John Whitney Sr. One movie of his, in particular, inspired me to try to work with his style of graphics in P5.js.

Beyond how great the visuals are in this video, it’s even more interesting to learn how the people creating the graphics were able to do so with the technology available at the time.

I began to mess around with parametric equations and researching methods of creating this type of graphic generatively. After some time I found a piece of code by Alexander Miller that helped me to work out some of the problems with my process.

From there I played around, for an ungodly amount of time, with sin and cos functions to get a shape I thought was worth working with. Below are a few clips of the sketch running.

I don’t consider this piece finished but the extra functionality and animation I want to add to it is out of the scope for what this assignment required.

The Code for the project largely involved playing around with sinusoidal functions and trying to figure out ways to make the sketch more interactive. I think that I could have done some things more efficiently but overall I think the project turned out well. You can see the code below.

Link to completed sketch: Here

Code:

/*

ICM Homework 4, 10/01/18

This weeks ICM Homework took inspiration on computer art from 
John Whitney. 

-As the user scrolls their mouse across the 
screen, the number of lines being created from the moving 
objects increases.

-When the user clicks the screen the shapes invert

-Finally, the checkbox at the top left of the screen the shape
changes from a line to a rectangle.

*/


let t = 0;

//object to translate the start point of the lines 
//and set basic functionality

let trans = {
  numLines: 25,
  x: 2,
  y: 2,
};

function setup() {
  createCanvas(600, 600);
  background(0);


  //create a checkbox for changing the shape to rectangles
  rectCheckbox = createCheckbox('rectangles', false);
  rectCheckbox.changed(parabolicEffect);
  rectCheckbox.position(10, 20);


}

function draw() {
  background(0, 0, 0);

  strokeWeight(4);


  //move parabolic shape to center of screen
  translate(width / trans.x, height / trans.y);

  //text for checkbox
  textSize(12);
  fill(255);
  text('Rectangles', -290, -280);

  //call to parabolic effect function
  parabolicEffect();

  // increase the value being pushed into the function  
  t += .3;


}



//parabolic function x
function x(t) {
  if (mouseIsPressed) {
    return -sin(t / 10) * 100 + -sin(t / 10) * 100;
  } else {

    return sin(t / 10) * 100 + sin(t / 10) * 100;
  }
}


//parabolic function y
function y(t) {
  if (mouseIsPressed) {
    for (let i = 0; i < 20; i++) {
      return cos(t / 10) * i;
    }
  } else {
    return -cos(t / 10) * 20;

  }
}

//parabolic function x1
function x1(t) {

  if (mouseIsPressed) {
    return -sin(t / 10) * 100 + -cos(t / 10) * 100;
  } else {
    return sin(t / 10) * 100 + cos(t / 10) * 100;

  }
}

//parabolic function y1
function y1(t) {
  if (mouseIsPressed) {
    return cos(t / 20) * 200 + sin(t / 10) * 100;
  } else {
    return -cos(t / 20) * 200 + -sin(t / 10) * 100;

  }


}
/*
The parabolicEffect function creates the shapes at different 
points mapped to the various parabolic functions.
There is an offset of i or j added to each shape that 
give speed and tracing effects

*/
function parabolicEffect() {


  //map the cursor movement to the number of lines on screen
  let deltaX = map(mouseX, 0, width, 0, trans.numLines);

  //check to see if the rectangle checkbox is true or not
  if (rectCheckbox.checked()) {

    //create the rectangle shape and add in the offset of i 
    for (let i = 0; i < deltaX; i++) {
      noFill();
      stroke(111, 195, 223, 50 + (i * 4));
      rect(x(t + i), y(t + i), x1(t + i), y1(t + i));
      rect(x1(t + i), y(t + i), x(t + i), y1(t + i));

    }
    //create the rectangle shape and add in the offset of j
    for (let j = 5; j < deltaX * 2; j++) {
      stroke(218, 112, 214, 50 + (j * 4));
      rect(x(t - j), y(t - j), x1(t - j), y1(t - j));
      rect(x(t - j), y1(t - j), x1(t - j), y(t - j));

    }
  } else {

    //create the lines and add in the offset of i
    for (let i = 0; i < deltaX; i++) {
      noFill();
      stroke(111, 195, 223, 50 + (i * 4));
      line(x(t + i), y(t + i), x1(t + i), y1(t + i));
      line(x1(t + i), y(t + i), x(t + i), y1(t + i));

    }

    //create the lines and add in the offset of j
    for (let j = 5; j < deltaX * 2; j++) {
      //  fill(218, 112, 214, 50);
      stroke(218, 112, 214, 50 + (j * 4));
      line(x(t - j), y(t - j), x1(t - j), y1(t - j));
      line(x(t - j), y1(t - j), x1(t - j), y(t - j));

    }
  }
}

Cashless Metrocard Machine Observation

I decided to observe the use of a cashless metrocard machine for this last week’s Physical Computing assignment. I chose the metrocard machine on the Bogart St, Morgan Ave L train stop because it is a highly trafficked stop in my neighborhood. The purpose of these machines is to dispense new metrocards, refill existing cards, and to check the available balance on cards.

I observed people using the machine around rush hour, so it seemed that a majority of the people using it at that time lived in the area and were commuting to work. I watched 10 or so people use the machine and the part that held people up the most, from what I could tell, was swiping the card. There are no clear instructions on how to insert the card. Whether you should leave the card in or pull it out is not made clear and even if a person has used the machines before there are still issues with the swiping.

The touch screen interface was very quick and responsive for the people using the machine. Navigating the different pages seemed easy for people and not much backtracking needed to be done. I have to admit that if I had been doing this observation somewhere more tourist centered that may have yielded different results but being that these machines need to be streamlined and allow the everyday commuter to use quickly I think the observation was fair. Finally, The average time each person spent at the machines was around 15 seconds.

If there was a cash accepting machine next to the cashless one it would have been interesting to compare the accessibility of both.

20180927_091600.jpg

When looking for accessibility options on the machine I was able to see a few design elements. The first being braille and an audio jack next to the touch screen. After doing a bit of research online I was able to find that the braille gives instructions to visually impaired people to use the audio jack to give audio and personal keypad instructions to the machine instead of using the touch interface. The design of the machine is not trying to hide any of the accessibility features like the color coding or braille signage. Instead it takes the opposite approach and makes those features prominent and works the rest of the design around them.

flowing LEDs

Idea and Design

Homework 3 required students to create a circuit using using both analog and digital components. One type of circuit I have always enjoyed is the led chaser. This circuit is an array of LEDs turning on and off in a predetermined manner. I decided to use a potentiometer to control the speed of the LEDs turning on and off. Below you can see the schematic of the circuit.

 Figure 1. Potentiometer Driven LED Chaser Circuit

Figure 1. Potentiometer Driven LED Chaser Circuit

I decided to utilize all twelve digital out ports(pins 2-13) of the Arduino to drive 12 LEDS with the potentiometer’s wiper connected to the A0 port. After wiring, programming the Arduino, and some minor debugging of the code the circuit worked as expected.

 Figure 2. Photo of the fully wired circuit.

Figure 2. Photo of the fully wired circuit.

As shown above, when the potentiometer is twisted clockwise the speed at which the LED’s turn on and off begins to increase until the potentiometer is fully turned and the LEDs start to look like they are just flickering. It was enjoyable using the potentiometer to make this circuit and I began thinking of other analog inputs to control the LEDs, like a IR sensor or force sensor.

I decided to attempt to add more functionality to the circuit by adding a push button and having a state where if the button was pressed then the potentiometer’s location would dictate which led was on. After spending some time on this I wasn’t able to reach full functionality.

 Figure 3. Modified circuit with pushbutton added.

Figure 3. Modified circuit with pushbutton added.

This project got me thinking about different ways that these types of circuits could be used. Not just to drive LEDs but other larger more scalable projects.

Below you can see the code for the Chaser Circuit and additional, less functional circuit:

CODE

/*
 * Morgan Mueller 
 * PCOMP Homework 3
 * Basic LED chaser circuit
 * 
 */
int ledPin = 0;
int potPin = A0;
int btnSwitch = 2;
int chooseLED = 0;
int chooseLastLED = 0;

// set all LEDs and the button to their designated states
void setup() {
for (ledPin = 3; ledPin <14; ledPin++){
pinMode(ledPin, OUTPUT);
  }
  //push button for second part of code
  pinMode(btnSwitch, INPUT);
  pinMode(chooseLED, OUTPUT);
  pinMode(chooseLastLED, OUTPUT);
}

void loop() {
  //if the button is not pressed then run the led chaser circuit
  if(digitalRead(btnSwitch) == LOW){
    //write the value of the ledPin
    for (ledPin = 3; ledPin < 14; ledPin++){
      digitalWrite(ledPin,HIGH);
      //use a delay and mapping to read the value of the pot and map it to a time between 1000ms and 10ms
      delay(map(analogRead(potPin),0,1023,1000,10));
      //turn of the led
      digitalWrite(ledPin,LOW);
    }
  }

  else{
    //map the pot value to the current led position
    chooseLED = map(analogRead(potPin), 10, 1023, 3, 13);
      //check to see if the current state is = the last state 
      if(chooseLED != chooseLastLED){
    digitalWrite(chooseLastLED, LOW);
      }
    //write to the current led state  
    analogWrite(chooseLED,HIGH);

    //set the last led state to the current led state
    chooseLastLED = chooseLED;  
    }
  
}

Labs

Elvin Yu and I worked on the labs together, including the digital input and analog input portions. Below are photos from the basic analog and digital input assignments. You can find the Arduino code for the projects here:

Trash City Storyboard Synopsis

Team: Jenny, Morgan, & Eva

General Synopsis:

For our storyboard, we decided to send a message about how important it is to properly throw away trash and recycle. Our story will follow a couple on a date through New York City.  On their way, they experience gradually worse examples of people not caring about how they remove their trash. The film will begin with scenic images of the couple sitting in places like the Brooklyn Bridge Park and Prospect Park.  Then they will witness someone eating and tossing wrappers and food on the ground. They are bothered by this but choose to ignore them and continue on their date. The scenery gradually changes from beautiful images of the city to trash-filled examples of the city. Their date ends at trash-filled stoop.  They have to climb up their stoop over the piles of trash. As they climb, the film rewinds to the scene of the person dropping wrappers on the floor. This time the couple confronts this person and asks them to put their trash into a receptacle. The film ends with a message on the screen about our future and the importance of getting rid of trash properly.


Storyboard

For this project we each decided that it was important to make something impactful but also had elements of satire and implemented enjoyable stylistic elements. Having the couple spend their day in South Brooklyn areas like seemed fitting as the area has a contrast up upscale neighborhoods like Brooklyn Heights, and areas that are in the process of changing and being cleaned up, like Gowanus.

Below are the shots used for each scene. Focusing on simple shots that highlight the deterioration of the environment around the characters is important for this piece. The shots, and scenes also need to have a visual appeal that makes the snowball effect of the trash have the satirical impact desired by the piece.

Shotlist:

  1. long shot over Brooklyn Bridge Park

  2. Long Shot in Prospect Park

  3. Medium shot in front of restaurant

  4. Over the shoulder shot of person throwing trash on the street

  5. Follow Shot of people walking home

  6. Close up shot of people talking to the camera

  7. Camera pans 180 degrees from close up shot to medium shot of old building

  8. Close up shot of coffee

  9. Low angle Close up shot of people with coffee

  10. Long high angle shot of Gowanus Canal

  11. Close up shot of pidgeons

  12. Medium low angle shot in front of home

  13. Low angle shot of stoop

  14. Rewind edited

  15. Close up shot of person throwing trash away

Boarding Pass Redesign and Expressive Words

Initial Re-design

After a week spent going over typography and its wide range of purposes in design we were tasked with re-designing the boarding pass for Delta Airlines shown below.

 Original boarding pass

Original boarding pass

The original boarding pass is extremely cluttered and hard to navigate. My thought process in the new design was to prioritize information based on user perspective. The most important factors seemed to be the boarding time, gate number, and departure time for. If the person flying was to take a quick glance at the pass they should be able to see all the information they need in a few seconds. Other important factors to consider were for the person checking the pass. It needed to be clear that the information on that pass matched the flyer’s ID and be able to scan the pass with ease. Below is the design I came up with.

 Re-designed Boarding Pass

Re-designed Boarding Pass

In terms of typography i decided to use Din for all of the non graphical font as it had the best feel with the purpose of the ticket. I also decided to use different font sizes to highlight parts of the ticket that were more important. I also decided to lay the information out in columns to give the pass a more uniform feel.

Expressive Words

The next part of the homework was to create three different expressive word designs. My lack of illustrator skills caused me some setbacks with a few of the ideas I had in mind initially but each of the three designs I created expresses each of the words I chose.

signal.png

The first word I chose was signal. My thinking behind making the word wavy was that the word signal reminds me of sinusoidal signals. So as best I could I attempted to make a sinusoidalish shape with the word.

Screen Shot 2018-09-26 at 12.14.51 AM.png

The next word I chose was eye. After spending time playing around with words I drew a couple of dots in the word eye and and thought it was a bit comedic that the letter y looked like a nose in the middle and gave the word a sort of facial feature.

ripple.png

The last word I chose was RIPPLE. I decided to have the word be mirrored and then have the mirror have a sort of ripple effect on it, kind of like it was looking at a reflection of itself in the water and a pebble was dropped into the water.

This exercise highlighted my limited skill with photoshop and illustrator but it also had me thinking about words and how people think about words and symbols that represent them.

Insomnia Sound Walk Reflection

Issues and Modifications

A little under a week after finishing the 4 minute sound walk about a sleep deprived person navigating a day at ITP, I’ve had some time to reflect on the walk and peer commentary about it.

A lot of the thought in planning and recording the walk went into the idea that it would be a solo experience. Neither my teammates nor I had planned on what would happen if a group did the walk together. This new dynamic made some issues with the walk and documentation apparent. It was pointed out that having a map made people too reliant on using it and even confused some people. So if the walk was to ever be done again we would not give out a map and only give a short written guide like the one below.

 Updated sound walk guide.

Updated sound walk guide.

One of the issues that we had when recording the walk was how the transition from outside to inside was not immediately clear. So when a group of people did the walk together that doubt was made more apparent. Coinciding with that, Marina pointed out that there was no set beginning to the walk. For some reason it didn’t come up when our group was planning and was left as an oversight in the end. Looking back I would have liked to have thought through a beginning to the walk that was analogous to the ending in terms of its abruptness. One last thing that I would do differently for the next time is to have outside users test the walk more. Not just listen to it, but actually do the walk and then give feedback.

Positives

It became obvious after hearing what everyone had to say about the walk that the theme came across well and that the walk was enjoyable. I think that the walk had elements that really helped immerse people in the main character’s mental state. The addition of the heavy distortion on the sounds towards the end, after the locker scene, really helped to amplify the experience and make it more interesting. It was interesting hearing some people say that they enjoyed the pacing and others not enjoying it. For us the pacing felt like it was a part of the distortion and general uneasiness of the walk from the main character’s perspective.

As far as the work goes, everyone on the team was open to trying different parts of the editing, recording, and ideation which really came across in the final product. Even with the small issues in the final product I believe that with the time allotted it was a success and truly enjoyable.

Vegas Lights

Trial of Errors

After binge watching videos about Reaction Diffusion and Perlin Noise I started to brainstorm ideas for implementing one or the other in the third ICM Homework. I spent more time than I care to admit trying to figure out ways to use them within the realm of my abilities. I finally scaled back my efforts to using bezier curves to make swooping fan patterns controlled by a slider, like the rough sketch below.

 Initial fanning idea.

Initial fanning idea.

Again, I spent way too long trying to get the bezier curves to act in a manner that would be algorithmically scalable. Lack of time and patience caused me to, again, abandon this idea and move on to just using straight lines. Having one set on the top of the frame and another on the bottom. I then began having difficulties making the lines fan out in the way I wanted. The screenshot below is one of the patterns created.

Finally, I decided to switch up my thinking again and make use of the bottom two fanned out sections but then to add more interactivity to the project. The gif below shows the final outcome of my multiple failed attempts at making something I liked.

The final project included a few different elements of algorithmic design, including the shapes and expanding lines. I was able to create the slider with the help of Veronica Alfaro. The Elvis face was added at the end because it felt like the graphic wasn’t quite finished without something in the center portion and all of the rainbow colors felt very Vegas-esqe to me. This homework was a challenge for me in terms of accepting that my programming skills are more limited than I thought they were and that it is necessary for me to spend time analyzing and really understanding the algorithms behind the generative art I enjoy.

Code

/*
ICM Homework 3 
Vegas Lights 
9/24/18
*/
let padding = 50;
let slider;
let img;

//preload function to import the image
function preload() {

  img = loadImage('images/elv.png');
}

function setup() {
  createCanvas(400, 400);
  slider = padding;
  rectMode(CENTER);
}

function draw() {
  background(255);
  noFill();
  
  //create the slider object
  sliderPos = map(slider, padding, width - padding, 0, 20);

  fill(255);
  
  //nested for loops to draw the cirlces and squares in the background
  for (let j = 0; j <= width; j += 20) {
    for (let k = 0; k <= height; k += 20) {
      //let x = random(10) * 100;

      if (sliderPos < 20) {

        ellipse(j, k, 10, 10);
        rect(j + 10, k + 10, 5, 5);
      }
    }

    //make elvis appear as the slider is dragged
    if (sliderPos < 20 && sliderPos > 1) {
     image(img, width / 2 - img.width / 4, height / 2 - img.height / 2,      (sliderPos * 6), (sliderPos * 6));
    }

    //draw fanning lines at the bottom of scree
    for (let i = 0; i <= 50; i++) {
      stroke(random(255), random(255), random(255));
      if (sliderPos <= 20) {

        line(width / 2, height, 0, sliderPos / 2 * i);
        line(width / 2, height, width, sliderPos / 2 * i);
      }

    }


    // if the slider is < 50% then the lines begin to 
    //converge on each other, when > 50% they expand to this point
    
    //code to draw slider at bottom of screen
    fill(255);
    line(padding, height - padding, width - padding, height - padding);
    ellipse(CENTER);
    ellipse(slider, height - padding, 20, 20);

    //set the slider to the mouseX position as long as it is
    //within the correct set of bounds.
    if (mouseIsPressed && mouseY >= height - padding - 10 &&
      mouseY <= height - padding + 10) {
      if (mouseX >= padding && mouseX <= width - padding) {
        slider = mouseX;
      }
    }

  }
}

The LED Fortune Teller

Design

Part of the Week 2 labs required students to make their own switching circuit with a switch of their creation. After thinking about the idea for a bit I saw a paper fan online and started thinking about those joke fortune tellers that everyone made as kids. I decided to make a circuit that would turn on an LED whenever a person’s “fortune” was told. I wanted to embed an LED in the fortune teller and have the person controlling the teller be make the switch connect whenever they wanted.

The circuit I designed was extremely simple and quick to prototype out on the breadboard.

 Schematic 1. Basic Switching Circuit to turn on LED

Schematic 1. Basic Switching Circuit to turn on LED

Creation

Using copper tape I was able to make a switch that could be hidden underneath the fortune teller while it was being used.The process of creating the circuit was quite simple. The biggest issue was making sure that the connections made by the copper under the fortune teller were strong enough to make the LED light up.

 photo of the circuit setup being created.

photo of the circuit setup being created.

The exercise and all labs were good refreshers on switches and basic circuit design/function.

 Top Down view of working circuit.

Top Down view of working circuit.

The Rest of the Labs

Along with the creative switching circuit, the labs required students to put three switches in parallel with an led at the end, then modify the circuit to put the three switches in series and seeing how the circuit acted after that. Once those were completed a circuit with a small DC motor and switch was created and tested out. Finally, an led was added to the switching dc motor circuit.

Below you can see photos of each circuit.

 Parallel Switching Circuit

Parallel Switching Circuit

 Series Switching Circuit

Series Switching Circuit

 DC Motor Switching Circuit.

DC Motor Switching Circuit.

Signage around NYC

New York is full of advertisements and signs for just about everything. This week’s Visual Language assignment required students to photograph two signs that they thought were designed well and two that were poorly designed, then choose one of the poorly designed signs and redesign to follow better design fundamentals.

Well Designed Signs:

Beginning with signs that I think are designed well, whenever I walk around Greenwich Village these signs for the 25th Anniversary of the Village Alliance, hanging from light poles always catch my eye. The contrast of color and the simple design draw my eye initially to the large pink 25 in the middle of the sign and then to the text on the top and bottom of the number. I believe that the sign is a good design because of the simplicity in informing the reader of the purpose and the use of color and space.

 Village Alliance sign

Village Alliance sign

The other sign that I believe is designed well is actually an ad campaign for Lyft that I have been seeing on the L train all summer.

The first thing I notice about these signs are bright colors and names of well known NYC places displayed in large block letters that are filled with cartoons depicting relevant scenes for the sign. After my eye moves from the main word or phrase I notice the minor text and graphics including the Lyft information. I think I enjoy each of these signs so much because they grab my attention for reasons other than them being ads. The graphics are pleasant to look at and if I didn’t know what the places were then I would be inclined to research them.

Poorly Designed Signs:

I’ve lived in Bushwick for almost two years. In that time I’ve walked by this deli numerous times and every time I see it I always chuckle at the layout of the prints on its’ windows, most of all the beverages portion. I actually love the ridiculous of this sign and similar signs on delis all over each borough but in terms of design the signs aren’t great. When first looking at the sign my eye is drawn to the word “Beverages.” Immediately after that my eyes wander around seeing all sorts of random food products, most of which not being drinks. This gives the sign a conflicting statement that could confuse the reader. There is also a lot going on in each of the signs which makes them feel cluttered and distracting.

 MTA service change sign

MTA service change sign

The second poorly designed sign, and the one I chose to redesign, was for an MTA service change on the L train. These signs are always around NYC and are difficult to read due to being densely worded and poor groupings of important text. This sign in particular has important text on the top that is too similar in size to the sub text. The sections for english and the spanish translation are grouped too close together so it can be difficult to distinguish parts of the poster. The alignment of the english and Spanish side is also off. Finally, the instructions for the service change are long winded and a pain to read through.

Below you can see my redesign of the sign. I put most of the emphasis on the separation of english and Spanish, using clearer symbols for alternative modes of transportation, and writing clearer and less dense instructions.

This redesign is in no way a final design but with the time constraint and my limited illustrator skills I believe that it represents my thought process.

 Redesign of MTA Service Change Sign

Redesign of MTA Service Change Sign

Insomnia - A Narrative Driven Sound Walk

Description:

Insomnia is a POV sound walk from the perspective of a sleepy/almost delirious student entering into Tisch and going about their day before heading to class at ITP. The project was created in collaboration with Anna Oh and Timothy Lobiak. During the course of the walk the listener will experience everyday interactions and sounds through this distorted lens. The intended effect being that the user feels as if they are sleepy and easily susceptible to overstimulation. Using the provided map listeners will stop in specific locations that the narrator has his interactions at.

Refining the Idea and Sound Recording:

Following the initial recording of sounds from the first assignment, week two involved more emphasis on learning the fundamentals of Adobe Audition, and flushing out ways to make the narrative more engaging to the listener. After the initial interaction with Audition, Anna, Timothy, and I realized that we would need to dedicate more time to recording extra effects and transitions.

The idea of making normal sounds, such as people talking or lockers opening, more intense was brought up. As was adding some surreal elements to the piece to really exaggerate the fact the the main character was borderline delirious.

After some badgering, I agreed to be the voice of the main character for the project. Tim played the part of the Security Guard, and Anna voiced the friend. We recruited Elvin Ou to voice the professor.

Below you can see an outline of the script and sounds used:

Issues:

We had some of the same issues as the week prior when it came to recording and re-recording sounds. One of the biggest issues was actually editing the whole walk to sound like it was happening in one take. The elevator at the bottom of the building was one of the biggest issues with this. We ended up solving the problem by recording a full walk from the Tisch entrance to the classroom all in one take, early one Sunday morning. Once we recorded the sound this way it was much easier to layer the different sounds and effects on top of the base.

 Map of Tisch and locations listeners will visit

Map of Tisch and locations listeners will visit

Final Thoughts:

Creating this sound walk was an exploration of a medium that I have had little to no experience with prior. The experience of listening to sound walk for the first time to collaborating with two people to create our own narrative driven walk taught me a lot about sound and the intricacies of recording and editing it. I also found the whole process of being limited to only sound genuinely enjoyable and a good introduction to the possibilities of using sound as an art form

You can listen to the full Sound Walk below:

Trippy Solar System

Ideation

For the second Computational Media homework we were tasked with either reconfiguring our first homework to add more degrees of functionality; i.e. animated elements, less hardcoded numbers, and elements that change over time. We could also choose to do something completely different.

I chose to make a solar system with different interactive elements. I decided to do this in part because I had been thinking about the talk Carter Emmart had given to the applications class the week before.

The initial idea for the project was to have the planets in the solar system revolve around the sun with their own, different, gravitational pulls. I also wanted to have asteroids randomly shoot around the screen and have some other effects in place. Implementing some of these ideas was more time consuming than I had initially thought they would be. The most difficult part was creating the different gravitational pulls on the planets. So after a lot of trial and error I decided to go for a less realistic galaxy system and make a trippy one.

Below you can see the end product:

As shown above, the solar system has planets that rotate around the sun. Each planet has a random starting angle and orbit so that they start in different positions and rotate on a slightly different axis each time the program is run. After deciding against using different gravitational pulls I researched best practices for rotation around a set point. This piece of code on open processing helped in my decision to use basic sinusoidal functions to create the rotation. I decided to not show the rings immediately but rather give the user the option of showing the rings if they wanted to, by using a checkbox.

The most spastic part of the program is the “asteroids” flashing around and the “flares” being emitted in a circular pattern from the Sun. I spent some time trying different methods of creating asteroids that would shoot around the screen but after playing around with translation and push()/pop() I found that I enjoyed the way the ring looked when it expanded and shrank around the sun. After adding some effects to change the shape and color randomly it seemed appropriate to call them solar flares. Finally, I added a little space ship that follows

After the Fact

I thought the homework was a good introduction to various p5.js fundamentals, including push(), pop(), translate, and preset variables. This homework also brought to light some limitations I have right now with my thought process and programming abilities and fundamentals that I need to refresh or get better at. Given more time and patience I would have tried harder to implement the gravitational pull and added some extra cosmic type effects. Overall, I thought was enjoyable to play with the code and make something that was interesting; even if the outcome was different than I had imagined it would be.

Code:

    /*
  * Morgan Mueller 
  * ICM Homework 2
  * 09/17/18
  *Trippy Solar System
  */

    let sunX,sunY,sunW,sunH;//sun 
    let ringX,ringY;
    let  planetX,planetY;
    let asteroidX, asteroidY;
    let asteroidLocX, asteroidLocY;
    //spaceship variables
    let spaceShipX = 0;
  let spaceShipY = 0;
    //let changeX, changeY;
    let easing = .05;
  //let mouseLocX, mouseLocY;
    let angle1, angle2, angle3, angle4, angle5;
    let speed = .01; //speed of planets
    let asteroidSpeed = 1;
    let c = 250; //center constant
    let radius = 50;
    let mercOrbit, venOrbit, earOrbit, marOrbit, jupOrbit; //each    planet's orbit
    let ringCheckbox;
    let sunR;

    function setup() {
  createCanvas(500, 500);
  ellipseMode(CENTER);
    sunX=width/2;
  sunY=height/2;
  //planet's orbit is a random number between 0 and 10
  mercOrbit=random(8);
  venOrbit=random(15),
  earOrbit=random(18), 
  marOrbit=random(20), 
  jupOrbit=random(25);
    
  //
  asteroidLocX=random(width / 2);
  asteroidLocY=random(height / 2);
    asteroidX = random(5, 10);
  asteroidY = random(5, 10);
    
    //Checkbox to display the orbital rings when clicked
  fill(255);
  ringCheckbox =createCheckbox('rings',false);
  ringCheckbox.changed(showRings);
  ringCheckbox.position(10,20);
  
  //dictates the starting point of each planet
  angle1 = random(-2,3);
  angle2 = random(-5.6,0.6);
  angle3 = (-0.2,0.9);
  angle4 = (-3.14,3.14);
    angle5 = (0,6.28);

  //random r value for sun bursts  
  sunR = random(220,255);  

}

 //planet rings
  function showRings(){
    if (ringCheckbox.checked()){
    stroke(255);
    noFill();
    ellipse(sunX,sunY,ringX,ringY);
    ellipse(sunX,sunY,ringX*1.75,ringY*1.75);
    ellipse(sunX,sunY,ringX*2.5,ringY*2.5);
      ellipse(sunX,sunY,ringX*3.25,ringY*3.25);
      ellipse(sunX,sunY,ringX*4,ringY*4);
  }
  else{

  }
}

//sun size
sunW=60;
sunH=60;

//planet size
ringX=100;
ringY=100;

function draw() {
      background(0);

  //display rings function called
  showRings();
  
  /*
  drawPlanet function.
  This function creates a planet at a base location
  with an initial speed and angle.
  When called the user can modify the location and orbit rotation.
  */
  function drawPlanet(cx,orbit,angle,radius,speed1,ringW,ringH){
  planetX = c + mercOrbit  + sin(angle) * radius;
  planetY = c + mercOrbit + cos(angle) * radius;
  angle = angle+speed;
  ellipse(planetX,planetY,ringW*1.75,ringH*1.75);

  }
  

  //sun and sun spots
  noStroke();
  fill(253, 184, 19);
  ellipse(sunX,sunY,sunW,sunH);
  fill(255, 153, 0);
  ellipse(sunX  +10,sunY + 5,10,10);
  fill(255, 0, 0);
  ellipse(sunX - 10,sunY - 10,12,12);
  fill(0);
  ellipse(sunX - 10,sunY - 10, 7,7);



  //mercury
  fill(213, 210, 209);
  stroke(0);
  drawPlanet(250,mercOrbit,angle1,radius,speed,11,11);
  angle1=angle1+speed;
  
  //Venus
  fill(139,160,130);
  stroke(0);
  drawPlanet(250,venOrbit,angle2,radius*1.5,speed,14,14);
    angle2=angle2+speed;

  //Earth
  fill(125,68,29);
  drawPlanet(250,venOrbit,angle3,radius*2.3,speed,17,17);
  angle3=angle3+speed;
  
  //Mars
  fill(193,68,14);
  drawPlanet(250,venOrbit,angle4,radius*3.25,speed,15,15);
  angle4=angle4+speed;
  
  //Jupiter
    fill(216,202,157);
  drawPlanet(250,venOrbit,angle5,radius*4.3,speed,20,20);
  angle5=angle5+speed;
  
   //sun flare
    fill(sunR,random(255),random(255));
    noStroke();
  asteroidLocX = asteroidLocX + asteroidSpeed;
  asteroidLocY = asteroidLocY + asteroidSpeed;
  
  //reset asteroid speed if its off screen
  if(asteroidLocX > width || asteroidLocX < 0 || asteroidLocY > height || asteroidLocY < 0){
    asteroidSpeed = random(-5,5);
    
  }
  
  if(asteroidLocX > width || asteroidLocX < 0){
    asteroidLocX = width / 2;  
  }
  
  if(asteroidLocY > height || asteroidLocY < 0){
    asteroidLocY = height / 2;  
  }
  
  //creates the ring of solar flares
  push();
  translate(width / 2, height / 2);
  for(let i = 0; i < 500; i++){
    push();
    rotate(i * -10);
    let randX = random(2,10);
    let randY = random(2,10);
    ellipse(asteroidLocX,asteroidLocY,randX,randY);
    pop();
   }
   pop();
  
  //spaceship
 let mouseLocX = mouseX;
 let mouseLocY = mouseY;

 let  changeX = mouseLocX - spaceShipX;
 let  changeY   = mouseLocY - spaceShipY;
  spaceShipX = spaceShipX + changeX * easing;
  spaceShipY = spaceShipY + changeY * easing;
     fill(255,165,0);
   rect(spaceShipX-7,spaceShipY+9,16,3);
   rect(spaceShipX-7,spaceShipY+3,16,3);

     fill(255, 0, 0);
     rect(spaceShipX-5,spaceShipY+2,15,5);
   rect(spaceShipX-5,spaceShipY+8,15,5);
    fill(0,0,255);
        rect(spaceShipX,spaceShipY,50,15,0,100,100,0);
    
    //spaceship name
    fill(255);
    text("Enterprise",spaceShipX+3,spaceShipY+10);
  

  
  //for loop that makes asteroids appear
    for(j = 20; j<25; j++){
        fill(255);
    ellipse(random(width),random(height),10,10);
  }
  
  //text for rings
  textSize(10);
  fill(255);
  text('Display Rings',12,20);

 }

Video and Sound (East Village Poetry Walk)s

Screen Shot 2018-09-12 at 12.31.49 AM.png

After the first Video and Sound class, I decided that I would go through the East Village Poetry Walk, narrated by Jim Jarmusch and a wide range of poets. This particular walk struck a cord with me due to my minor infatuation with the east village and lower east side’s diverse history. The idea that places I have eaten, drank, and walked by numerous times had, at one point, been the hang outs of great writers, poets, and musicians is something that makes the village seem like it transcends time. Even if the places they had written are gone, the locations that that they had those ideas were still alive and could give inspiration to new people looking for it. Most of all, the walk taught me new things about an area I have spent many hours in and gave me new historical information and facts that can help change perspectives about NYC.

 Map of the East Village poetry walk

Map of the East Village poetry walk

After the walk, I began working with my team to figure out a narrative for our own sound walk. We went through a list of possibilities and finally settled on a narrative that we felt would be interesting to the listener. After planning out the locations, characters, and sounds we began to record using the Zoom recorder. The recording process was difficult due to a wide variety of external noises that caused problems with each audio piece. After multiple takes of each sound bite we felt that we had recorded enough that we were happy with.

You can listen to the sounds clips here

Visual Language (Design Analysis)

My experience with visual design has always been from the perspective of a user and consumer. That being said the first Visual Language assignment required students to analyze the design principles of a poster or similar form of graphic design. The exercise was great in helping me to take the basic design principles and techniques talked about in class and see how they can be applied to any graphic.

The design I chose to analyze was a poster for Outside Lands Music Festival, designed by Jason Munn.

 Outside Lands Music Festival Screen Print designed by Jason Munn.

Outside Lands Music Festival Screen Print designed by Jason Munn.

I chose this poster because I’m a fan of the simplicity of the design and the use of color and negative space. As I began to analyze the principles of design used in the graphic it was easy to see that it adheres to all three fundamental principles (clarity, consistency, simplicity).

Beginning with clarity, the poster presents the viewer with relevant information immediately with the top two blocks being used for informational text about the festival and the acts performing. It is consistent in the three block structure and minimalistic graphics surrounded by a single outer frame. The simplicity of the poster is presented again in the use of three basic blocks and a very minimal bird drawn in the largest block

Visual Language title.jpg

The block on the top left gives the name of the event and the dates it takes place.

Visual Language hw1 artist list.jpg

Block number two (top right) lists all of the artists performing at the festival. there is no formal border around this block but the words are aligned in such a way that it completes the rest of the outer border and forms its own block.

Visual language hw1 layer1.jpg

The bottom, and largest block, is the focal point of the poster. In it there is an image of a bird holding a worm. The bird is interesting and simple because it is created out of the same color as the background, utilizing negative space. The overall drawing is very minimal as well which helps the eye flow through the entire poster with ease.

Visual Language hw1 grid.jpg

From my observation, the grid structure was composed of four horizontal grids. The main grid point is between the top two blocks, which feel as if they flow into each other, and the bottom block. The bottom block feels as if it could act as its own scene.

Visual Language hw1 Color Pallete.jpg

For the color palette the designer used earth tones that play well off of each other for this poster. The use of only four colors gives also adds to the feel of the poster. Using minimal earth tones complements the graphic on the bottom image and gives the overall poster a pleasing design.

 Topanga JNL Regular font

Topanga JNL Regular font

Topanga JNL Regular was the only font used in the poster. This gives the poster a minimalistic feel.

My Interest in Computation

For me, computation relates to my interest in a variety of ways. Having worked with Non profits and Mission Driven organizations I believe that computation can help to make a positive impact on the world. I also believe that computation can help people become more aware of injustice going on in the world on both global and local scales. On a different note my love of visual media and art has brought me to learn about the seemingly endless possibilities of art and media that will cause people to think differently and more progressively.

This term I hope to make projects that push my own creativity but also help me to think about the ways media and computing can be used to positively affect people.

A few projects I love that ended up being integral in me ending up at ITP:

The first is by Jer Thorpe, in which he developed the algorithm used to place the names on the 9/11 Memorial using processing. After reading about the algorithm and the reasoning behind it, I realized that I had no idea that computation could be used in design like that.

https://www.scientificamerican.com/article/september-11-memorial/

Another project that showed me how creative computing could produce social change, or at least help people think differently and be more aware of how technology can be used was by a few ITP alumni. The project called “The Outrage Machine” was an examination of mass surveillance. The piece was just as much performance art and political statement as it was computation which made me begin to think of work I could create in a similar vein.

ICM Homework 1 (Sudo-Portrait)

The first Computational Media assignment began with the decision to attempt to draw a portrait of a classmate. My expose to programming is expansive but coming from a background based around firmware and more low level programming I knew that flexing my creative coding muscles was going to be tedious. Along with that drawing abilities are minimal at best so I knew that sketching out the portrait by hand first wouldn’t be the best way to go about the process. Instead I used illustrator to attempt to make a trace for the portrait to get an idea of the shapes to use in p5. Unfortunately I had difficulty getting the trace work fully as well (My Illustrator skills could use a tune up).

 Attempted Image Trace for Portrait

Attempted Image Trace for Portrait

After the initial sketch and tracing portion I decided that it would be best to dive into the p5 drawing. I used coolors to decide what color scheme would be best for my vision. I also realized midway through that I liked a less realistic portrait and then go for my own interpretation of the subject.

 Sudo-Portrait of a Classmate

Sudo-Portrait of a Classmate

This assignment ended up being a great refresher on basic spacial functions. Many of the mistakes I made while going through the drawing process could have been avoidable if I had done more planning and sketching before just diving into the coding. Overall, though, I am happy with the way the project turned out.

Below you can find my code for the assignment:

function setup() {
 createCanvas(600, 600);
 background(32,178,170);
}
function draw() {
 //shirt and body
smooth();
stroke(123,45,38);
fill(123,45,38);
triangle(270,270,300,320,240,300);
triangle(300,320,360,290,380,340);
//shoulders and arms
quad(250,250,160,290, 120, 470, 210,470,240,300);
//line(420,260, 505, 320); ,380,320
quad(210,470,320,470,380,340,240,300); //cuts off part of collar
//fixed part of shirt
strokeJoin(MITER);
 quad(315, 350,370,260,420,290);
triangle(420,290, 450,308, 315,350);
quad(452,312, 460,470, 320,470);
 quad(452,312, 320,330, 320,455,400,460);
triangle(297,320,370,261,370,305);
rect(325,450,10,15);
stroke(194,197,198);
fill(194,197,198);
triangle(320,300,360,320,370,261); //left shirt collar
 triangle(270,270,240,300,255,250); // right shirt collar
//shirt details
stroke(0,0,0);
strokeWeight(2.5);
line(295,317, 290,470);
 line(310,317, 305,470);
//buttons
ellipse(302, 330, 5,5);
 ellipse(301, 360, 5,5);
 ellipse(300, 390, 5,5);
 ellipse(299, 420, 5,5);
 ellipse(298, 450, 5,5);
//face
stroke(234,199,169);
fill(234,199,169);
triangle(255,249,368,260,300,320);
quad(255,249,368,260,340,210,280,210);
 ellipse(310,160, 110, 170,60);
//Hair(beard)
fill(183,72,42);
stroke(183,72,42);
quad(250,170,250,190,280,250,315,250,300,190);
quad(370,170,370,190,340,250,305,250,330,190);
triangle(250,169,370,169,305,250);
//Hair(top of head)
ellipse(310,83,40,20);
triangle(290,80, 260,110,290,100);
 triangle(300,75, 260,100,320,100);
 triangle(335,75, 290,110,350,100);
//Face details
stroke(234,199,169);
fill(234,199,169);
quad(265,160,260,185,265,195,340,195);
quad(350,160,355,185,350,195,265,160);
triangle(265,195, 300,195,280,215);
triangle(320,195,350,195,335,215);
rect(320,175, 30,20);
fill(249,158,144);
ellipse(310,220,25,5);
//freckles
fill(249,101,14);
stroke(249,101,14);
ellipse(275,195,1,1);
ellipse(285,195,1,1);
ellipse(280,185,1,1);
ellipse(330,195,1,1);
ellipse(340,195,1,1);
ellipse(335,185,1,1);
//ears
fill(234,199,169);
stroke(249,158,144);
arc(250,160,20,37,-90,PI,CHORD);
arc(370,160,20,37,-90,PI,CHORD);
fill(109,111,112);
stroke(109,111,112);
ellipse(252,164,8,12);
ellipse(369,164,8,12);
//eyes and nose
 fill(255);
stroke(255);
rect(275, 155, 20, 10, 50,50,0,0);
rect(320, 155, 20, 10, 50,50,0,0);
fill(11,122,117);
stroke(11,122,117);
ellipse(280,160,7,7);
stroke(194,197,198);
fill(194,197,198);
ellipse(280,160,2,2);
 stroke(11,122,117);
 ellipse(325,160,7,7);
 stroke(194,197,198);
 fill(194,197,198);
 ellipse(325,160,2,2);
fill(25,83,95);
stroke(249,158,144);
strokeWeight(2.5);
line(303,170,302,190);
line(314,170,315,190);
strokeWeight(4);
line(295,255,285,290);
line(315,255,320,275);
//glasses
strokeWeight(2.5);
noFill();
stroke(0);
ellipse(285,160,33,28);
ellipse(331,160,33,28);
line(269,160,250,140);
line(347,160,365,140);
line(300,160,315,160);
//eyebrows
fill(183,72,42);
stroke(183,72,42);
rect(271, 138, 25, 5, 20,20,20,20);
rect(320, 138, 25, 5, 20,20,20,20);
}