Topographic Shadow Box

This week’s Fabrication Assignment was based on using the laser cutter and measurements. This meant making precise measurements with and without the laser cutter using a variety of the tols we learned about in class.

Ideation:

I have used the laser cutter for a few projects at ITP so I initially wanted to try to make a kern cut pattern and then use living hinges to create a lampshade like the one below:

Screen Shot 2018-11-14 at 1.47.35 PM.png

After some research and talking to some people I decided that the whole process would be a bit too labor intensive for the time allotted and my skills.

Once I had decided against the lampshade I decided to do a type of shadow box instead.

Screen Shot 2018-11-14 at 1.53.05 PM.png

The shadow box above was a sort of inspiration in my decision to try and make one. I really like topographic maps though so I wanted to make a shadow box with a topographic map design in it. I decided that using a combination of etching and cutting on acrylic in combination with mylar paper would create the effect that I wanted.

Screen Shot 2018-11-14 at 1.59.15 PM.png

In illustrator I designed this map to be etched and added a border of 5.44’’ x 5.49’’ to be cut so it would fit in a small box that I bought at the container store.

20181113_223010.jpg

I used the 50 watt laser cutter for this piece and set the laser to the recommended power and speed for the etching. The photo above is after the first go through with the laser. I ended up etching over the clear acrylic four times to get the depth and consistency in the pattern I wanted. Once over with the laser to cut and the piece was good. overall to cut this piece it took around an hour of time from start to finish.

20181113_224158.jpg
20181113_194031.jpg

The box above is the one where I would be adding in the leds and the acryllic

20181114_105448.jpg

I added in a few strips of neopixel LEDs along the bottom of the box and then, using a utility knife and wood shaving tools, cut out a small divot in the side of the box to add one more led strip so I could shine lights through the side of the cut acrylic. I also added four standoffs to the corners to hold the map up.

20181114_110854.jpg

I measured and drilled small holes into each corner of the piece for the standoffs using a 1/8th drill bit. When drilling I put a bit too much pressure on the first hole and it cracked the corner of the piece but it was small enough where I didn’t mind the blemish too much.

20181114_114739.jpg

Using mylar paper I created a diffusing screen for the light that would fit beneath the glass.

20181114_131131.jpg

Above is an image of what the map would look like if a light was shown through the bottom of the acrylic map.

Unfortunately when I went to test the led strip none of the leds would work. After wiring up and testing an external strip and seeing that it worked fine I knew that me bending the strips in the box and messing around with the connections probably shorted them out in a few spots. As of right now I did not have the time to fix that so the box does not light up properly.

20181114_142711.jpg

In terms of using the laser cutter and achieving the look that I was going for with the topographic map I was happy with how that turned out. On the other hand, I am not really happy with how the whole box and system looks. I am continuing to work on the lights and will hopefully be able to fix them soon. I would like to have more of a depth to the whole piece as well. Whether that means using wood to create that I’m not sure. I also would like to come up with another solution for the led strip that is running along the edge of the acrylic piece. Finally I realized later on that I didn’t need to drill the holes in the acrylic for the standoffs as the acrylic sits in the box at a depth which I like.

PCOMP Final: Reverie Field

The Idea:

The idea for the Physical Computation final project began with me thinking about memory and how people are able to, in some sense, manipulate their memories and really start to live in them like daydreams.

Out of this idea and collaboration with Jenny Lin, the Reverie Field was formed.

Thematic outline: The Reverie Field stores the memories of a user and transforms them in such a way so that the user must think about and dive deeper into the emotions that are connected with each particular memory. The emotions brought up in each person are byproducts of them really spending time focusing on those memories.  

At the end of the experience the lights drop down, surrounding the person. At this point the user feels an attachment to the lights and the thought that they are now surrounded by their memories.

Major Functional Elements:

The major functional elements of the piece are the console unit, the light array, light dropping mechanism, and the narrator.

A breakdown of how each element interacts with the others is as follows:

  1. The user approaches the console and see a glowing palm print on it.

  2. User puts hand on the glowing space and that activates the light array initially.

  3. the user is then prompted to put on the headphones.

  4. After listening to the prompt the user uploads their memory to the array.

  5. The array and user interact with each other (not completely sure on what happens yet)

  6. The user is prompted to walk under the array.

  7. The lights drop around the user and the interaction is complete.

Space needed: Around 6’’ from the console to the array space. the diameter of the hanging array will ideally be around 10’’

System Diagram:

This basic system diagram shows how the user interacts with the piece and then how the piece responds. At this point there is a feedback cycle between the light array and the user choosing the specific emotional state brought up by the memory. This allows the user to experience a wider variety of effects put on by the lights.

Initial Bill of Materials:

Screen Shot 2018-11-07 at 11.31.07 PM.png

Initial thoughts on the bill of materials are that we will need to do a lot of scavenging for parts to keep the cost down or find alternative methods of making portions of the project work. Mainly when it comes to motors, relays, powertails, and the gear box mechanisms.

Timeline:

Screen Shot 2018-11-07 at 11.33.20 PM.png

This timeline is meant to really front load the prototyping and fabrication to give us enough time to pivot in the project if we need to. It also allows us time to really focus on getting everything to work properly and make sure the meaning of the project comes across to the user.

Repeatable Bookends

For this week’s assignment we needed to make five of the same thing. The goals were to focus on the overall process and repeatability. The project had to be multi-processed and more complex than just making five of the same figure on a laser cutter.

I wanted to make something that I would find useful and would require me to use more than a few of the shop resources. Finally, I decided on making bookends. I have a lot of books at my apartment and three sets of bookends would be a nice touch for them.

Plan:

  1. Purchase enough wood, the plan was to make six bookends since an odd number doesn’t necessarily make sense for them.

  2. Cut the wood into twelve, equal sized pieces.

  3. Stencil out the dowel holes for the connecting pieces.

  4. Use the doweling jig and drill press to help drill the holes

  5. Sand the pieces and stain them.

20181105_102254.jpg

I was able to find a 6’ long piece of pine wood at home depot. the length made it perfect for cutting into twelve 6’’ pieces. Two pieces would make one bookend.

20181105_103109.jpg
20181105_103320.jpg

After cutting the wood into the pieces I began working on figuring out what size dowel holes to make. It seemed like 1/4’’ would be the best for the size wood I had.

20181107_141848.jpg

I was excited to use the doweling jig to see how easily I could learn it. It turned out that it made drilling the dowel holes extremely easy and enjoyable and the 1/4’’ bit was the perfect dowel size. After drilling all of the dowel holes on the edges I realized that I was going to be careful when I went to drill the other dowel holes using the drill press.

20181105_115919.jpg
20181105_115929.jpg
20181105_120531.jpg

I measured out the opposite holes for the other half of each bookend and then used the 1/4’’ bit on the drill press to drill those holes. I found this to be much tougher than the doweling jig portion. The first hole I drilled with the Drill Press went straight through the back side of the wood. After a few tries I started to get the hang of it and eventually finished each piece.

20181106_104430.jpg

I was worried about the alignment of some of the dowel holes I had drilled. It turned out that I misaligned a few of the holes to the point where there was space on the back of the bookends and not a perfect edge.

20181106_101751.jpg

My solution for this was to still use continue with the dowel pins, then wood glue each piece together, and then finally sand each one of the backs down to the point where there was no excess wood.

20181106_110050.jpg
20181106_103203.jpg

After a lot of sanding, and some accidental over sanding, I was able to get each bookend to a point I was happy with.

20181106_194617.jpg
20181106_194609.jpg

At this point I was happy with the way each of the bookends was turning out. When I think of bookends I don’t think of light wood so a wood stain was added to each bookend. Before doing this I had no clue that residue from wood glue does not stain the same as the rest of the wood. As a result I was left with parts of each bookend that are significantly lighter in color than the rest.

20181107_100320.jpg

Once they dried I consider the pieces complete but, in my opinion, they are lacking something. Having all that empty space on each of them, I felt like I should have added something to them. So I decided to add an Edison filament lightbulb to the sixth one as a proof of concept for what the rest would look like with the same light.

My process for adding the bulb involved drilling large hole in the base of the bookend and then using a small spade bit to make a divot down the bottom of the bookend so that the cord could be run through. This process was quick and dirty and had I thought about it more I would have gone through the process before staining and scheduled office hours to figure out how to drill the cord path without blowing out the bottom.

20181107_125353.jpg
20181107_131631.jpg

Below are a few images of the final pieces!

20181107_134222.jpg
20181107_134531.jpg

Computational Media Project Proposals

Project 1: Google and Me

 Heat map of locations I have visited

Heat map of locations I have visited

My first ICM final project idea has to do with Google’s location data that has been collected from me for the past two years. Every month I receive an email from them listing out the places I have been that month along with other location based information.

The idea for my project is to take this data and create a narrative from my personal data. The narrative could be counterfactual or more game like but I would like it to be thought provoking in in the way people look at their digital selves vs. their physical selves.

Conceptually, I’m not totally sure of the direction to take this idea and whether to make it purely data based or add other levels of interactivity and visuality. I think that adding a video element to this piece could add an interesting effect.

A few pieces of inspiration for this idea are this map by Vincze Istvan tracing places visited and this article about reading Google’s Location JSON files.

Project 2: Prison Reform and Post-Release Visualizations

My second ICM final project proposal is to create an interactive map to highlight key statistics about Prisoners and recently released inmates in The USA. Inspiration for this project was largely taken from ITP Graduate, Rebecca Ricks’s project dealing with Internet Freedom in the Arab World.

Having worked in the Prison Reform Industry, I would like to explore the efforts the industry have made and whether the impact has been as effective as expected.

A few concerns I have with this project are a lack of available data relevant to the thesis of the piece. After some research it seems that a majority of the available data does not go in depth enough to make this project accurate. The larger concern is that with the time available and the amount of research I must do I’m not sure that I could become fluent enough or knowledgable enough about the details and dynamics of this topic to make a fair case and avoid ignorant mistakes.

Initial Final Project Ideas

Meaning vs. Technical Process

I have been thinking a lot about possible ideas for the final Physical Computing project. Creating something interesting to me that properly meets criteria for the class and is scalable to a possible Winter Show project has been difficult. Below are a few ideas for final projects. Each idea ranges in scope and sentiment behind. None of them are fully thought through and are still rough ideas at the least I think that there may be something in one or two of them that I can work with.

1.

For a while I have been thinking about taking my experience working in prison reform and what I have learned from that field and making a project that involves data about problems in the corrections world. My thoughts for this would either be a somewhat immersive interaction between the user and a manufactured space or a physical visualization of issues with the corrections world through a map and other visual cues.

2.

The second idea I’ve been thinking about involves googles location tracking services. More so that every month I receive an email from google that gives a full breakdown of places I have visited, Miles walked, and more. When I have looked through these emails I’ve noticed that seeing the places on the map linked in the email bring back memories of when I visited those places. Whether it be where I had a date or hung out with friends.

Thinking about this made me realize that my digital self, or the version of me that google remembers doesn’t carry those memories. But at the same time it could be distorting memories and feelings of the places it shows. So my idea would be to push forward with how our digital worlds affect our physical selves. This wouldn’t be in dystopian type way but more in how feelings and emotions are easily manipulated by shoing this data and information

3.

The final idea is more of a piece on introspection and how people really understand each other. I’m not totally sure which direction I would want to take this in but I will update when I am sure.

Minimalistic Flashlight

Initial Idea:

For the first fabrication assignment, students were tasked with creating a flashlight. When I was first thinking of the concept I wanted to create for the flashlight I began thinking about my time working in the architecture and design industry. The Minimalistic and Scandinavian design influences that I was exposed to during that time helped to give me an appreciation for simple work and clean aesthetics.

After some more thought I decided that I wanted to make a small geometric light fixture that would be best placed on a desk. I wanted the apparatus containing the circuitry to be made of wood or metal and I wanted the portion where the light was diffused through to be made of a frosted type acrylic. A few rough sketches are shown below.

 Image 1.

Image 1.

Gathering Materials and initial Fabrication:

I had planned on creating the housing structure for the flashlight myself but I was able to find a small, wooden, hexagonal apparatus at Blick that seemed like it would be perfect for the project. All of the other materials besides the Acryllic sheet used for the diffusion, were sourced from the ITP shop or my own materials. The final piece consisted of eight blue LEDs and a 9V battery.

20181031_164009.jpg
20181031_172917.jpg

The fabrication aspect of the project was not too difficult. I was most worried about laser cutting the acrylic but the whole process was much easier than I had expected.

The most time consuming portion of the project was the soldering of the circuitry and ensuring that it would be able to fit inside of the container.

After adding in the acrylic cutout I realized that the lights didn’t diffuse the way I had hoped and that the emitted light was much less than I expected. I still enjoy the way the piece looks and the light coming out of it looks but if I were to iterate on the piece I would try different types of diffusers.

20181031_164840.jpg

Thoughts on the Finished Product:

As far as the finished product goes, I am happy with the way it turned out and the cleanness of the piece. If I were to continue working on it I would, again, work with other diffusers and LED combinations. I would also refinish the switch area since it is not the cleanest hole. I would also clean up the circuit inside since I pretty much just mashed everything together then superglued it stuck inside. Lastly I would like to actually build my own apparatus.

Pulsating Mirror

Idea:

For this week’s Computational Media assignment I iterated through multiple ideas before deciding to create a mirror that pulsates and changes color with the bass from a song. I wanted to combine both video and sound elements into this project and thought that it would be interesting to see how the live video would respond to sound. I had watched more than a few Coding Train videos about video and sound and began working off of the projects created in the videos.

A lot of the inspiration for the program came from Daniel Shiffman and his coding train videos. The main part being the use of pixel arrays, using vScale, and mapping the pixels. Initially I had planned on using the audio input function of p5’s sound library but decided to switch it to a preloaded sound. Below is a short video of the program.

After doing this initial program I feel like this would work well modified for a live music input and being projected in a club setting. As for an initial piece I think it was a success and would like to expand on it to see what other visually appealing modifications I can make to it.

Click here to try it for yourself(turn your sound on!).

And click here to the full song.

Code:

/*
ICM Homework 10/29/18, Morgan Mueller

This project takes a live video and performs image manipulations 
on it to give a few different results depending on the music being
played.

The first result is that a grayscaled video appears with minorly 
pulsating rectangles. The second is that a colored video appears
with pulsating circles.

The slider at the bottom of the screen increases the size of the 
pixels in the video

*/
let video;

let vScaleSlider1;
let vScaleSlider2;
let vScale = 16;

//load sound info
// FYI for ICM class I called this boring because the DJ's name 
//is DJ Boring
let boring;
let fft;

let slideText;

function preload() {

  // import the song
  boring = loadSound('assets/icmFinal.mp3');

}

function setup() {

  createCanvas(640, 480);
  pixelDensity(1);

  //instantiate sliders
  
  vScaleSlider1 = createSlider(0, 50, 0);
  vScaleSlider1.position(10, 500);
  
  stroke(255);
  let tempText = createElement('p','Pulsation Intensity');
    tempText.position(150, 480);

  video = createCapture(VIDEO);
  video.size(width / vScale, height / vScale);
  video.hide();

  //begin the FFT operations
  fft = new p5.FFT();
  boring.amp(0.7);
  boring.play();

  frameRate(30);

}

function draw() {
  background(51);

  //load the video's pixels
  video.loadPixels();
  loadPixels();

  //analyze the sound 
  let fftSpectrum = fft.analyze();
    //get the energy from the bass
  let boringBass = fft.getEnergy("bass");
    //map the energy from the bass 
  let bassMapped = map(boringBass, 0, 255, 0, vScale + vScaleSlider1.value());
 // console.log(boringMid);

  //iterate through the video in both x and y 
  for (let y = 0; y < video.height; y++) {
    for (let x = 0; x < video.width; x++) {
      //calculation to index through the video's size 
      let index = (video.width - x - 1 + (y * video.width)) * 4;

      //create variables to store pixel values in the video
      let r = video.pixels[index + 0];
      let g = video.pixels[index + 1];
      let b = video.pixels[index + 2];
    
      //average grayscale value of the video
      let bright = (r + g + b) / 3

      //map the brightness 
      let w = map(bright, 0, 255, 0, vScale);
            noStroke();
      
      //if the bass from the song is less than 125 use grayscale
      if (boringBass < 125) {
        fill(bright);
        rectMode(CENTER);
        rect(x * vScale, y * vScale, bassMapped , bassMapped);

        //otherwise set color
      } else {
        fill(r, g, b, random(100, 255));
        ellipseMode(CENTER);
        ellipse(x * vScale, y * vScale, bassMapped , bassMapped );

        slideText;
      }
    }
  }
  
}

The Haunted Window

The Idea:

For the PCOMP Midterm Project Zhe Wang and I created a Horror themed window display. Requirements for the project stipulated that the project be interactive, have a halloween party theme, and utilize serial communication in some way. Recently I have been really interested in public works of art and just putting pieces in a space and seeing how random passerby’s interact with them. After iterating through a few ideas with public spaces in mind we first thought about using a door then after some time we settled on a window.

It was important for us to focus on drawing people into the interaction and try to have them feel immersed in experience when viewing it.

received_341071519799604 (1).jpeg

Functionality of the Piece:

  • Curtain that opens and closes when user gets within a certain distance of the installation.

  • Sounds that are dependent on the user’s distance.

  • Startling element inside of the display. (End result was a doll with a spinning head)

  • Interactive lighting effects

Trials and Error of Fabrication:

We knew that one of the most difficult parts of getting this project to be feasible was going to be getting the window so we made that a priority. Luckily we were able to find one on our first try at the big reuse in Brooklyn. After that we got the plywood from Home Depot and the doll from a halloween store and rest of the non technical supplies from the soft lab.

The fabrication portion of the project was one of the most labor intensive parts of the project. It included building the container for the window and materials, and building the “chair” for the doll to sit on, and the mount for the inner dc motor.

20181016_190516.jpg
20181020_151355.jpg

Prototyping:

Prototyping for the project included working with the two motors (One Stepper and one regular DC) to make sure that they functioned properly in the environment. It also included building out the lighting display. After all of the pieces were working separately one a breadboard I perf boarded out two separate circuits for the motors, lights and ultrasonic sensor.

20181024_015001.jpg
IMG_2307.jpg

Interactivity and the Workings of the Project:

The final piece had the following elements:

  • When the user walks within 100cm of the window from the front the lights change from white to red and the noise being output from the box changes to a disturbing tone.

  • Shortly after the curtain opens and the user is greeted by a terrifying doll. Within a few seconds the doll’s head begins to spin rapidly.

  • After a few seconds of this the dolls head stops and the curtain shuts.

  • The piece then resets and waits for the next user to approach

The main sensing component for the project was a standard ultrasonic sensor that would send bits of data to p5 from Arduino.

Final Piece:

Below you can watch a short video of the piece being interacted with.

Here is the code for the project:

p5 Code:

/*

Zhe Wang and Morgan Mueller

Physical Computation 2018 Midterm Project P5 code.

The main purpose for this p5 sketch was to communicate with the arduino

serially and play selected sounds when the data being sent in

meets a certain criteria

*/

//define noises

let noise;

let noise2;

let noise3;

let noise4;

let noise5;

let enticingNoises = []

//define serial variables

let serial;

let fromSerial;

let called = true;

let countdown = 0;

let delay = 2000;

let noiseBool;

//load sounds into the program

function preload() {

soundFormats('wav', 'mp3');

noise = loadSound('helpMe.mp3');

noise2 = loadSound('distortedVocals.mp3');

noise3 = loadSound('playWithMe.mp3');

noise4 = loadSound('imSoScared.mp3');

noise5 = loadSound('child_laugh.mp3');

enticingNoises = [noise, noise3, noise4, noise5];

}

function setup() {

createCanvas(500, 500);

// make a new instance of serialport library

serial = new p5.SerialPort();

// callback function for serialport list event

serial.on('list', printList);

// callback for new data coming in

serial.on('data', serialEvent);

// list the serial ports

serial.list();

// open a port

serial.open("/dev/cu.usbmodem1421");

noise.setVolume(0.5);

noise2.setVolume(0.5);

background(0, 0, 0);

}

// function playNoise() {

// if (fromSerial < 50) {

// print("hello");

// noise2.play();

// } else {

// noise.play();

// noise.loop();

// console.log(fromSerial);

// }

// }

function draw() {

}

function printList(portList) {

for (var i = 0; i < portList.length; i++) {

// Display the list the console:

print(i + " " + portList[i]);

}

}

function serialEvent() {

// this is called when data is recieved, data will then live in fromSerial

fromSerial = serial.read();

print(fromSerial);

//if the person is within 100 cm then play the defined sound

if (fromSerial < 100 && !called && millis() - countdown > delay) {

noise.pause();

noise2.amp(100);

noise2.play();

//noise2.pause();

//noise5.play();

countdown = millis();

print("called 1");

called = true;

}

//if there is no person being sensed then play the other sound

else if (fromSerial > 100 && called && millis() - countdown > delay) {

//for (let i = 0; i < enticingNoises.length; i++) {

noise2.pause();

// noise.amp(100);

// noise.play();

// noise.loop();

// noise.pause();

noise3.amp();

noise3.play();

noise3.loop(); t

// noise4.play();

// noise4.pause();

countdown = millis();

print("called 2")

called = false;

noiseBool = false;

}

}

Arduino code:

/*

Zhe Wang and Morgan Mueller PCOMP Midterm 2018

*/

#include <Stepper.h>

#include <Adafruit_NeoPixel.h>

#ifdef __AVR__

#include <avr/power.h>

#endif

#define PIN 6

//pin instantiation for distance sensor

const int trigPin = 2;

const int echoPin = 3;

//pin instantiation for dc motor

const int firstDCPin = 4;

const int secondDCPin = 7;

const int dcEnablePin = 5;

bool test = false;

//stepper revolutions

const int stepsPerRevolution = 1536; // change this to fit the number of steps per revolution

// for your motor

// initialize the stepper library on pins 8 through 11:

Stepper myStepper(stepsPerRevolution, 8, 9, 10, 11);

Adafruit_NeoPixel strip = Adafruit_NeoPixel(56, PIN, NEO_GRB + NEO_KHZ800);

long duration; //duration in microseconds

int distance; // distance in cm

void setup() {

Serial.begin(9600);

// set the speed at 180 rpm:

myStepper.setSpeed(20);

// initialize the serial port:

pinMode(trigPin, OUTPUT);

pinMode(echoPin, INPUT);

//LED Strip

strip.begin();

strip.show(); // Initialize all pixels to 'off'

strip.setBrightness(70);

//DC Motor pins

pinMode(firstDCPin, OUTPUT);

pinMode(secondDCPin, OUTPUT);

pinMode(dcEnablePin, OUTPUT);

//set enable pin high so motor can turn on

digitalWrite(dcEnablePin, HIGH);

}

void loop() {

//colorSwap(strip.Color(255, 255, 255));

// distance sensor functionailty

digitalWrite(trigPin, LOW);

delayMicroseconds(10);

digitalWrite(trigPin, HIGH);

delayMicroseconds(10);

digitalWrite(trigPin, LOW);

duration = pulseIn(echoPin, HIGH);

//calculate the object's/person's distance

distance = duration * (0.034 / 2);

Serial.write(distance);

//if the distance is less than 50cm or ~ 24 inches, then start the interaction

if (distance < 100 && test == true) {

//change the color of the led strip to red

delay(50);

colorSwap(strip.Color(255, 0, 0)); // Red

delay(10);

//pull the curtain back to the wall

myStepper.step(stepsPerRevolution);

delay(5000);

// delay(5000);

//some event needs to happen here in between the motors

//the stepper pulls the curtain back to open the curtain one more time

//myStepper.step(stepsPerRevolution);

digitalWrite(firstDCPin, LOW); // set leg 1 of the H-bridge low

// delay(10);

digitalWrite(secondDCPin, HIGH); // set leg 2 of the H-bridge high

//test = true;

delay(500);

digitalWrite(firstDCPin, LOW); // set leg 1 of the H-bridge low

// delay(100);

digitalWrite(secondDCPin, HIGH); // set leg 2 of the H-bridge high

delay(5000);

//test = true;

digitalWrite(firstDCPin, LOW); // set leg 1 of the H-bridge low

// delay(100);

digitalWrite(secondDCPin, LOW); // set leg 2 of the H-bridge Low

delay(500);

//the curtain goes back to the wall

myStepper.step(-stepsPerRevolution);

delay(5000);

test = false;

}

else if (test == false && distance > 100) {

colorSwap(strip.Color(255, 255, 255)); // White

// Serial.print("Distance: ");

// Serial.println(distance);

test = true;

}

}

//change color of the led strip

void colorSwap(uint32_t c) {

for (uint16_t i = 0; i < strip.numPixels(); i++) {

strip.setPixelColor(i, c);

strip.show();

}

}

Data Visualization and External APIs

The goal of week seven’s assignment was for students to use an external data source and build a sketch implementing the data.

I began thinking about possibilities for this assignment and my thoughts went directly to comparing novels by two of my favorite authors, Ernest Hemingway and Jack Kerouac. After spending some time trying to find the right API I realized that the task might be too large. So I decided to use the NYT API and see what I could find out about one of the authors then work from there. There were many more articles written by and aboutHemingway than Kerouac so I decided to create a visualization based on his writings with the NYT.

Screen Shot 2018-10-23 at 9.39.14 AM.png

Overall I found the NYT API easy to navigate and use. That along with the help of Dan Schiffman’s series 10 videos I was able to import the data I wanted and begin to analyze.

Where I ran into issues was when I realized that I couldn’t actually access the whole article in the NYT API just the main headlines. This along with the limit of 10 articles began to limit my options.

Finally, I decided to visualize the most used words in his article’s headlines as a sort of proof of concept for my larger idea. I was able to get all of the words into a dictionary and then perform the manipulations on the words to cut out unnecessary characters. Where I ran into trouble was when I tried to visualize the words I could’t figure out a way to access the dictionary to pull the most used words from. Below is the final visualization I was able to create with the words.

Screen Shot 2018-10-23 at 9.46.18 AM.png

I am planning on continuing to work on this project but due to time constraints at the moment I had to call it at creating this basic animation using words that I had to input myself.

See the Program here.

Code:

let urlOne = 'https://api.nytimes.com/svc/search/v2/articlesearch.json?q=ernest%20hemingway&begin_date=19361231&end_date=19371231';
let apiKey = '8be8b3ad946d476aafdcc023aec18d47';

let webURLOne = urlOne + '&api-key=' + apiKey;
let wordHolder;

//global array for Hemingway data
let hem = [];
//let headlines = [];
let hemWordCounts = {};

function setup() {
  createCanvas(400, 400);

  title = createElement('h1', 'Ernest Hemingway and His Most Used Words in His Written Articles').style('text-align', 'center');

  //load json files
  loadJSON(webURLOne, gotData);
  ellipseMode(CENTER);

}

function draw() {

  let mod = 0;
  background(255);
  textSize(10);
  fill(0);

  // loop through the array and create the shapes based on the
  //use of words in hemingways titles.
  for (let i = 0; i < hem.length; i++) {
    for (let j = 0; j < hem[i].length; j++) {

      if (hem[i][j] === "Madrid") {
        fill(random(hemWordCounts.hemingway));
        ellipse(random(hemWordCounts.hemingway) + 250, random(hemWordCounts.hemingway) + 100, 10 * mod, 10 * mod);
        mod++;
      } else if (hem[i][j] === "Writer") {

        fill(random(hemWordCounts.ernest), 40, hemWordCounts.war);
        rect(random(hemWordCounts.ernest) + 100, random(hemWordCounts.ernest) + 200, 10 * mod, 10 * mod);
        mod++;
      } else if (hem[i][j] === "Spain") {
        fill(random(hemWordCounts.spain), hemWordCounts.spain, 100);
        ellipse(random(hemWordCounts.spain) + 30, random(hemWordCounts.spain) + 300, 10 * mod, 10 * mod);
        mod++;
      } else if (hem[i][j] === "War") {
        fill(random(hemWordCounts.war), hemWordCounts.war * 40, random(hemWordCounts.war));
        ellipse(random(hemWordCounts.war) + 350, random(hemWordCounts.war) + 350, 10 * mod, 10 * mod);
        mod++;
      }


    }
  }

}

/*
This function goes through each value in the hem array and checks for 
the frequency of each word, assigning that word a value in the hemWordCounts object

*/
function stringCompare() {


  //console.log(hemWordCounts);

  for (i = 0; i < hem.length; i++) {
    for (j = 0; j < hem[i].length; j++) {


      wordHolder = hem[i][j].toLowerCase().trim(' ');
      // console.log(wordHolder);

      // if this word is not already a property of the wordCounts object, create it with the value of 1
      if (!hemWordCounts[wordHolder]) {
        hemWordCounts[wordHolder] = 1;
        // console.log("Added : " + wordHolder);
      } else {
        // if this word IS already a property of wordCounts, then increase its count value
        hemWordCounts[wordHolder]++;
        //print(hemWordCounts);
      }
    }

  }
  //iterates over all the values in the dictionary
  let value;
  // console.log(hemWordCounts)
  Object.keys(hemWordCounts).forEach(function(key) {
    value = hemWordCounts[key];
    //console.log(key + " : " + value);
  });

}

function gotData(data) {
  print('ready');
  let articleInfo = data.response.docs;

  //loop thrrugh the articles and assign them to array
  for (i = 0; i < articleInfo.length; i++) {

    createP(articleInfo[i].headline.main);
    //let headline = articleInfo[i].headline;
    let hemArray = articleInfo[i].headline.main.split(' ');
    //headlines.push(headline);
    hem.push(hemArray);
  }
  stringCompare();
  print(hem);
  print(hemWordCounts.spain);
}

Connecting P5 with Arduino

Assignment

This week in PCOMP we covered basic serial communication and how to connect p5.js with Arduino. The labs had us setting up the serial communication protocols and interfaces that we will be using throughout the rest of the semester. This meant downloading the serial controller app and using the github repository for porting the arduino code that was written by Shawn Van Every. the use of serial communication in this way creates a whole new range of possibilities for using both Arduino and Pt.

After the initial labs, the homework was to make a serial application that controls an animation project using analog inputs. I decided to control one of my more recent ICM homework assignments using a couple of potentiometers.

Here is a link to the original assignment.

I decided to have the potentiometers change different portions of the sinusoids, the opacity of the lines being drawn, and when in combination, the direction of the rotation.

Below are a few videos showing the animation with analog controls.

this assignment was a good introduction to the basics of serial communication between the two platforms.

Midterm Project Status

For our midterm project, Zhe and I are building a Haunted window interaction. the premise of the interaction will be that a user walks up to the window and sees a closed curtain. The curtain will then open, partially, and a light will turn on in the middle of the apparatus. Some more events that are not completely defined will come after. Below is a mockup of the window apparatus and sketch of display.

received_341071519799604.jpg

Design of Personal Business Card

The final project for Visual Language was to design a personal business card. It was important to keep all of the design elements we learned over the semester in mind for the design. While we were going over the criteria for the assignment I knew that I wanted to keep the design simple and minimal. For me, this meant using only one main color and the logo I designed for my website last year.

Here is the logo:

MM logo Black.png

I wanted to incorporate a color from one of the color palettes that I created a few weeks ago and ended up on a paster blue/greenish color I saw all over Portugal. As far as the other design elements went, I got inspiration from a lot of different designs on pinterest and just searching the web.

Below is the front side of the card:

MMBusinessCardFrontNew.jpg
MMBusinessCardBack_test-02.jpg

I chose Futura for the text and wanted to have both portions be offset to the corners. I initially wanted the design to just have a circle surrounding the logo and then nothing on the other side of the card besides the text but it felt wrong. Jenny Lin helped me to play with the circle and make the whole layout a bit more interesting and appealing to the eye.

In all honesty I still want to work with the overall design. I think that this is more of a first iteration of the whole card that I will improve upon as my design skills increase.

Trash Crisis (Final Movie)

After three weeks of filming, re-filming, editing, voiceover work and other tweaks the Final Video and Sound Movie is complete! The team( Eva Jenny, and myself) went through the full spectrum of loving and hating the project before its completion But here it is!

The movie’s plot stayed the same to that of the initial storyboard with some tweaking to shots and addition of some extra factors. The plot was that a young couple would be going on a date around Brooklyn and then as they’re eating at a cafe, they watch a person throw trash on the ground but they don’t do anything about it. After this there is a comical spiral of events involving trash until the climax.

For the video, each of us took turns in the major roles and had a say in the creative direction of the piece. Jenny and Eva agreed to be the couple for the film which was great. Jenny was also the main editor for the piece, Eva did a majority of the creative direction, and I did the videography and a lot of the site planning.

The issues that the team ran into were largely logistical. Since the concept for the movie required shooting in multiple outdoor locations in Brooklyn, that meant we had to plan the shooting schedule well enough to budget for any problems that could arrive. It turned out that we didn’t do an amazing job at that, weather was also a factor, so we had to spend two more days than planned shooting the movie.

There was a lot of worry about the plot and making sure that the story came across the way we intended it to. A lot of our worries were able to be fixed in post. On top of this though, I learned how important it is to do multiple takes from different angles. I spent some time beating myself up for not doing enough takes at a few of the spots or taking shots from areas that would change the perspective. But you live and you learn and I’m glad the process happened and I’m quite happy with the result.

As a bonus. Here are a few photos of us recording and listening to the voiceover:

The DOM and Style Elements

Week 6 required students to either create their own webpage using HTML, CSS, and Javascript elements. After some thought I wanted to attempt to make a page similar to the 90s type informational pages. Basically, something similar to this. I wanted to keep with the use of generative and parabolic art so I figured making an informational page about the artists that I enjoy and have some graphics I have created on there.

Planning and scheduling time to work on this assignment was a failure on my part this week so when it came to actually working with the CSS and HTML portion later on I realized that I was over my head for the time remaining. This being so I scaled back to a basic functionality project.

Here is a screenshot of the final piece:

Screen Shot 2018-10-16 at 8.37.13 AM.png

The piece ended up having two main DOM elements. The first being the checkbox on the left hand portion. This checkbox was used in the previous homework involving this graphic as well. The other was the button to invert the graphic on the right side. Full functionality of this button was not achieved.

Implementing basic CSS and HTML elements was more fairly simple and satisfying. Most of this involved using <div> classes and ids for the text. I worked within the javascript file itself to edit the DOM elements and use callbacks to get them to function properly.

Overall, I need to spend more time going over the DOM and the proper syntax for CSS and HTML. My time management skills were lacking on this project and it showed in the final product. It is easy to see the power of the DOM and all its elements and that it is something I am going to need to work on to understand better.

Here is a link to the final piece to try for yourself: link.

CODE:

Main Javascript Sketch Code including DOM creation:
/*
ICM Homework 6, 10/15/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;
let divOne;
let divTwo;
let divThree;
let button;
//object to translate the start point of the lines 
//and set basic functionality

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

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

  button = createButton("Invert");
  button.style("float", "right");
  button.style("background-color", "pink")

  button.style("padding", "10px");
  //button.style("border","10px");
  button.mousePressed(mouseIsPressed);

  //create a checkbox for changing the shape to rectangles
  rectCheckbox = createCheckbox('rectangles', false);
  rectCheckbox.changed(parabolicEffect);
  rectCheckbox.style("float", "left");
  rectCheckbox.style("background-color", "pink")
  rectCheckbox.style("color", "black")

  divOne = select("#divOne");
  divOne.html("Geometric Poetry and Similar Inspiration");
  divTwo = select("#divTwo");
  divTwo.html("Artists Eusebio Sempere and John Whitney were pioneers of two different kinds of generated art.");
  divThree = select("#divThree");
  divThree.html("This piece was inspired by John Whitney and is the first in a series of generated graphic works I will be doing");
}

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

  strokeWeight(4);
  //move parabolic shape to center of screen
  translate(width / trans.x, height / trans.y);
  //call to parabolic effect function
  parabolicEffect();
  // increase the value being pushed into the function  
  t += .3;
}

function invert(t) {
  return true;

}

//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++) {
            noFill();
      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));

    }
  }
}

HTML Code:
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <script src="parabolicEffects.js"></script>
  <script src="sketch.js"></script>
  <div id="divOne">Header text</div>
  <div class="theDiv">
  <par id="divTwo">Subtext</par>
  <par id="divThree">Subtext</par>
  </div>
  <br>
</body>
</html>

CSS Code:
html, body {
  margin: 0;
  padding-bottom: 0;
}
    #divOne {
  text-align: center;
  color: white;
  background-color:gray;
  padding: 5px;
  font-size: 30px;
}
    .theDiv {
  text-align: left;
  color: turquoise;
  padding: 5px;
  font-size: 20px;
}

ITP Winter Show Postcard Creation

Part 1.

The first part of this week’s assignment was to create three different compositions with a given set of text and photos. Below are my three compositions. Each is focuses on different elements of the given information. I think that the first composition is my favorite, it is easiest for my eye to follow and feels less crowded than the other two. The last one is close but I think that the white title at the top of the photo throws me off a bit.

 Composition 1.

Composition 1.

 Composition 2.

Composition 2.

 Composition 3.

Composition 3.

Part 2.

For my Winter Show postcard design I wanted to try and focus on the human aspect of ITP. It is difficult to focus on that without acknowledging the technology portion as well. So I began thinking about how they interact and what elements I have seen, since being a student in the program, incorporate both. My first thought went to ITP student Sofia Luisa’s emoji mirror project seen here. When thinking about how to incorporate the idea of showing the people taking selfies with the mirror, Jenny Lin, recommended that I. do a top down view of the selfies in that I show the same photo zoomed in over the course of a few photos until it highlights that the photo was made of emojis. As for the rest of the postcard, I wanted it to be simple and unclustered.

A photo of the postcard is below:

Visual Language HW 5 Winter Show Poster.jpg

In all honesty I don’t think that the poster was actualized in a way I am happy with but I think that the concept is one that could be played with and improved upon. Part of my frustration with the postcard comes from the worry that the bleed from printers will make the small emoji symbols illegible and make the entire piece lose its overall context.

More Animation Fun

This week, I wasn’t really sure what I felt like making for my Computational Media assignment. I spent hours watching coding train videos about everything from flow to genetic algorithms but nothing felt right. I began doing some more research for inspiration and came across this animation. I decided to use this animation as a possibility for my final outcome.

Thinking about how the person created the concaving lines, it seemed that they used a series of points that acted as lines and then used sinusoidal functions to have them converge in the middle of each line. I spent some time trying to work this out for myself but realized that I had not begun to code anything. This being so I decided to just start programming and see where it went.

 Initial animation

Initial animation

After working from this initial animation I decided to try to work with the circle pattern I created in the center. The point of this homework assignment was to work with arrays, classes, and objects so I knew that I had to keep those constraints in mind. I moved the lines being created into a new class and began restructuring the rest of my program around it.

Below are two videos of the final version of the assignment.

The first video shows the animation show the rotation around -pi/8 while the second shows the rotation around pi/4. This change is triggered when the mouse is pressed.

This program was a lot more playing around with numbers and angles than having a set plan for the program. I plan to work on this type of animation further on and work to move past my own limitations in terms of my understanding classes and array management.

You can see the final sketch here: sketch

CODE

/*
ICM HW 5 - Morgan Mueller
This homework takes  the basic idea of last weeks assignment and works 
//with sinusoids again. Using arrays, a class, and objects I created 
//an animation that takes a set of lines and rotates them around 
//an axis in a motion that is somewhat hypnotic
*/


let lines = [];
let t = 0;

function setup() {
  createCanvas(400, 400);

  //create 25 line objecs and add them to the arrya
  for (i = 0; i < 25; i++) {
    lines[i] = new Lines(i);
  }
}

function draw() {
  background(0, 10);
  translate(width / 2, height / 2);
  stroke(255, 20);
  //create the effect on all objects in the array
  for (i = 1; i < 25; i++) {
    lines[i].effect(t);
  }

  //increment the speed 
  t += 0.05;
}

class Lines {

  //constructor function
  constructor(numLines, speed, angRotate) {
    this.numLines = numLines;
    this.speed = speed;
    this.angRotate = angRotate;
  }

  //run function
  run() {

    this.effect();

  }

  // The effect function contains the code for drawing the lines and 
  //performing the calculations on rotate 
  effect(speed) {

    //sets the rotation depening on if the mouse is pressed
    if (mouseIsPressed) {
      this.angRotate = PI / 4;
    } else {
      this.angRotate = -PI / 8;

    }

    //draws the lines and rotates the positions.
    line(this.x(speed * this.numLines), this.y(speed * this.numLines), 0, height / 2);

    //not totally sure why this function causes the randomness that it does
    rotate(this.angRotate * cos(speed * 0.1) + this.angRotate);

    line(this.x1(speed * this.numLines), this.y1(speed * this.numLines), 0, height / 2);

  }


  /*
  this group of functions
  */

  x(t) {

    return sin(t / 30) * 100;

  }

  y(t) {

    return cos(t / 30) * 100;

  }

  x1(t) {

    return sin(t / 50) * 50;

  }

  y1(t) {

    return cos(t / 50) * 50;

  }

}

Hi, How Are You - Not Totally Functional (But It's Okay)

Recently, I have been going through my record collection and came across the album “Hi, How Are You” by Daniel Johnston. On the cover there is an interesting little frog creature; I wanted to make this weeks assignment based around this frog. I decided to try my hand at using the laser cutter to make the frog since I haven’t used it before. The process of creating the file and using the actual laser cutter was much easier than I had previously thought and quite enjoyable. The finished cut is shown below.

20181003_103525.jpg

I wanted to make it interactive so I decided to use a noise detection sensor as the input and have the frog react by making its eyes light a few different colors and having it pivot when a person spoke to it. these actions required:

1 - FC-04 Sound Sensor

1 - Servo

2 - RGB LEDs

6 330 ohm resistors

The schematic is shown below:

 Figure 1. Responsive album schematic

Figure 1. Responsive album schematic

(Fritzing did not have the exact noise sensor schematic piece so I substituted and left the NC of the chosen piece open)

20181004_114237.jpg

After creating the circuit I began to try and fine tune the noise sensor. Documentation I read online said that it’s internal potentiometer was very sensitive and if the voltage tigger point (VTP) was not in the exact right spot then the sensor’s voltage would get stuck at either HIGH or LOW and trigger the output immediately without any smooth transition. I was able to see this problem immediately when I began running and debugging my code.

It turned out that the sound sensor would continually cause me problems no matter what I had sent the potentiometer to. Retrospectively, I should have had a backup sensor that I knew would work but given that I didn’t give myself the time necessary to pivot and work the project in another direction. It is possible that there were other self-driven errors which caused the sensor to not function properly as well. Given the nature of the issue and the fact that I wasn’t able to fix it, I didn’t take the project as far as I wanted to in terms of functionality and casing but am going to keep playing with the sensor and seeking outside help to see if the error is an oversight on my part.

CODE:

#include <Servo.h>
int soundSensor = A0;
Servo servoMotor;
int servoPin = 3;
int LED1_red = 4;
int LED1_green = 5;
int LED1_blue = 6;
int LED2_red = 7;
int LED2_green = 8;
int LED2_blue = 9;
int sensorVal = 0;
void setup() {
  //set sound sensor to input
  pinMode(soundSensor, INPUT);
  //set rgb led pins to outputs
  pinMode(LED1_red, OUTPUT);
  pinMode(LED1_green, OUTPUT);
  pinMode(LED1_blue, OUTPUT);
  pinMode(LED2_red, OUTPUT);
  pinMode(LED2_green, OUTPUT);
  pinMode(LED2_blue, OUTPUT);
  servoMotor.attach(servoPin);
  Serial.begin(9600);
}
void loop() {
  // read the noise sensor and set it equal to sensorVal
  sensorVal = analogRead(soundSensor);
  Serial.println(sensorVal);
  //map sensor value to a smaller range
  int sensorRead = map(sensorVal, 0, 1023, 0, 179);
  //Serial.println(sensorRead);
  digitalWrite(LED1_green, HIGH);
  // digitalWrite(LED2_red, HIGH);
   //read the servopin
  int analogValue = analogRead(servoPin);
  //map the servo to an angle
  int servoAngle = map(analogValue, 0, 1023, 0, 179);
  if ( sensorRead > 500 ) {
    servoAngle ++;
  }
  else if (sensorVal < 500) {
    //    servoMotor.write(servoAngle -= 1);
    servoAngle --;
  }
  servoMotor.write(servoAngle);
  //write green LED high if the servo's angle is > 90
  if (servoAngle > 90) {
    delay(50);
    digitalWrite(LED1_green, HIGH);
    delay(50);
    digitalWrite(LED2_green, HIGH);
  }
  //set all leds low otherwise
  else {
    digitalWrite(LED1_green, LOW);
    digitalWrite(LED1_blue, LOW);
    digitalWrite(LED1_red, LOW);
    digitalWrite(LED2_green, LOW);
    digitalWrite(LED2_blue, LOW);
    digitalWrite(LED2_red, LOW);
  }
}

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: