Class 4 – Enclosure for a Sunlight Song Player

For this Intro to Fabrication assignment to create an enclosure, I chose to work on my current project in Intro to Physical Computing. I’m designing a musical instrument that you can press onto your window. When the sunlight comes out, it plays a song such as “Here Comes The Sun” by the Beatles. I’m imagining it would take the shape of an abstract sun, and made of translucent material in order to let the light in through the object as well.

Below is my current prototype.

For now I chose to use cardboard because this was my first time measuring precise holes for components, and I knew I wanted to change the shape later on.  Over the next few iterations I would use yellow mat board, and then eventually  yellow acrylic. Also, the back would use a suction cup or two. Eventually, I would learn to use a light sensor from Adafruit to place on the back of the object to face the outside. I’d place this behind a small plate of clear acrylic so that light can enter.

You can see I also used dowel pins instead of metal standoffs for the same reasons.

IMG_2207

 


Below is an example drawing of what I have in mind.

However, by now I’ve come to the conclusion that I’d like the shape of the object to be an abstract sun, not a typical sun shape (as drawn below). Otherwise the design in total seems too on the nose… meaning each design element (the light sensor, the songs about the sun, and the shape) become too literal. Perhaps if I make the sun to be abstract like in my prototype, the total effect to be more interesting.

IMG_0004

 


For now, a lot of my design decisions were determined by the size of my components. The object had to be large enough to house the microcontroller, the bread board, and the battery.  Likewise, the control panel had to be large enough to accommodate the buttons and sensor.

For now, the front and inside.

IMG_0002

Soon I would create this back piece, once I learn how to place the specialized light sensor.

 

IMG_0015

 

 

 


Once I had a sketch in my notebook, I started putting my design into Illustrator.

Here you can see the time I took to measure each component using an analog caliper. I then used these measurements to update my Illustrator shapes to match the size of my components.

IMG_0010

 


In this Illustrator file below you can see I did two things that don’t appear in my final prototype.

  • Added lines to measure the distance between objects, which I later removed before printing to the laser cutter. Could I have added these to another layer in the same file, which would not have printed? Do the laser printers only print the first layer, or do they print all included layers?
  • Created sides for the enclosure. However, I saved finishing these for another time so I could focus on completing the control panel. Next time I’d be ready to do measurements to create sides like the ones found in this Nixie Tube project (image below).

Screen Shot 2017-10-03 at 2.35.33 PM.png

 

Nixie tube sides.

Nixie tubes

 


 

On the 50w laser cutter I used these steps to cut cardboard. The cardboard was thicker than what I used last time. This time I used auto focus! I also used 600 DPI. My other settings are below.

IMG_0007

Front side:

First time – 50/50/500

Second time – 20 / 50 / 500

Third and fourth time – 20 / 75 / 500

Back side:

Three times – 20 / 75 / 500

One question I have is how much does DPI matter?  The printer’s list of material settings  makes adjustments based on DPI.

 


A major component of my control panel that did not print well is the TEXT on it…

You can hardly see it. Granted I only managed to make 9 font size fit due to limitations of my components’ sizes.  However, I followed the ITP Illustrator Laser Printer tutorial on the Shop’s website which mentions how to set text. I used the color black and did nothing else as suggested. However, when I sent the file to the laser printer, I got a pop up dialog box that said it would have to turn the font into an object.

Why did the text etching become white? Whereas the sun etching became black?

What settings should I have used for text?

IMG_0014.JPG

 

 


Here are a few more photos of my final prototype. My buttons aren’t flush with the holes for three reasons.

  • I didn’t have the perfect height to lift my breadboard enough to match the height of my components (I used my phone to give it some height, as you can see below).
  • The hole I cut for the on/off button wasn’t big enough!
  • My jumper wires are quite long and create additional unnecessary height because they aren’t cut to be flush with the board and microcontroller yet. I’ll do this once I’m sure my circuit is final!

IMG_2207

In the future, you would also see my battery and if being used, my USB to microntroller cable.

IMG_2206

Below phone is being used to give my breadboard height. My dowel pins look a little wonky.

IMG_2209

Different angle.

IMG_2208

Class 4 – A Sunlight Song Player

I’m working on a musical instrument that you can press onto your window. When the sunlight comes out, it plays a song such as “Here Comes The Sun” by the Beatles. I’m imagining it would take the shape of a sun as well.

IMG_0004.jpg

Ultimately, you can turn the whole object on or off, set which song will be played when it is bright enough outside, and hear that tune once as you select it. For now, the light sensors are photo resistor cells. Later, I want to use a light sensor that I have from Adafruit. I also want it to be able to work in lighter or darker cities, such as Los Angeles or Seattle. This would mean telling it to read the average light in a room, to come up with a new threshold after which to play the tune.

For now, I’m focusing on what I can prototype quickly. Conveniently, my Intro to Fabrication class assignment is to make an enclosure. This is what I have in mind for now.

IMG_0002

 

As for the code and circuits, there are several functions to sort out… ! Therefore, I’m iterating by focusing one function at a time. That way I can isolate the code for each function before I combine them all together.

To start with, I focused on the control panel & ability to play a song with a piezo. On the left you can see my control panel in the works. On the right is my work to play at least one song by pressing one button.

IMG_0001 2

On a successful note, I debugged a lot of code and realized I needed to level up to create a pushButtonCounter, so that the program can keep track of whether the button is on or off, and control another behavior at the same time, such as a light or eventually playing a song.

giphy_3 buttons for sun.gif

As a challenge, even with lots of help from others, I can’t quite figure out why my first song “Here Comes The Sun” isn’t playing properly. The code used to play almost all the notes, as in the video below. But with new code recommended to me, it doesn’t seem to recognize the button at all!

http://www.itpblogelizabethferguson.com/wp-content/uploads/2017/10/IMG_9989.mov

 

 

 

Class 4 – Labs with Servo Motor and Tone Output, and Quiz

 

Lab: Servo Motor Control with an Arduino

giphy_servo with force resistor

Do the wave.

Here I am controlling a servomotor’s movement & position by sending it the value returned from a force resistor.

Question: Why is the syntax to create an instance of the servomotor different than a typical variable or instance? For example:

Servo servoMotor; <— creating an instance of the servomotor using the Servo library.

or

int servoPin = 3; <— creating an instance of the servo connection to pin 3.

 

Lab: Tone Output Using An Arduino

Play Tones

I may have shortcircuited a speaker, so instead I’m using a piezo (aka what sounds like my new pet mosquito). I sent a frequency to the piezo that changes depending on how much light the photo resistors are receiving.

Question: What does the 100 – 880 range for the piezo/speaker really refer to? Two frequencies being mixed together to create one? See below.

void loop() {
int sensorReading = analogRead(A0);
float frequency = map(sensorReading, 200, 900, 100, 880);
tone(8, frequency, 10);
}
http://www.itpblogelizabethferguson.com/wp-content/uploads/2017/10/IMG_9983.mov

 

A more complex example

This example plays a short melody. This is a great example of how a program runs through code one instruction at a time, in a loop, until its done!

http://www.itpblogelizabethferguson.com/wp-content/uploads/2017/10/IMG_9985.mov

 

A Musical Instrument

Below you’ll hear me playing Hot Cross Buns. In this exercise I learned that you can create three instances at one time while setting up a for loop. For example: for (int thisSensor = 0; thisSensor < 3; thisSensor++).

Question: However, I’m not certain I understand this way of creating three “thisSensors” is the most efficient or clear? 

Questions: What does the syntax [ ] mean and do? I believe it relates to creating a list… This will probably come up in ICM.

http://www.itpblogelizabethferguson.com/wp-content/uploads/2017/10/IMG_9989.mov

 

 

Quiz

Question about the quiz. I believe the first part of the answer below is 0 – 1024 points. Is the second answer that 10 bits required to use the analogRead() command equal 80 bytes of memory (10 bits x 8 bytes in each bit = 80 bytes? )

  1. Microcontrollers read a variable input using an analog-to-digital circuit inside the controller. The Arduino Uno can read the input voltage with a resolution of 10 bits using the analogRead() command. Give the numeric range (decimal range) for this resolution. How much memory does this take up?

Another question: I found this part in the online syllabus. There is one connected idea in the paragraph below doesn’t make sense to me yet. Why is 10 bits a range of 1024 points?

The ADC in the Arduino can read the input voltage at a resolution of 10 bits. That’s a range of 1024 points. If the input voltage range is 0 to 5 volts, that means that the smallest change it can read is 5/1024, or 0.048 Volts. When you take a reading with the ADC using the analogRead() command, the microcontroller stores the result in memory. It takes an int type variable to store this, because a byte is not big enough. A byte can hold only 8 bits, or a range from 0 to 255. 

Finally, just a note to myself that that you need to use an int type of variable / data to store the readings you might get from analogRead(), so that you can access enough of the computer’s memory to store that many numbers. By using an integer or int data type (or variable), you use up 16 bits of memory, which is enough to house the 10 bits used to read input voltage at a resolution.

https://gist.github.com/fergfluff/0d8f97cbda8ab5681b57a4416cb2b97a.js

Class 4 – Analog Output Reading & Documentation

Analog Output

Pulse width modulation (PWM) allows you to get around the fact that a microcontroller can only send 0 or 5 volts (or “off” and “on”), and nothing in between. For example, you might want to send a voltage of 3.5 that is between 0 and 5, to give yourself finer control over an output, such as turning on a motor or servo at medium speed. You might also want to send the changing signals of an analog input, such as how hard I press my finger onto a sensor. That type of mechanical force can have a much finer range of values than just “on” or “off”.

PWM lets you cut these corners by “faking” a varying voltage while doing two things: very quickly sending regular pulses of 0 and 5 volts to a pin on your microcontroller, and changing the width of the pulses (or the amount of time spent at 0 or 5 volts). The pulse width is the amount of time the pin is high. The duty cycle is the ratio of taking half of the time it takes to go from off to on to off again. And the period is the total time if takes to go from off to on to off again.

Applications of Pulse Width Modulation

LED dimming

Here is an example of using PWM to vary the brightness of an LED.  In this circuit, the Arduino’s digital pin 3 using its ability to send different PMW (pulse width modulation signals) to dim or brighten an LED. I’m using analogWrite() to send the LED on pin 3 a duty cycle of 100, then 2, then 0.

analogWrite(3, 100)

analogWrite(3, 2)

analogWrite(3, 0)

giphy_motor transistor.gif

 

DC Motor Speed Control

Below you can see I’ve used a potentiometer to change the speed of the motor. This is done by sending the analogRead value of the potentiometer, mapping it to a value the motor can accept, and then sending that new value by using analogWrite to the motor.

giphy_pot analogwrite to motor.gif

 

Servomotors

I set up a servo motor but wasn’t able to get it to move using only digitalWrite or analogWrite(), and without an analog input such as a force resistor or potentiometer.

Question: Why is this?

You can see my progress by adding the servo library in the Servo Lab.

Question: For now, I am curious how I would send the voltage suggested in the reading? It says to send a 5-volt, positive pulse between 1 and 2 milliseconds (ms) long, repeated about 50 times per second.  What does this look like written as code?

Changing Frequency

I was able to set up a piezo using the suggested code set to a certain frequency. I struggled for a while because the speaker I bought from Tinkersphere was not working… but the piezo did work!

Question: To confirm, is it the changing period of a PWM signal that changes the frequency coming out of a speaker? 

 

 

 

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