Final: Interactive Brazil


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.


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.


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.


_new_southeast_hover_new_centraleast_hover_new_south_cover _test_new_hover_north


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

Brazil: an interactive experience

Screen Shot 2016-04-04 at 5.30.39 PM

This is the first iteration of a project I plan on continuing the next couple of weeks, and possibly for my final. I wanted to explore Brazilian culture, specifically through the lens of music, with the current socio-political situation in the country. I am very fascinated by Brazilian culture and also take Portuguese lessons weekly. I understand what’s happening politically in the country, but not on a social level. Through this project I want to use it as a way to process how Brazilian politics affect not only Brazilian people, but the people outside of Brazil.

Screen Shot 2016-04-04 at 5.32.45 PM

Below is a video (without sound) that shows the interaction of the experience. It’s important to me that a user has feedback on how the music and sound is mapped to the interaction. When the images are selected, they animate. Each time an image is pressed, it turns a shade of grey, and the sound is distorted each time.

Week 4: fundamentals of music composition

This week was a mini-breakthrough for interactive music. I am definitely starting to understand more about the code and music. I spent a lot of time the past week just going over the in class examples, reading “Javascript: The Good Parts” and asking a lot of questions to understand class, methods, and prototypes. It also helped to visit The Active Space for our field trip in Bushwick. That was incredibly inspiring, and made me want to just go home and work. It was nice to hear people outside of a school environment talk about interactive music and to learn more about the work of Yotam. I felt like I left with a better grasp of what interactive music is, and how we can contribute to it.

Our assignment this week was to encapsulate our notes in a Function Object and give our object an expressive interface that we can use. What I decided to do was have a motif of “conflict + resolution”. My Function object is Resolution and my public methods are the types of ways in which people fight in order to come to a resolution.

I decided to represent this visually with lego men faces. Each facial expression represents notes that convey the personality of the person fighting. For example, the angry face is only given 3 notes that are lower and have a longer duration, whereas the scared-looking face has 12, which start low and go very high. While the “calm” smiling one has about half that amount of notes that sound more balanced and calm.

Once I got all of the notes to emulate the emotions of angry/aggressive, scared, and calm, I wanted to give the user the opportunity to play with the pitch of all three. I thought this would be a nice addition to simulate a type of argument that escalades and then eventually calms down to resolution. Often when we argue, depending on our mood, our voices get higher or lower, which is usually related to how irrational or logical we are being. I thought this would be a nice interaction for a user to experience.

Screen Shot 2016-03-01 at 7.45.53 AM

In order to do this I created a method inside of the constructor function that raises or lowers the octave. Then when I called this method inside of the button, I added a counter variable that would increase or decrease.

Screen Shot 2016-03-03 at 9.19.43 AM

Below is the final version.

Screen Shot 2016-03-03 at 9.15.08 AM

Week 3: Random!

Javascript, music, what? This is one of my more challenging classes. From the music theory to the coding, it’s hard to even understand what I find more difficult.

For this week’s assignment we were asked to apply a random process to our notes by using what we learned in class about probability and Markov Chord.  I can definitely see a progression from the previous assignment in terms of my understanding of both the music aspect, and ToneJs/Javascript. I got a little bit more comfortable with my CSS skills, too.

Screen Shot 2016-03-01 at 7.17.12 AM

How it was a made: 

There are three boxes, a black, a pink, and green. The black and green play music when pressed, while the pink is merely apart of the visual. There is also 3 sounds that are playing at random, which were made using Markov Chord. I set the probability of each note for 8 beats and then multiplied that by 8 to make that loop play 64 beats.

Screen Shot 2016-03-01 at 7.26.14 AM

Since I have been only using wav samples, I wanted to try to play something with notes on the synth. I created a div, which is the black button, and when pressed plays plays notes at random using the Markov Chain probability.

Screen Shot 2016-03-01 at 7.33.31 AM

The final part, the green button, when pressed plays 3 other wav samples from the same song I used for the pink button, which is also the same sound I used for my previous work–“Aguas de Marco” by Tom Jobim and Elis Regina.

This one is played similarly to the looped background noise. What is different about this one, is that because the notes are retriggered, the more the button is pressed, the louder the sound gets. This allows for a more unique interactive music experience than my previous work.

Screen Shot 2016-03-01 at 7.37.16 AM

Listen below!

Check out my code!



Week 2: Notes realization

Notes realization

For this week’s assignment of realizing notes, I took a different turn than what I presented last week. I wasn’t too happy with the notes I selected, and I knew I wanted to make some sort of compilation of a Bossa Nova song, a genre of Brazilian music. I have been trying to learn one of my favorite Brazilian songs, Aguas de Marco, a song sung by Tom Jobim and Elis Regina.

What I did was take snippets of the instruments and then a few seconds of the singers voices. I visually represented it with a blank canvas and black shapes.

Screen Shot 2016-02-16 at 5.23.32 PM


This week we were asked to collect 2-5 notes that we will use over the course of the semester. I am not very musically inclined, but I wanted to choose sounds that evoked a feeling you get when you listen to jazz.

The three notes I chose are all slightly different. I searched for awhile to find notes that could compliment each other.




I’m not 100% satisfied with them at the moment. At this point I like them better individually then I do when together. In order to get the notes I want, I am changing my perspective in the experience I want a user to have. One thing I want to do is cut the saxophone, which is now 41 seconds, to smaller parts, that way a user can have more control, and ultimately more fun in working with the notes.