Final Project- Swell Beats

 

Swell Beats- Amanda Lee & Jeff Park

For our final project, we wanted to make a multiplayer VR music experience that lets user “ surf ” the MIDI wave.

 


Inspiration

http://www.georgeandjonathan.com/#2

GeorgeandJonathan.com is an NYC electro duo’s band page. On this page, they have these “music videos” that show you all the notes used in their songs. Using Three.js, they let you navigate these notes from a traditional bird’s eye view.
Screen Shot 2017-05-06 at 2.24.44 PM
Screen Shot 2017-05-06 at 2.24.54 PM Screen Shot 2017-05-06 at 2.25.04 PM



http://dinahmoelabs.com/_plink/

Screen Shot 2017-05-06 at 2.32.13 PM

 


Idea Sketches

Screen Shot 2017-05-06 at 2.43.18 PM Screen Shot 2017-05-06 at 2.43.24 PM

 

 

 

 

 

 

 

 

 

 


Tech used

  • Three.js
  • Cordova
  • p5&Tone.js

Demo

For now, We made a simple environment that makes sound (notes) when users pressed arrow key (left&right). And Whenever user presses the key and makes a sound, it creates a box behind the user like a tail.

And we connect with WebVR, so user can explore the space dynamically.

Screen Shot 2017-05-06 at 2.52.44 PMScreen Shot 2017-05-06 at 2.55.28 PMScreen Shot 2017-05-06 at 2.55.20 PMScreen Shot 2017-05-06 at 2.55.12 PM

 

And we are still working on this project !


What comes next?

  • Technical Challenges
  • Supporting socket.io with a-frame
  • How to ensure a good framerate with other people making shapes?
  • Connect the Daydream Controller
  • Visual polish

 

  • The Music
  • Map pitch bend OR volume to a viewer’s z-position (up/down)
  • How to implement rests? (perhaps a jump?)
  • Quantize to the beat
  • Add different instruments

 


What did we learn?

  • WebVR with Three.js! A-frame is nice, but it doesn’t get us as far as three.js
  • We have a lot more design-wise to think through to refine the experience.
  • Tone.js vs p5.sound
Final Project- Swell Beats

Counter app- User test

Prototype

https://amandalee.proto.io/player/index.cfm?id=b9ebdc27-b30b-4d92-a6ae-07b6341db757

 

User test

 

     

User test question

  • How is the first impression ?
  • What do you think about the interaction/Animation ? ( need more instruction ?)
  • What kind of function should i add to make it better ?

 

 

User test feedback

< First page >

– The first page is little bit confused ( Goal/ Setting ). Mostly  users pressed Goal first before setting the goal.

-Instead of the word ‘goal’, what if it shows the goal itself like coffee or days.

-Use icons.

-Make a difference between Goal / Setting, like color or size or shape to recognize the right order to press.

 

<Setting page>

– For the setting, make some option for the units so users can choose it more                            easily.

– Plus icon – change it to “Change goal ” or “Save goal” / change the position below                    to count option so users can guess easily what does that icon do.

– Make the user can set only one goal and show the box scene when I open the                         app, so users can play with immediately.

– Users can’t change the goal before they achieve it so they will feel more                                   responsible about it.

 

< Box scene >

– Add more interaction to play with. ( rotating the scene or other interaction that                        users can play with box )

– Make a space or function that user can pile up the box in their own way.

– Change a color in every 10 boxes, so user can see the process in visually.

– (When user counts up) Make a line on the top, so user can see how much they                        achieve and how much is left for their goal.

– When user achieve their goal, make a party scene.

– Add sad face icon for when user fails to count their goal. If they press it, all of the                   box will fall down or some of the boxes will be reduced or added as a penalty.

 


IMG_2524 IMG_2520 IMG_0143

Counter app- User test

week2- App Idea : wireframe

hazis-01

 

HAZ?

Screen Shot 2017-02-27 at 10.29.39 AM

In ITP, lot’s of ITPers send “You Haz?” email everyday. It’s very useful when you need something right away or something you think is wasting money to buy for using once. And most of students are willing to lend their stuff to others. And things they need is totally different categories like food, materials, room.

One thing about this that really makes me annoyed is there is so much email from people. So my email box is getting full and full. I have more then 2000 unread email from ITP email. I don’t have an email alarm, so I can even check it immediately. And It’s hard to figure out if they already borrowed it or not. So I wondered what if i make this Haz? thing into an application so students can write and check more easily and don’t need to delete all the emails.

 

Users should verify their identity with School ID. Then they can started to use this app. users can ask to whole students in their University (ex: NYU) and also can ask to their same major students (ex: ITP). If you write down something you need, alarm will be go to the group that you asked. And if someone has that you need and willing to lend you, they will press “I have” button. Then you will see their comments, so you can message them directly. If you success to borrow something you will check the check icon. Then your status will be changed.

week2- App Idea : wireframe

week2- Monument valley app

IMG_1953IMG_1948 IMG_1949 IMG_1950

blueprint-monument-app-ipad-iphone

“Monument valley” is my favorite application. In this puzzle game, princess Ida journeys through mazes of optical illusions and impossible objects. Players have to rearrange structures to continue the journey.

I highly recommend to try this game to see all of those fascinating visual design. The illusion  gets more complicated  in every steps gradually, so it become difficult to accomplish the mission. As you see the images above, it’s really beautiful… Every scene has a very unique and attractive visual illustration. Especially, color and composition are amazing. I think this kind of good-design really matters to engage people to play the game.

And It’s an intelligent game that we have to keep thinking and seeing carefully to figure it out how to get out from the optical illusions. But there is no hints, so sometime it takes so long to find the way and makes me super annoyed.

 

week2- Monument valley app

MANIFESTO

Amanda,

  1. Go out and look around, listen carefully and feel more.
  2. Don’t be afraid to taste, hear, see, feel something new.
  3. Do whatever you want to try.
  4. Live for yourself, not to show off.
  5. Pace yourself.
  6. Don’t rush, but don’t get lazy.
  7. Don’t compare, but don’t loose tension.
  8. Don’t be greedy, but try to be perfect about what you love.
  9. Keep your own style and widen your possibility.
  10. Believe what you think.
  11. Less is more.
  12. Don’t be late.
  13. There is no excuse.
  14. If there is something you can’t agree with, ask yourself “Why not?”
  15. Make happy things.
  16. And Make people happy with them.
  17. And be happy yourself.

 

 

MANIFESTO

week1 – simple inspirational app

Get running with Cordova and your environment (iOS or Android SDK) and build a simple inspirational app.

I build an simple app which I really need now. It’s my class schedule app that I can check class information. The reason I made this is I always confused the class time and class room. I wanted to put them in one page as an application, so I can check them immediately. I also linked the class URL to each class list, so if I click the class, I can see class syllabus and check assignment whenever I want.

  • IMG_1845 IMG_1846
week1 – simple inspirational app

week1

 


Make a “thing” that communicates what you are interested in exploring in this class.

 

I love taking photos and recording videos in my everyday lives. Especially I prefer to take video. Because I can capture a real movement, real situation and real sound ( voice, music, noise ) and I can remind that moment more vividly.

I usually get captivated by people’s  gestures or face expression. Because It’s funny that we can see through people’s feeling by their gestures, face expression.

This video is what I observed in a cafe named ‘Brooks brothers Red fleece cafe’.

 

week1

week1- Relationship with my phone

I rely on my phone very much. It became the most important thing in my life.

When I wake up, I turn on the music automatically. When I eat my breakfast, I do FaceTime with my family or friend. I text with my boyfriend all day. I take photos whenever I see something interesting. I search the route with google map wherever I go. I upload photos in Instagram almost everyday. I venmo to my friend when I have no cash. I write notes whenever I got new information or thoughts. I check emails from Midori & ITP list. I use Uber. I search something to eat around school. And all these things happen through my phone everyday. According to this, My phone is very personal and also very social device for me.

As a personal aspect, phone is kind of my private storage. I write my schedule in my calendar, I download my favorite songs and I note my thought and idea. It’s very easy to know what I like, what I think and who I am. I think I record every moment of my life in my phone. Unlike our past when it had only few functions in phone, it became a completely customized device these days. Data inside our phone are totally different individually according to our personality, preference, interests.

And as a social aspect, phone is an indispensable medium to socialize with people to me. I share my everyday with my friends through SNS ( Facebook, Instagram ). There is a specific chatting app in Korea named Kakao-talk. It’s very hard to communicate without that app. People doesn’t usually announce separately if I’m not in that group chat.

One of the trait which can be pros or cons is It’s too easy to manipulate our records. We can write, duplicate, edit and delete immediately. Even we lost our phone, we can backup our files and records through i cloud. It has a totally different feeling with when we use film camera, letters, CD, diary or watch. It is true that digital brought convenience, but it became hard to feel their unique analog feeling. Now I can’t go anywhere without google map and I can’t contact with my friend without my phone and I feel like my writing style is getting ugly because I don’t write with my hand anymore.

I know that I got used to living in this digital world, but sometimes I truly missed physical and analog ways like writing letters or memorizing friend’s home number to call them.

week1- Relationship with my phone