Creating a basic Web Interface

This week’s assignment was to create a web interface for an existing web-connected consumer device. In class we specifically went over the hue bulb system and that is the device I created the web interface for. I began the assignment by going over the documentation provided to us regarding the hue system, assigned IP, and clip api. After getting my login credentials from the clip API I began doing basic calls of the hue bulb. i.e turning it on and off and changing the colors manually.

Screen Shot 2019-02-11 at 7.01.31 PM.png

After playing around with this system for a bit I began to focus my attention on creating my own interface. I referenced the hue control repo from Tom Igoe, and node hue api repo from Peter Murray. I had difficulty understanding portions of getting the api to work so it took a good amount of time to really wrap my head around what was happening. Timothy Lobiak was also extremely helpful in giving me guidance and sharing code snippets on how to create the colorMode sliders and storing values.

I ended up deciding to use p5.js due to my familiarity with the DOM elements. Even with this I was a bit rusty so with the language. My goal for functionality was to be able to turn the light on and off with a button, then have three sliders that controlled the hue, saturation, and brightness and have the bulb change state in real time depending on the position of each slider.

this is the basic interface functioning.

Thoughts on Chelsea Gallery Viewing

Of all the galleries visited this week, Paul Stephen Benjamin’s Pure, Very, New struck me the most. More specifically the portraits that he shot of people and then printed on an extremely black paper. At first glance the photos look like a textured paper but upon further inspection you begin to notice the shapes of the subject. As I approached the pieces I was able to see how detailed the subjects were. From the textures of their skin to the detail of their facial expressions. It took me a few minutes to take in the pieces and it really made me question the process he went through to obtain the pieces.


It really took me being there in person to be able to appreciate those pieces. Something about them is lost without seeing them in that form. I felt that way with a majority of this exhibition though. The mixture of black lights, single channel tvs, and less technological art gave it a flow that I found hard to describe.

I found myself comparing this exhibit to the Borders exhibit at the James Cohan Gallery. Something about the contrast between seeing artworks dealing with violence, humanity, and social issues and then comparing them to those black large scale paintings, which made me think of black holes, gave off a feeling of endless trouble and problems for society.

MTA Service Disruptor

For Critical Objects assignment 2 we were required to create a disobedient object. Meaning an object that serves as a form of social or political protest. The focus for this project was focused more on the critical critique and technology elements.

When thinking about a subject to create a disobedient piece towards I tried to think locally and more specifically towards something that directly impacts me. For all of the things I love about NYC there are plenty of things I can’t stand about it. After living here for three years my tolerance for the MTA has decreased exponentially.

Screen Shot 2019-02-10 at 6.10.50 PM.png

This being so, Adi and I decided to create an object that would be a disruption to the MTA. We wanted the piece to only be noticeable and cause a disturbance when trains do not run on schedule Out of this came the MTA Service Disruptor.

The idea behind the device is that someone protesting the MTA would take the piece and plant it secure location facing the train tracks. The device would then be silent as long as trains were running on the correct schedule. As soon as the trains began to run off schedule then the device would start making an irritating beep sound. The longer the time until the next train the louder and more obnoxious until the trains return to their normal schedule.

The concept is that the Service Disruptor will force people to begin to discuss whats going on and then keep the issue relevant for as long as necessary. The goal of the piece is not to solve the issues with the NYC subway system but to keep the topic relevant and make New Yorkers more hostile towards the heads of the MTA.

IMG_20190210_163409.jpg

The Service Disruptor uses a basic circuit comprised of an ultrasonic sensor, basic speaker and small arduino microcontroller. The small form factor and simplicity of the piece makes it ideal for creating many of them and planting all over the city at different stations.

IMG_20190210_181757.jpg

Code

#include <toneAC.h>

int trigPin = 5;
int echoPin = 6;

void setup() {
    Serial.begin(9600);
    pinMode(trigPin, OUTPUT);
    pinMode(echoPin, INPUT);
}

int rangeThreshold = 5000;
unsigned long lastSubwayTime = 0;
int expectedTrainSchedule = 5000; // ms

void loop() {
    float rangeDuration;
    unsigned long now = millis();

    // send a 2 microsecond pulse to start the rangefinder
    digitalWrite(trigPin, LOW);
    delayMicroseconds(2);
    digitalWrite(trigPin, HIGH);
    delayMicroseconds(10);
    digitalWrite(trigPin, LOW);

    // read from the rangefinder
    rangeDuration = pulseIn(echoPin, HIGH);

    // occasionally print sensor value
    if (now % 3 == 0) {
        Serial.print("d: ");
        Serial.println(rangeDuration);
    }

    float toneFrequency = 800;
    float toneVolume = 10;

    if (rangeDuration < rangeThreshold) {
        lastSubwayTime = now;
    } else if (now - lastSubwayTime > expectedTrainSchedule) {
        playNotes(10, 500);
    }
}

int notes[2] = { 800, 400 };
unsigned long lastNoteTime = 0;

void playNotes(int volume, int duration) {
    int i = 0;
    while (i < 2) {
        unsigned long now = millis();
        if (now - lastNoteTime > duration) {
            lastNoteTime = now;
            toneAC(notes[i], volume, duration);
            i++;
        }
    }
}

Creating an Image out of physical pixels

For the first assignment we were required to create an image using “physical pixels," preferably not using a computer or other digital technologies.

When I began thinking about this assignment I started by thinking of Jackson Pollock like painting and using a material that would allow for a more abstract image. From this idea I decided to use spices from my kitchen to make the image.

Below are the spices and final image I created.

edited.jpg

Using a teaspoon and glue I spread each spice out and then shook the paper out. After doing this a few times I realized that I didn’t really like the outcome of the piece and knew that I wanted to try something else.

I decided to try to use cheerios to trace over a preexisting image. Each single cheerio would act as an individual pixel in this case. I chose a vector image of Andy Warhol to trace over.

I honestly didn’t like the way this image came out even more than the one I made with spices. Working with the cheerios wasn’t easy and I had to cut a lot of them to get a somewhat correct image representations. The fact that I had to cut the cheerios kind of takes away from the idea that each represented a pixel but oh well.

If nothing else this assignment reinforced the idea that it is difficult to make work one “pixel” at a time.

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;
      }
    }
  }
  
}