Assignment 1: Short Video Clip Repository

Process

For the first assignment we had to record 5-10 minutes of short video clips to use as a sample bank. Factors for us to think about were less about narrative and theme and more about visual elements like Light, Color, and Shape. I come from a film photography background and in that type of work I usually try to think think about the visuals of an image I’m composing as well as theme and developing a narrative. Thinking in a different context proved challenging but interesting.

The videos I ended up taking were mostly clips from walking around my neighborhood in Bushwick, to work in Manhattan, and to and from ITP. During these walks I tried to pay attention to light, texture, and juxtaposition, both within the single video and between other clips I had taken. I tried to vary the clips in terms of scale of focus once I found a rhythm with the video taking process.

Clips

Below are a few of the clips I recorded:

Assignment 1: Creating a Web Server

Concept

The first assignment for Connected Devices required us to make a basic server using Node.JS and Express. For the server i drew heavily on example code used in class last Tuesday and also used Tom Igoe’s Four Line Server example. Finally the Express.JS routing guide was extremely helpful.

For my server I decided to make a basic remote thermostat that would let a user control the temperature in their apartment as well as see/change the state of the thermostat. i.e whether it is in heat/cold/off state.

The four REST endpoint I utilized are as follows:

1. /state lists the current state of the thermostat (heat, cold, off)
2. /state/(off,heat,cold) inputing any of the three states will change the current thermostat states
3. /temperature lists the current temperature inside of the apartment
4. /temperature/(increase,decrease) will either increase or decrease the current temperature

Issues

My biggest issues with completing the assignment came from my lack of experience with html and getting a better interface/more functionality out of the server. For Example I would like the user to be able to be prompted to manually set the temperature if they like. As I learn more about Node.js/Express and interfacing I know these types of issues will subside.

Code

Below is the code broken down into sections:

Here is a link to the Github Repo

//four line server example created by Tom Igoe
var express = require('express');
var server = express();
server.use('/',express.static('public'));
server.get('/temperature',temperature);
server.get('/temperature/:changeTemp',modifyTemp);
server.get('/state',checkState);
server.get('/state/:newState',changeThermState);
server.listen(8080);

//inital state of the Serverstat
var thermostatState = 'off';
var thermTemp = 64;

/*
CheckState is responsible for checking the current state of the Serverstat(either heat/off/cold) and the current
temperature in Farenheit
*/
function checkState(request, response){
  response.send('the current state is: ' + thermostatState + ', at a temperature of ' + thermTemp + ' degrees Farenheit');
  response.end;
}

/*
changeThermState allows the user to manually change the state of the thermostat when they enter
one of the three preset states
*/
function changeThermState(request, response){
  var newThermState = request.params.newState;
  if(newThermState == 'off' || newThermState == 'cold' || newThermState == 'heat'){
    thermostatState = newThermState;
    response.send('the state has been set to ' + thermostatState);
    }
    else{
      response.send('please only input "off/cold/heat"');
    }
    response.end;
}
/*
temperature sets a random temperature value to the output when the state is changed.
*/
function temperature(request, response){
  if(thermostatState == 'heat'){
    var temp =  Math.floor(Math.random()*(80-70+1)+70);
    if(temp <= 69){
      temp = 73;
    }
  }

  if(thermostatState == 'cold'){
    var temp =  Math.floor(Math.random()*(65-55+1)+55);
  }

  else{var temp =  64;}
  thermTemp = temp;
  response.send('the current temperature inside the apartment is: ' + temp + ' degrees Farenheit');
  response.end;

}
/*
modifytemp allows the user to either increase or decreaase the temperature depending
on their preferences
*/
function modifyTemp(request, response){
  var tempChange = request.params.changeTemp;;

    if(tempChange == 'increase'){
    thermTemp++;
    response.send('the temperature has been increased to ' + thermTemp);
    }

    else if(tempChange == 'decrease'){
      thermTemp--;
      response.send('the temperature has been decreased to ' + thermTemp);
    }
    else{
      response.send('Please input either "increase/decrease"');

    }
    response.end;

}

TRACKS: Creating the first Critical Object

Concept

When thinking about this first assignment and all of the possibilities for creating a critical object it was easy to get overwhelmed with subject matter. This is why Dana and I decided to create a piece that would be light hearted but still make people think. Our ideation really began when we started talking about standardization of things and process that have seemingly just been accepted by people over the years.

After talking about that concept for a bit we started talking about credit cards and how they add a level of separation between the feelings of spending money, which is a serious action, and the feeling of playing, either by swiping, inserting, or tapping a card. From this idea we began to develop a game modeled after wooden train sets. The game we developed is titled TRACKS.

Wooden train track example

Wooden train track example

The theme of the game is that the player opens up a box that looks like it contains a normal game, when they open the box they are initially presented with a credit card and a manual for playing the game. After that they can begin assembling the tracks and use the credit card to play with them.

Design

The design took heavily from minimalist packaging design and old VHS cases. We wanted the packaging and information given in the box to really highlight that this was a game, supposedly designed by a large company. We also wanted the game to be ambiguous to its intentions until the player really reads the information provided and starts to assemble the pieces of track.

Screen Shot 2019-02-03 at 16.52.12.png

Build Process

The actual building of the tracks and the box were more difficult than we had expected. Without access to ITP’s laser we were forced to hand carve each piece of track for the credit card to slide in. Also creating the box proved challenging as we chose the wrong thickness of cardboard at first which gave us issues with bending.

Final materials ended up being hard foam pieces, dowels, cardboard, and paper mixes. Below are some photos of the building process.

IMG_5913.jpg

Final Thoughts

Overall, I feel that the execution of the piece went very well considering the limitations imposed with time and tools. Given more time I would rework the track and maybe design a credit card specifically for the assignment.

Below are some photos of the final piece:

Motor Mounting

The Final Fabrication assignment required us to mount a motor. I wasn’t really sure sure what to make for it with limited time this week. I began by trying to come up with a wooden mount to attach to one of the bookends I made for a previous assignment.

20181212_111032.jpg

Luckily another student had 3d printed an extra dc motor mount and let me have it.

20181212_111113.jpg

At this point the plan was to screw the mount into the bookend and attach a small fan to it. At this point I recommend not doing any measuring or drilling at 3am because I messed up more than a few pilot holes trying to get the motor in the right position.

20181212_113156.jpg

After the mount was attached I added the motor and tested the whole thing out. It sputtered a few times and then just wouldn’t turn. Given that it was late and I ran out of other options I kept the motor and just accepted defeat with this.

One main positive I learned from the experience was some info about the laser cutter and how to load and 3d print my own motor mounts when need be.

20181213_040541.jpg

Tree Ring Cork Board

My Fabrication project for this week involved using A 5’’ x 7’’ walnut board and cork. The original idea for the project came from my desire to use cork.

20181205_120720.jpg

My original plan was to create a 3d shape with the cork and then mount it on the wood plate. I decided it have a somewhat comedic effect if I made the shape of tree rings using cork. After a few test runs with the laser cutter I went to cut the cork on it.

this is the point where I ran into issues. After multiple passes with the laser I couldn’t get the cork to cut at all. After pulling the piece out I was able to crack out the outline of the largest tree ring but I knew I wouldn’t be able to make anything worthwhile using this method.

20181205_130621.jpg
20181205_125910.jpg

After this fail I decided to just laser etch the rings and mount the piece on the walnut board.

20181205_132147.jpg

I ended up cutting the edge of the piece out using scissors and then using wood glue to attach the cork to the walnut.

In all honesty I’m not really happy with the piece as it is but I should have researched cork and its laser cutting properties before deciding on using it as my main material for this project. Given more time I would have rethought the project and worked the whole thing into a different direction

Reverie FieldFinal Project Update:

Progress on the final project has had its’ ups and downs so far. Jenny and I have made a good amount of progress with controlling the lights and getting them to dim and make patterns. Most recently we were able to connect all 15 of the bulbs together.

20181120_195557.jpg
20181124_135442.jpg

One of the larger problem areas we have been working with is getting the lights to change state properly using the FSR sensors.

20181127_125247.jpg

This week we are beginning the fabrication of the console and hanging apparatus. Final user testing will be done as well.

Extremely Inaccurate and Unhelpful NYC Weather Predictor

For the most recent fabrication assignment we were required to build an enclosure for an electronics project that had utilized multiple components. After spending some time thinking about what I wanted to make I decided that I wanted to make something fun and pointless.

What I came up with was the “Extremely Inaccurate and Unhelpful NYC Weather Predictor.” Basically it’s just a box that has one push button and when you push the button a “random” combination of LEDs lights up.

20181125_151505.jpg

I went to the container store to get the box for the project. Using calipers I measured the inside edges of the box to see that the dimensions were 5.67’’ x 5.72’’. After that I created the illustrator file with an initial design to try out on the box.

20181126_131753.jpg

After that I laser cut a piece of cardboard to test the size and design of the top. After some tweaks I laser cut a piece of black acrylic.

20181126_132003.jpg

An issue that arose with the first cover was that the hole for the button was not big enough. Although the button fit in the cardboard prototype with a hole the same size I should have accounted for the acrylic not having any give. Another problem I noticed was that I misspelled the word Inaccurate in each piece of acrylic. I decided that I didn’t want to buy any more of it though so I decided to leave it.

20181126_135637.jpg
20181127_202612.jpg

After the initial fabrication I built the light switching circuit and attached it all to the top acrylic panel.

20181127_201158.jpg

The final fabrication part was drilling a hole in the back of the box for the arduino’s power cord to go through. Drilling the wood I used small drill bits and then progressively worked my way up to larger bits to try and not damage the wood or splinter it too much. It didn’t work amazingly but the outer portion of the box looked alright.

20181127_204342.jpg

Overall, I am happy with final product, minus the typo. I should have figured out a better way to drill the hole in the back and probably should have mounted the arduino better inside but for this prototype I am happy with the enclosure.

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.