Week 2: White Balance

Other than the actual assignment, my first challenge this week was actually getting to know the camera. I learned that I knew just about nothing about taking pictures. I had a mini learning session with Rebecca who gave me an overview about F-Stops, Aperture, and ISO settings. It took me some time to understand how to use them and I ended up taking a lot of pictures before even getting to the White Balance assignment.

Below are the first photos I took. The one of the left is with Tungsten White Balance and the one on the right is AWB. I then realized that every picture I have ever taken at ITP has been wrong–I thought the floor was really that orange.

1o3a7891 1o3a7892Custom White Balance

1o3a7999

Auto White Balance

1o3a7998

Experimenting with White Balance

Auto White balance

1o3a7978

Custom white balance: using brown as the “white”.

I wanted to experiment with using custom white balance to help understand what really happens. I adjusted the white balance by using this brown piece of cardboard.

1o3a7977

When I used custom white balance, the picture turned out very blue.

1o3a7979

I did the same with purple. Below I took a picture of something purple and then used that to adjust the white balance.

1o3a7964

Then I took a picture with the custom white balance, which showed the image as green.

1o3a7965

AWB vs Custom White Balance

I decided to take some photos of this flower I found on the floor. Since I don’t know much about cameras I did some research about aperture, F-Stops, and ISO. The floor was pretty dark, so I put the ISO=1600, aperture= 1/80, and F3.5.

F/8 (very dark)

1o3a8027

F/5.6 (dark)

1o3a8024

Auto White Balance:

1o3a8039

Custom White balance:

1o3a8034

1o3a8040

To make sure I was really understanding, I decided to take some other photos that had more going on in the photo.

Assignment

After getting more comfortable with setting custom white balance, I took the photos below. The one of the left is with AWB and the right is Custom. I noticed that with Custom WB there seem to be more blues in the photo, whereas the AWB has more yellows and oranges. I think I have gravitated toward the picture on the left because it’s brighter, which makes sense now knowing more about color temperature. However, I know now that I can achieve that in manual settings by using the right FStop and Aperture. What’s also interesting about these photos is comparing the white background. It makes it much easier to see that the right (custom) picture is more accurate, as the one on the left (AWB) looks more yellow.

1o3a8053        1o3a8054

Auto White Balance

1o3a8053

screen-shot-2016-09-24-at-2-28-48-pm

Custom White Balance

1o3a8054

screen-shot-2016-09-24-at-2-29-17-pm

Auto White Balance

1o3a8048

Custom White Balance

1o3a8047

I took the picture below with F10, 1/1000, and 3200 ISO. It took me about 40 tries to get the exposure right. By changing the ISO to 1600 the histogram changed dramatically–the image appeared darker. By changing the camera settings the images looked either too bright, sometimes even all white, or very dark. For example with F10, 1/3200, and 1600 ISO, the curtains in the photo are very dark with a vast contrast to the blue outside. All in all I found this to be difficult because it was very bright outside. I am curious to learn the best way to take pictures like this. It’s either that the blue sky is very clear or the curtain detail is too dark.

di_3

 

 

Week 3: Becoming Live

This week was pretty challenging for me. Understanding the difference between AJAX and WebSockets. Joining Digital Ocean. Connecting to the server. I ran into a few bumps in the process of setting things up, one of which being that I needed re-install Cyberduck on this computer, after having not used it since last spring. Eventually all of that was done and it was just a matter of getting the code from class to work. (Spoiler alert: this blog will mainly be asking a lot of questions).

When I start the node server and reload the page, it runs, but I get this error:

GET http://192.34.62.149:8080/favicon.ico 500 (Internal Server Error)

When I type in a message it works, but I couldn’t figure out how get each message to go to the next line. I tried adding a 100% margin in CSS and a few functions in Javascript, but nothing worked.

So this is what it looks like:

screen-shot-2016-09-19-at-11-59-50-pm

The good thing is that it does work. I tested it out with some friends and they can send and receive my messages.

screencapture-192-34-62-149-8080-index-html-1474383822364

screencapture-192-34-62-149-8080-index-html-1474383678637

screencapture-192-34-62-149-8080-index-html-1474384057599

http://192.34.62.149:8080/index.html

Week 1

“The hurricane is coming, you have 20 minutes, get your stuff and go. You’re not going to be saying, ‘Well, that got an amazing write-up in this design blog’” –Objectified

Good design:

For this aspect of the assignment I decided to dissect the design of the BMW experience. This is more about how I feel, or my emotional journey of starting a BMW. This is a newer car, I believe a 2014 model, which means it has cool features like pushing a button to turn on the ignition, and controlling the temperate of heated seats.

I’m going to describe a few parts of the experience:

  • Opening the car door
  • Starting the ignition
  • Turning on/controlling the A/C and car temperature
  • Switching the gears from Park, Drive, Reverse, Park

The first part of the experience which is not pictured is opening the car door. There is no traditional key, I just need to have the key on my person. I actually had the key in a pocket in my backpack and all I need to do is pull the handle on the door. It typically unlocks the car right away. Sometimes I need to take the key out and put it closer to the car if the motion sensor in the car is not working properly (I’m guessing this is what happens).

img_5285

Next I turn on the car. This is super easy and kind of amazing. There is a button behind the steering wheel, in about the same place as where you would be keys in a traditionally designed car. If you press the button without your foot on the brake it will just turn the car battery on. Meaning you can listen to the radio, but cannot switch any gears. (Seen below)

img_5289

If you want to turn the ignition on, you must press down on the brake while pressing the button. As you can see in the image below, it gives the user more information– the indication that there are more features to use now that the ignition is on.

img_5293

Now that the car is on, let’s turn on the A/C and make the car comfortable.

First control the temperature by simply turning the knob that corresponds with your location of either passenger or driver.

Driver (left)

img_5299

Passenger (right)

img_5303

Now you can control the fan.

Increase air flow

img_5302

Decrease air flow

img_5300

The buttons indicate which air direction is selected. Below it shows that all three on selected, which means the air is flowing to your feet, to your legs/lower half, and upper body.

img_5304

Finally if you want to turn on the A/C simply press the A/C button.

What is nice about all of these buttons is that there is a light indicator letting the user know that that feature is on. This is a very familiar feedback loop and even though there are many selections to make, it is simple and fast to make them.

img_5301

Now to start the car. The joystick in the center is no different than any other joystick in a car I have seen. The unique difference is the interaction. What I really like about this is that because it is a familiar design, it invites a user to interact with it. It’s likely a user knows it must move back and forth in order to change gears. However, this is different because its location is always the same–meaning to change from Park to Drive, you simply tilt it backward and to go from Park to Rear, you tilt it forward.

img_5295

Tilt forward to Rear

img_5297

Tilt backward to Drive

img_5296

And to park, simply press the “P” button on the top of the stick.

img_5298

Another example of Interaction Design I have been thinking about lately is the flow of coffee shops and restaurants, more specifically how people order food or drinks. I tend to get slightly nervous when I go to stand in line and order something. Sometimes it’s not knowing how to pronounce something, or when you have to say slightly-embarrassing names, like “FAT BURNER” or “HANGOVER HELPER”. If I am not hungover, I feel weird to order the juice named that, as it implies I am ordering it while being hungover. But this is beside the point. I also think about how an establishment designed the experience of ordering; how do they welcome people to feel comfortable ordering, even ridiculously named items?

Bad Design

At the Bean coffee in Willaimsburg here is the ordering counter from left to right. The menu stretches from almost the entire counter starting from behind the dessert display. I am pretty near-sided and can barely read any of the menu all the way to the left. The interesting thing is that the items most visible are very standard coffee shop items, Hot: coffee, tea, espresso, americano, etc. Iced: Coffee, tea, latte, mocha, etc. Although people read this off the menu, typically these are items a user already knows they want or don’t want. The Bean has a variety of innovative Smoothies, Coffee Smoothies, Acai Smoothies, Juices, and Smoothie bowls. These are also the most pricey items, yet they are the hardest to read. I can’t help but wonder why they designed the menu like this.

I am especially curious about the “Smoothie Bowls” sign pictured in the picture on the left. Customers are standing from the center to the right of the counter. If there are more than two people in line, it moves a person back even further to the right, which means by the time a person gets to the counter they might not have any clue of what to order, as they hadn’t been able to distinguish anything on the menu. Why not move the free-standing menu all the way to the right? I would be curious to learn if this would increase sales on those items.

img_5306 img_5307

Bad/Good Design?

Another design I’d like to briefly discuss is the UMBRELLA. I have always thought the umbrella was such a funny thing we have naturally adopted to our society. It’s used different for some cultures, typically based on climate, as in it’s usually used to protect from rain but some use it to protect from sun. For whatever reason I still feel more comfortable using it as a way to protect from sun, even though I don’t even use the umbrella for that. Similarly to the discussion in Objectified about the toothbrush, for umbrellas, it seems that cost and advancements to the umbrella are based on the grip and also the spring mechanism used to open and close the umbrella. We all know a cheap umbrella won’t last by either the spring breaking, or the metal rods bending and no longer supporting the top cover. It’s definitely fits the bill with being a simple design, as it essentially is just a cover we hold. What I find interesting is that no one has come out with a design where we don’t have to hold the umbrella. I mean, seriously, how many umbrellas are we going to lose before someone re-designs it?

Design evolution of cameras

Digital cameras vs. Film Cameras

 

Week 1: NYC Systems

Besides the beautiful arrangement of baked delights, the wood and glass case that holds them has a story. It came from a neighboring lingerie store that was going out of business and now, rather than panties, it offers something equally enticing.

Besides the beautiful arrangement of baked delights, the wood and glass case that holds them has a story. It came from a neighboring lingerie store that was going out of business and now, rather than panties, it offers something equally enticing.

It’s all about getting what you want, whenever you want. A bodega is located at most corners, where you can buy most of your groceries, and pet the store’s pet cat. In fancier neighborhoods, you can visit a Sunac or Khim’s, where you can buy sushi, a green juice, and toothpaste. And if none of that works, you can also order from any restaurant in the area from Seamless.

When I think of New York City, I can’t help but think of food. The food culture of NYC is undoubtedly strong and the system of ordering food is very unique. As a fast, ruthless city, we want our food fast, yet New Yorkers tend to not compromise certain ideals–We want our food fast and at least 9.0 rating on Foursquare.

Let’s consider all of the types places you can get food in New York: family-owned bodegas and restaurants, food trucks, coffee shops, franchised restaurants, etc. Not to mention delivery services, most popularly, Seamless.

When there are a thousand coffee shops in Brooklyn, how does one stand out?

Recently I met a few friends at a Bakery in Williamsburg, cleverly named, Bakeri. It has various types of coffee drinks, savory, and sweet pastries. I ordered a small iced coffee and a savory tart. After I ordered I was handed a metal stand with a beautifully designed card with the number “13”. At most places, like the many franchise restaurants surrounding the NYU campus, the user flow is typically:

  1. Stand in line
  2. Order standing up
  3. Pay for order
  4. Asked if you are staying or leaving (optional)
  5. Stay and sit at a table (regardless of previous answer)
  6. Leave with food

However, at Bakeri when I tried to pay, I was told that I will pay when I leave. This I believe, was designed to give patrons the feeling that this coffee shop was different than others. I sat down at a table in the garden backyard where I was brought my coffee and pastry. Upon leaving, my friends and I nearly walked out without paying. We were in no position to dine and dash on a Sunday morning; we merely forgot. A memorable experience, perhaps how the owners intended.

Get your bacon, egg, and cheese on a roll, with ketchup, from a food truck

New Yorkers love convenience. Who has time to wait in line at Starbucks? Especially when a food truck is parked right outside your work. When you order a coffee in the NYC iconic coffee cup, you’ll be given a napkin to prevent your hands from burning–who needs sleeves?! For a few dollars you can get a staple bacon, egg, and cheese sandwich, usually served on a roll. Food trucks don’t just serve breakfast, you can find a food truck for any type of restaurant, most commonly Halal food.

 

Week 1: portrait

For the first week’s assignment I was challenged to get back into coding after taking the summer off. I spent my entire summer heavily designing, and haven’t touched JavaScript since last spring. I wanted to keep my project simple, but meaningful and apply code that not only works, but that I understand.

My concept for my portrait is to show my “unusual” talent of lip-synching with songs that reflect my humor, passion, and love for simple design.

  1. Load the page. See a looped video of me dancing. Hover and click the “Sing with me” button to go to the next page.

loadscreen

2. The next page you see a title “Choose a lyric” with 6 lyrics/song titles to choose.

screen-shot-2016-09-11-at-7-45-49-pm

3. When you select a title the video associated with that song plays.

screen-shot-2016-09-11-at-7-38-31-pm

4. You can toggle between any of the 6 videos to sing along.

screen-shot-2016-09-11-at-7-38-41-pm

5. When a video ends, a new image appears.

screen-shot-2016-09-11-at-7-38-55-pm

Here is Week1 Portrait!

A live or synchronous site

It seems that live streaming opens a portal for anything you could possibly think of. The first live feed I will talk about is of stray cats in South Korea eating. Super interesting.

Why just watch cats when you can also spend your time watching other people’s dogs.

screen-shot-2016-09-13-at-11-48-26-am

http://livepuppycam.com/

———————————–

I need to revisit this question, but right now I would say a live site I find helpful and enjoy is Zenhub. Zenhub is a project management tool within Github. It’s very similar to many agile tools out there.

screen-shot-2016-09-13-at-9-16-03-am

What I like about Zenhub:

  1. Linked to Github
  2. Helps manage progress across an entire team
  3. Live updates seen instantly

It’s a nice way to keep everyone communicated about what work each member of the team is working on.

More to come!

Final: Interactive Brazil

Why?

Through this project I wanted to explore how one can understand a different culture through its music. Music is an integral part of any culture, as it’s the collective way people express issues their own country faces. Brazil has become a very important part of my life in the past two years, for I have become close with many people from the country. Music is an incredible outlet for Brazilians- many of the most famous musicians from the country also have served as activists. Brazil is also a very large and diverse country. Within its 27 states and 5 regions, music has a distinct presence in each area. Yet the most interesting aspect is that music is also a way the country stays unified and optimistic.

Concept:

This is an app that explores music from the 5 regions of Brazil. It’s a way for someone to learn more about the country by learning about different musicians from one of the five regions. The user is able to interact with the music of the country and play with the sounds to create a unique experience.

Initial wireframes:

My original idea was to have one map that the user would be able to touch different parts of the country to play music from that specific region.

_aoac_final_wireframes

However, that proved to be very difficult for me and I spent many many hours and days in Illustrator making maps of Brazil. I played a lot with clipping images to fit inside of the region. The current result is something I am happy with, but they are many improvements to be made in its next iteration.

favelas_new

_new_southeast_hover_new_centraleast_hover_new_south_cover _test_new_hover_north

_new_north_cover_all_whole1

Screen Shot 2016-05-03 at 12.03.51 AM Screen Shot 2016-05-03 at 12.04.01 AM Screen Shot 2016-05-03 at 12.04.15 AM

Screen Shot 2016-05-02 at 8.08.01 PM

What doesn’t work:

Saving to the local storage on page 3

Effect buttons have the same functionality as the navigation buttons

Embrace: jackets for good vibrations

6B1A9797  6B1A9830

Jackets: working prototypes

IMG_4471 2 IMG_4473

Embrace jackets are wearable jackets embedded with vibration motors that are triggered by pressure. Each jacket represents the two extreme personalities of people are physically affectionate. Each jacket sends vibrations to the person they are hugging. However, when worn together, the jackets complete a circuit. The vibration simulates the transfer of energy from one person to another, while the connected circuit represents the natural connection between people.

To make this circuit, first I prototyped with alligator clips and then made sure the two circuits closed each other. I decided to put 3 LEDs in the back of each jacket. This was to make the visual consistent and ensure that lights would be visible.

IMG_4447

I tested the circuits by having two people hug with the conductive fabric taped to the front of the jackets.

IMG_4438

Once I was comfortable with the placement, I decided to start building the circuit in the actual jacket. I started with the long jacket. The challenge was the the LED legs went through the fabric, meaning that when I soldered the legs together with stranded wire, there would be no way to adjust the placement of the circuit if needed. It was also challenging soldering over fabric. Overall, this actually wasn’t as bad as I anticipated, only time-consuming. It took about a day to do each jacket.

IMG_4442  IMG_4443

Although I love the look of the back with the LEDs, I definitely think I lost that simple, clean look on the front with conductive fabric. I wanted to ensure that no matter how a person hugged, the fabric would touch. This meant that I wanted to cover as much area as possible with conductive fabric, which ultimately makes the jackets look a little messy. To build on this, I would like to laser cut a design, or even cut a design in the conductive fabric to make it more visually appealing.

If you’re wondering if I’m happy with the result, the answer is very much so, yes!

Almost to the end

The past two weeks a lot has been happening in my personal life that has definitely strengthened my need for hugs. It’s been a difficult and emotional two weeks and I have honestly not put in enough work into my wearable project as I would necessarily like.

What I have are two working jackets that vibrate when people hug. I user-tested with some people who weren’t aware of the vibration motors and when they hugged, it not only gave a lot of happiness, it also made people hug for longer.

IMG_4400 IMG_4402 IMG_4404

*Full picture to come*

IMG_4407 IMG_4408