Class 3 Video and Sound: Soundwalk Reflections

I really enjoyed making our soundwalk! For now, I am calling it “Journey to Home”. I never thought I would be interested in creating sound projects. But this gave me a window into how satisfying it can be to describe a world through sound.

I was most surprised to feel my musical ear coming into play while editing urban sounds of cities, of all things. I spent many years studying flute and piano performance. It was refreshing to have these skills come into use in a new way.

I also had fun collaborating with my group members Alice Sun and Amena Hayat!

Here is a description of our soundwalk:

Listeners meander the staircase and ride the elevator inside Tisch to travel from our different hometowns, to our current home in New York City. To create the soundwalk, we each curated sounds from Korea, Lahore, Pakistan and the Bay Area, California, as well as captured the sounds of New York City and the subway. Lastly, we created designed a map to clearly display the walk inside Tisch.

Our soundwalk:

 

Our map:

img023

 

What went well:

  • Our collaboration – We each took on significant roles and took a stand for our individual ideas.
  • Our idea – This came together nicely. I had an original idea of mapping our commutes from our New York City apartments onto  a walk inside the building, because I was interested in the concept of traveling while staying in one place, as well as getting richer sounds than those I thought we could find inside the building . Alice felt this concept would be more meaningful if we mapped our journeys from our hometowns instead, allowing us to tell a more personal story with even more compelling sounds. Amena was very clear about needing a vibrant inner monologue narrated by a central character, which ultimately became the three of us. Amena was also the one that rightfully insisted that our piece required a very clear voice other than us to direct the listener through the building.
  • The quality of sound in our soundwalk – While there’s definitely room for improvement, I’m proud of how creatively we thought of collecting sounds from outside the building and from the amazing website freesound.org. All of this led to a more compelling piece than we could have otherwise created.

What was challenging/What I would do next time:

  • Not enough time to do one last review for finer level edits – I would have loved to have one final listening session to tighten up a few moments to better support the transitional moments.
  • Musical ear – Now that I know I enjoy listening for phrasing of individual sounds or building arcs out of patches of sound, I’d use this even more next time.
  • Re-mapping where the listener is in the building – My initial instinct to use the staircase was a strong foundational direction to take for this project.  However, using the elevator in Tisch at 4pm is tough… lots of traffic. I agree with the class feedback that we can rethink the listener’s route through the building.

 

The process

Brainstorming and Planning – We invested a lot of time in planning and scoping the project. Here is our “script” or timeline of how tracks, narration, sounds, and walking line up together.

Soundwalk-Ideas-897x1024

 

 

The Editing – Here you can see our tracks in Audition. The three longer tracks are Alice’s soundscape of Korea, Amena’s of Lahore, Pakistan, and mine of the Bay Area in California. The shorter tracks, especially at the bottom, are the narrated directions by a computer generated voice we found online. I believe Alice modified that voice to be slowed down a bit.soundwalk audio tracks 1

All in all, I learned a lot from this assignment!

 

 

 

Class 3 Video and Sound: Promotional Ad for the Spookify Mirror (or TBD Name)

Maria Shin, Kellee Massey and myself will be making a promotional ad for the Spookify Mirror.

Here is our synopsis, written by Kellee, and created by all three of us:

In a world, where everyday is Halloween, one girl tries to find the perfect costume for the Most Important Halloween of All.  Two days before the important day, our character still can’t seem to settle on a suitable costume.  Surrounded by classmates who confidently already have their costumes set, she rushes home to look through her costumes once more. At her wit’s end, she uses her Spookify Mirror to plan her costume, making her the spookiest (and best dressed) at any celebration.

We will be using After Effects colored construction paper to create a basic interactive mirror within this video.

Here is our storyboard, drawn by all three of us!

Final-Final-story-board-1.jpg

Scanned-Documents-2-FInal.jpg

Storyboard 3

 

Class 3 Prototype for a Playful Clock with Laser Cutter

This clock lets you tell time any way you want. With different magnet sets you can map out your day. Since I may want to develop this idea in the future, I chose to learn using the laser cutter with cardboard and masking tape as my materials instead of investing in acrylic and magnets right away.

For me, this clock is a playful way to undo time when you don’t need it. I myself can over-plan, and on top of that, our fast-paced world is sped up by technologies we use every day. It might be nice to have a clock that helps you simplify your day or adds some punchy humor.

IMG_9904

IMG_9908IMG_9907

Photos above: As you can see, the clock can show something simple like when your awake or asleep. Or you can still use it as a regular clock. Or you can even tell stories – for example, that you have to leave at 1pm to catch a flight, and then you’re on vacation!

I have lots of ideas about what magnet sets I can design, whether symbols, words, or numbers.  I’ll have a lot of fun asking people what kinds of magnets they’d like to have!

From a design perspective, I do have at least one critical decision to make. How would I address the fact that you can only “fill out” the clock for 12 hours at a time? (The easiest solution I can think of is to create an AM and PM magnet that you can put on the face of the clock if you like.)

For now, on to documenting the process!

PROCESS

1. I made many sketches to flesh out my idea. (Apologies for the out of focus images. Not sure what is happening.)

Below is my idea of a clock, which shows how the magnets themselves would be glued to the back of the clock face.  The paired magnet would be on the back of each time piece.

You can see a ruler at the bottom of the picture, showing my test to see if magnets work through acrylic. I’ll have to further test, though…

IMG_9867

Here I’m deciding whether I’d like to create connected/cut/vector pieces in Illustrator, or “separate”/etched and cut/raster and vector pieces. I ended up liking the visual factor of the negative space of the fully cut pieces using vector images.

IMG_9866

Below I’m deciding how large the clock should be. 10.5 inches felt right. Plus I knew it had to fit inside the bed of the laser cutter which only allows materials that are 12 x 24 inches. I’m also guesstimating how large the time pieces should be. I decided about an inch tall felt right.

IMG_9850

You can see below that I made lots of measurements and drawings to figure out:

  • What width of material is required to sit behind the clock face, so that it “holds” the face of the clock upright even if there is the added weight of magnet pieces?
  • What diameter should that second piece of material be, so that it covers up the clock mechanism from view (if the clock face is made of transparent acrylic, since it could be interesting to see the second piece).
  • At the time, I thought I was buying acrylic so I got very excited about color combinations.

IMG_9854

At the bottom you can see my final measurements of what width of acrylic I’d need to fill up behind the clock face, along the length of the screw of the clock’s mechanism

Ultimately I didn’t use acrylic for this prototype, but I have the measurements for later.

IMG_9857

Here you can see me trying to make sure that the clock’s hands can pass over the magnet pieces.

IMG_9856


Below is a snapshot of my work in Illustrator. I learned how to:

  • Turn fonts into objects by going under Type > Create Outlines, and then under Object > Path > Outline Stroke
  • Merge shapes so that the numbers and letters would be cut together as one piece. I did this by choosing Group > Shape Mode > Merge (the first option that turns them into one shape)
  • Change the fill to none and the stroke to 0.1. I had a lot of odd things going on at this point, but I figured it out with help from new friends!

I did have an issue with:

  • For reasons I don’t understand yet, all of my shapes had a 0.01 pt stroke yet half were still “groups” and had thicker lines evidenced by the laser cutter cutting them much more effectively. The other half were “paths” and had thinner lines, and took three times as long to cut.  I’ll have to ask for help before I cut again.

 

IMG_9869

 


As for materials, I was lucky to find distinctive cardboard colors in the shop! PLUS they were colors I was thinking of using anyway. Ultimately, I probably won’t use these colors going forward, now that I see them together. Future $ saved on acrylic!

IMG_9895

(Yes, my circle hole is off-center. It was fine until I loaded it onto the laser printer’s laptop, which has a very sensitive track pad — I didn’t notice I had accidentally moved the circle until it was too late. Now I know to be SURE my shapes are final before I load onto the laptop!)

 


Here is the 50 watt printer doing its magic.

giphy laser cutter

I used these settings:

  • For the white card board, I ran this setting twice: 24/40/500
  • For the greenish card board, I ran this setting four times: 10/24/500
  • However, I cheated a bit and removed shapes from my file that were already cut well, so the laser could focus on cutting what wasn’t completed yet. Evidence of me skipping ahead to the number 10 below after deleting the shapes above from my file (I had a back up copy of my file):

IMG_9900

Bad image quality evidence of me deleting shapes in my file to save time with the laser.

IMG_9899

I also learned that the finger behind the actual laser beam that gives the apparatus support WILL drag burned material across the surface of your cardboard. You can faintly see a line across the peace sign.

I know I could have used masking tape, but this was a prototype and I would have ended up taping the whole board…

IMG_9898

 


A classmate needed to use the laser cutter before class, so I stopped cutting even though a few of my shapes were not cut fully. I used a razor. : (

IMG_9902

 


Going forward, I’ll keep refining the design of my clock. A few quick fixes include bringing down the size of my word magnets. While I did think ahead to size these correctly, obviously that didn’t work.

I’ll also continue to learn the laser cutter!

Honestly, I don’t think I’ll fall in love with the laser cutter because I find its visual effect to be overly perfect and therefore not very interesting.

I’d be more interested in the laser cutter if I paired it with a digital pen that you can use with Illustrator.

IMG_9904

IMG_9908IMG_9907

Class 3 Sketch

I wanted to try several of the concepts we learned this week. To do so, I built a living room to create a few pieces that are interactive, including a lamp, picture frame, and table. However, some are working right now, others not yet! Looking forward to learning more.

Ideally, the lamp changes color, the picture frame turns “on” to show Kellee’s colorful dots, and the table shows an algorithmic design when you click on the “glass” on top of the table.

Here it is so far: http://alpha.editor.p5js.org/fergfluff/sketches/rJjt5gdoW

 

 

What I did learn:

How to build a slider that changes the color of a lampshade in different colors.

Got faster at using the mousePressed and mouseReleased functions.

Got faster at building buttons that turns things on and off.

How to organize my code even when it gets long.

How helpful resident office hours are.

 

What I got close to figuring out.

How to confine behaviors to a certain space within the canvas. For example, I really want the table cloth to turn on with a pattern when you click on the “glass”. I also want to add Kelle’s circle pattern to the inside of the picture frame when you click the switch next to it.

I know how to confirm Kellee’s circle pattern, shown here.

http://alpha.editor.p5js.org/fergfluff/sketches/H1qMGOdiW

But for some reason the code doesn’t work well in my sketch? Not sure why yet.

 

 

 

 

 

IPC – Class 3 Observation of a piece of interactive technology in public

I wanted to share something I’ve casually observed this past summer.

The LinkNYC system of “structures” (as the city calls them).

link-nyc-gear-patrol-slide-1.jpg

A few observations:

  • I’ve seen very few people directly interacting with them so far. The handful I did see this summer were using them to charge their devices while sitting on the ground next to them.
  • But I do know for certain that one person is using them, and that is me. I use them for wifi. To do so, I don’t even have to touch the central tablet, which is a bit hidden between two larger screens. I log on from the screen of my smart phone. In addition, the structures also give you free phone calls, access to city services, and maps through the central tablet.
  • Unfortunately, the purpose of the structures seems to be primarily for selling advertisements. That’s the only message I can take away from how large the two side digital screens are.  More ads on the street?!  Ugh.
  • Ironically, it turns out the city says the structures’ primary purpose IS to provide free wifi!  They want these to replace pay phones with free wifi, across the city! I had no idea these were supposed to be pay phones of the 21st century. They say:  “LinkNYC is a first-of-its-kind communications network that will replace over 7,500 pay phones across the five boroughs with new structures called Links. “
  • A design challenge seems to be to make clear that these Links can help you with your 24/7 charging and calling needs.  I wonder how many other people even know you can use them for wifi?  There could be several solutions to this. For example, one design suggestion for the city would be to use the advertising space to promote the wifi service by tallying how many people have used the wifi that day.

 

  • Considered from Norman and Pullin’s perspectives, these are missing a few things:
    • Functionality in a stressful environment: New York City’s streets can lead to sensory overload. Few people have the time to slow down and peer at a small tablet between two very large digital advertisements. Norman would press a designer to consider the emotional context of the user. Why not make the tables bigger or somehow more apparent for a harried New Yorker?
    • Design for people with disabilities: Again, for someone with low vision, the main functionalities of the tablet are a little small to notice or navigate. While the tablet does have braille and talkback for touchscreen use, these adaptations seem too little for a major public utility service.

 

IPC Class 3 – Diary love-o-meter with lock combination

This is a private love-o-meter, for when you want to your love to be secret for the moment. First you need to unlock the love-o-meter, like you might with a locked diary. Then you can express your love for something. And finally, you could potentially save your secret love messages, to be locked away for no one else to see.

IMG_9888.jpg

See below for me trying to unlock the love diary’s combination of three buttons so that I can use the knob. And then I use the knob to turn up or down the LED to express how much I love…. coffee? Chocolate? Riding my bike?

giphy love o meter diary lock.gif

My secret recordings of how much I love something, shown in the serial monitor. (Actually, I don’t know how to save these “messages” for later, but I’m sure you can.)

giphy serial monitor of potentiometer and led

 

IPC Class 3 Labs

Lab 1: Digital Input and Output

Here you can see that when the button is off, the yellow LED is on. But when I press the button, or it’s “on”, the red LED turns on.

This shows how I’ve connected a digital input circuit and a digital output circuit to a microcontroller.

The code is written to expect the button as an “input”, and change the “output” or behaviors of the LEDs depending on the state of that input.

giphy red and yellow leds.gif


Lab 2: Analog Input

When I turn the knob of the potentiometer, the LED’s brightness turns up or down, and those readings are sent to the serial monitor.

I did this by connecting a variable resistor to a microcontroller and reading it as an analog input. This means that the program is understanding that I’ve changed the conditions of the physical world (me turning the knob of the potentiometer) and converted them to changing variables (turning a LED’s brightness up and down, and printing the numerical change to the serial monitor).

The code:

There are global variables written for the analog value of the potentiometer, brightness of the LED, and the pin number of the LED.  The serial monitor is set up and the LED is declared as an output. Then we read the value of the potentiometer, turn that into another value that can control the brightness of the LED, and print that value of brightness to the serial monitor.

Questions: Why don’t we have to set the potentiometer as an input in the setup function? Why don’t we have to declare a global variable for the pin number of the potentiometer?

giphy potentiometer and led

Below you can see the value of brightness changing in the serial monitor. The numbers are between 0 and 255 because of how we translated the range of the potentiometer to something the computer could remember/process and send to the LED.  We did this by dividing the range of the potentiometer by 4, which fits into a BYTE…  which can only fit 8 BITS… which can only include up to 255 values. I don’t know why we divide by 4, or really fully understand base two or binary notation!

giphy serial monitor of potentiometer and led

 

 

IPC Class 2 Dinosaur Fight and Switches

If we were asked to make a project in Class 2 to use a switch, this is what I had in mind.

I would have a dinosaur fight.

IMG_9881

I’d put these each on a separate piece of copper tape, and wire those each to the breadboard to light up a red LED.

I’ll do some more make-up and be sure to learn to solder, create a DC jack to a 9 volt battery, and hook this up with a voltage regulator.

Question: I’m not quite sure how to write this drawing as a schematic, with power coming in from one place, and the connected copper circuit through another.

 

IPC Class 2 Reading and Labs

Lab 1: Components

Some of the most helpful things I found in this lab:

Why microcontrollers are powerful: because they allow you to separate your object (or circuit) from its behavior. This allows you to leave your circuit the same, but change its behavior with a program.

Why the number 1023 is shown in the serial monitor: Your arduino’s microprocessor uses its Analog to Digital Converter (ADC) to take a changing voltage of 0 – 5 volts and convert it to a digital number range of 0 – 1023 (there is some mapping/translating math to arrive at this digital conversion.)

Lab 2: Setting up a breadboard

Question: My DC power supply is still on order so I haven’t learned how to solder to make the DC power jack connection.  However, I did these powered by my laptop.

Question: After going through the examples, I’m still wondering why the resistor and conductor row have the ability to bypass the LED, causing it to not light.

led_test_4aled_test_4_schem

 

 

 

Lab 3: Electronics and using a Multimeter

Here is my work, notated at the top of each image.

Pictured here are 5 volts measured across power and ground in my circuit with my multimeter, powered by my arduino and laptop.

IMG_9839

 


Below you can see two LEDs in series turned on by pressing a button, which connects the switch inside to allow voltage (or current?) to pass through to the 220k ohm resistor and LEDs.  While in series, the LEDs divide voltage yet the current is the same across them.

Question: I’m confused about when I should be saying voltage or current is passing through a circuit.

Note: Adding a third LED leads to none of the LEDs lighting up. This is because each LED uses up about 2 volts. Therefore, the 5 volts sent by my arduino & laptop is not enough to power 6 volts worth of LEDs (three 2 volt LEDs). Instead, about 6 volts would be necessary.

giphy two LEDs

Here you can the circuit uses up nearly all of the voltage in the circuit. My math compares the total voltage in the circuit with the combined voltages across each component.

IMG_9843

 


Here, three LEDs are lighting up because they are in parallel. This parallel arrangement gives equal voltage to each LED, but divides the current among them.

giphy 3 LEDs to measure voltage.gif

 


Below I am measuring the amperage or current across a single component in my series. To do so, I removed one side of one component. In this case I removed the anode leg of one of the LEDs and completed the circuit with my multimeter.

It took several tries to do this while I figured out whether to have my multimeter set to which Amperage hole (200 milliAmps instead of 20 Amps) or which Amperage dial setting (20 milliAmps instead of 200 or 2milliAmps).

Also it was hard to press the button while I held the multimeter!

giphy of three LEDs connected by meter

I didn’t complete the potentiometer circuit because I haven’t learned to solder yet (soon!). But I did something similar during office hours and understand the concept and circuit.

Lab 4: Switches

Switches in parallel.  As long as you press the first one, you can press either of the second two buttons. This is because they are all connected by wires in such a way that both LEDs get voltage/current with whichever combination.

Can press either last two buttons to light lED

LabSwitchesParallel_schem-300x194

Switches in series. In this case, you need all three pressed to light up all three LEDs. This is because the third button is not directly connected to the first button.

Need all 3 pressed for LED

 

LabSwitchesSerial_schem-300x76

Question: I can see how the schematics are different for each circuit, in that parallel components are drawn going down, and series components are drawn across. Is this the way parallel and series are always drawn?


Connecting two of the last buttons to allow a different combination to be able to turn on both LEDs.

Question: Why is that the current/voltage passes through the third button to the second LED, even if I haven’t pressed it? Is it because current can pass through the bottom of a button even if it’s not pressed?

Can press either last two buttons to light lED

 


Motors

Create a dual pole switch, so that two separate circuits are turned on with the same mechanism. (I thought this had to be a special kind of switch, but turns out a momentary switch or button is fine.)

Question: I know the IC1 in the schematics are referring to the voltage regulator in the schematics, but why is it called IC1?

giphy LED and moto.gif

 

 

ICM Class 3 – Notes from Tutorials

Here are a few sketches made after following the online tutorials. There are lots of notes in the sketches on alpha.editor.p5js.org to explain my code so that I fully understand what’s going on.


Tutorial 3.2: Draw a ball that bounces up and down on both x and y, and changes color.

Question: How do I get the ball to move around more randomly? I tried using the random() but the ball went on the fritz : /


Tutorial 3.3: Use “if/else if” statements to draw shapes with colors as you move your cursor left to right


Tutorial 3.4 Roll over a button to make it appear, and press the mouse within the button to change the background.


Tutorial 4.1 Use while and for loops to draw squares and circles across the screen, while incrementally changing the color of the circles, too.

Question: What’s the best way to have changed the blue color incrementally? I found three ways to do it, found in my code.


Tutorial 4.2 Use nested for loops to draw circles that change color and repeat across the canvas as the mouse moves. Also, the background changes color when you press the mouse.

Question: The mousePressed didn’t work when I placed it after the circle for loops, but does when I place it beforehand. Why is this? Are the circles overriding this code?