Shepard Tone Final [Code of Music Pereira]

For my Code of Music final, I continued to work on my midterm project on the Shepard Tone and really polish it.

I added in different intervals and things that the user can interact with as well as compelling visuals. I also made the triangles rotate and scale in/out faster depending on the intervals the user responded to.

The part of my code that was annoying at times was that everything worked but occasionally it would crash and I was never able to figure out what was wrong. Luisa fixed it but I suspect I copied the code wrong into my final sketch.

Tech:

P5JS

Tone.js

Acknowledgements:

Code for Artists for help with the code for the dials.

P5js examples / Dan Schiffman for the circle scale code of which my triangle zoom code is adapted from.

screen-shot-2016-12-15-at-10-53-35-pm screen-shot-2016-12-15-at-10-53-43-pm

Final Project of Dyadra [The Code of Music, Pereira]

Concept: I would like to make a musical experience based off the modern day platform game in image, yet, makes a comment on how unstragetically mellodical our everyday lives are.

http://192.168.50.184/~dds341/Final/FinalSample1/

For my final project for Code of Music, I would like to make an interactive musical experience, sort of like a video game. However, this “game” won’t necessarily have a goal. The premise is that you’re lost, and you’re stuck in this mythical forest, where every interaction you have creates a sound. Essentially, I would like to comment on how melodically the world around us is, yet, we don’t recognize these harmonies ,because we’ve grown so accustomed to it. I plan on utilizing most of the things that I have learned over the course of the semester, and showcase them in a new abstract way.

 

Game Universe: I will be using P5 to program essentially everything I use. The libraries I will use will be P5.Play and Tone.Js. P5.Play is a very functional library and makes interaction very easy. Everything in my program is coding using P5.Play and Tone.Js. The images used are from open source game databases, so that they are royalty free.

http://opengameart.org/

The background music is essentially be a markov chain of a melody that has not yet been decided. I am not sure if I want my game universe to be dark and gloomy, or bright and flashy. The tone of the game will most likely be set after I have all my interactions set. I am using various synthesizers that are built within Tone.Js, including the Polysynth, Monosynth, and a noise synth. These synthesizers all have completely different timbres that can basically form an entire musical environment on it’s own.

Some of the challenges I faced were similar to the obstacles to the ones I faced in my midterm. Where I focused alot of attention on the visuals and not as much on the musical interactions. I think alot of time, I focus too much on what people see versus what they hear. Some of the  feedback that I got from our professors was that some of the musical interactions aren’t that obvious. I agree. I think moving forward I will put more effort into implementing sound.

 

 

ZZ – Final Project Documentation [The Code of Music, Pereira]

http://192.168.50.184/~zz791/w14_weather/ (for a better experience, please open the link in Google Chrome)

Title:

Above the Sea

Elevator Pitch:

This project translates weather forecast data(sea level and main weather condition) of a certain city into notes and chords and visualizes the data in a column system in P5. After being laser cut onto the clear acrylic board, the song about the sea level and weather above the sea can be played on a record player.

Description:

This projects gets weather forecast data from the 5 day/3 hour forecast API from OpenWeatherMap. Since the minimum unit of the data interval is 3 hours, the API gives me about 35-40 pairs of the sea level and main weather condition data. Each 3 hour interval represents one bar, and each bar has 8 beats of notes in membrane synth in one chord with a certain arrangement that represent main weather condition in that interval. There’s also a longer note created in FM synth representing the sea level. The API is live, which means it gets updated every 10 minutes(this interval is set in P5 so it can be changed easily).

Conceptual Development:

I started off with the idea of visualizing some recorded audio pieces in a pattern of tree rings. (https://vimeo.com/64589172) I made a couple of different sketches to mimic the tree ring with sound waves with slightly different methods. These are the results I got:

screen-shot-2016-11-21-at-11-58-47-am screen-shot-2016-11-21-at-12-08-05-pm screen-shot-2016-11-30-at-6-56-03-pm

Then I was told by Luisa that there’s an instructables post about laser cutting record. Then I looked into the post, and decided to include this part into my final project since the idea itself is really fascinating. With Luisa’s help, I decided to associate 4 main weather condition with notes in 4 different chords.

Clear – C major

Clouds – C minor

Rain – A minor

Snow – B minor

The sounds are triggered in a way that is similar to Arpeggios we looked at in class.

The sea level data aka the long note that lasts through one bar is mapped into a scale of C4, D4, E4, F4, G4, A4, B4, C5 note.

Technical Development:

My P5 sketch generates the music piece based on the current weather API, and in order to preserve that piece, I need to record the piece first and then run it through the python program and processing sketch provided by the instructables post. However, I need to make some modifications such as the size of the records, the radius of the most inner grove, rpm, maximum size of the pdf files(since one song’s groves on one pdf will be way too much to be imported into illustrator, so I had to split them into 9 pdfs and then import them so that no groves will be missing.)

I bought a record player on Taobao–230kuai–the cheapest but legitimate one I could find. I then did a testing round with a random song in three settings suggested by the post. Frequency 5000, speed 100, dpi 1200, and power 12, 20 and 24. It turns out that power 20 one sounds the best.

img_5159

Then I started laser cutting three music pieces I recorded on Dec 6 of three cities–New York, Prague, and Shanghai–where I lived since last summer.

1 2 3

img_3534 img_3544 img_3587 img_3595

After the laser cut process was done, I wash the three records with soap and water to get rid of all the tiny dust from the cutting processing.

img_3598img_3600

Listen to the final result in the video 🙂

img_3619 img_3622 img_3625

The Seasons, Documentation – [The Code of Music – Pereira]

CONCEPT

“The Seasons” is a listening experience that intends to take the user through the passing of time represented by the changing seasons and the sounds and atmosphere related to different seasons. The main interactions involved are by using the mouse and the “right-arrow” key, but the project hopes to engage with the user’s sense of hearing through the different sounds personally chosen for each season.

For my final project, I wanted to create something that takes the user through different stages where they can appreciate music in different forms. This is also the reason why this is more of a listening experience. This is one of the first classes where I learnt to code a lot using a JavaScript program (p5.js), and I wanted to capture everything that I learnt in the course of the class (or nearly). This is how the concept of time became an inspiration for this piece, and while talking to Luisa, the concept of seasons came up and after a few days reflection I decided to continue on this path of representing seasons through music and visuals.

This is my initial brainstorm:

img_20161214_143512

I wanted my project to be soft and relaxing, so the visuals that I chose are simple and the background for each season is of different flowers, to keep it a consistent theme. In this project, I made use of a lot of different synths, effects applied to sounds through Tone.js library, Markov chains, Tone.Part, sprites and p5 sound library. I also included different musical elements such as arpeggios and tempo and timber of sounds.

PROJECT

Working link: http://192.168.50.184/~mhf273/The%20Seasons/

(Takes a while to load though)

Video of how it works + explanations:

the-seasons-small

TECHNOLOGY

Here is a picture of the plan for the different scenes:

img_20161214_143520

In the first season (Fall), I originally had a Markov chain generated by itself with music from Eric Satie. However, this then changed into a Markov chain that I designed from scratch using probability values that I personally assigned. The visualization diagram can be seen in the picture above. I wanted the Season Fall to be mellow and relaxing and on the p5 examples, I saw an example of a “soft body” and I thought this was very calming and the movement of the soft body was relaxing so I decided to take that and modify it to my liking and included this in my Fall.

Fall link: http://192.168.50.184/~mhf273/Fall%20markov/

The next season I worked on is Winter. When I think of winter, I think of different elements that are cold but at the same time gives a warm “hot chocolate day” feeling. This is how I decided to make snow happen on the screen. In order to do this, I used the p5 sprites and animated them to fall like snow. I also have a rain soundtrack in the background, as well as different mostly piano sounds when the user hovers over the flower buds. I mapped the sounds to the position of the mouse over the flower buds to trigger them. In this way, the user can also create a nice music combining those sounds with the sound of rain. I find it very calming.

Winter link: http://192.168.50.184/~mhf273/Winter%20melon/

For Spring, I wanted to create the atmosphere of “new beginnings” when listening to it. I used a synth that plays three different arpeggios that I looked up on Chrome arpeggio lab, and having them play on loop. I also took a long time deciding what synth I wanted to use and what type of oscillator it would be, “sine” or “square” or “sawtooth”. (deciding is hard!). I also have a Tone.Part going on in the background to accompany the synth. This tone part has a collection of sounds including laughter, water flowing, birds, cymbals and triangles and more. I personally crafted the sounds in a way that I thought was pleasing to my ears and that went well with the arpeggio, and also made it so that it gives the feeling of Spring and things coming to life. There is also the function mouseClicked which triggers birds flying away. I hope I manage to translate this to the user as well.

Spring link: http://192.168.50.184/~mhf273/Spring%20bloom/

For my last season Summer, I wanted it to represent summer in every way from the visuals to the music. Therefore, there are balloons coming on the screen every 25 frames (which I learnt the math behind really quickly thanks to Luisa), and the user can pop those balloons which will trigger a splashing noise. Moreover, the background sountrack is a joyful and playful one that reminds me of ice cream, and the user can control the playback rate of the music through the mouse position on the screen. Additionally, I wanted to include a typing function so when the user types in the word “summer”, a music is triggered, in this season it is a cut from Grease’s “Summernight”.

Summer link: http://192.168.50.184/~mhf273/Summer%20balloon/

PROCESS

During the creation of this project, I encountered a lot of different hurdles and difficulties, but I learnt a lot at the same time. I started by creating my different seasons in separate p5 sketches and the first difficulty I encountered was how to incorporate them all in one sketch as well while making them work on their own individually? In order to do this, Luisa explained to me that I would have to create different scene objects and then on the main sketch, call for those different objects to be played at what time. This was completely new to me, and there were a lot of times when I struggled trying to make the combined sketch work because at one small error either through a missing bracket or a missing name (scene1.blahblah), the sketch would not run. It was more so difficult because p5 would not exactly tell me where my error was. I am very grateful for Luisa for helping me by giving me examples of how I could execute things and thoroughly explaining to me what steps I needed to take in order to do what I wanted p5 to do. It also took a long while to pinpoint any errors in the sketch and make it work as a whole. I think I never created something this complicated before (although I believe that others do more complicated, but this for me was very elaborate and demanded a lot of things I had not encountered before).

Through this project, I learnt how to create a Markov chain by hand, and realized the importance of sketching everything out. It is easier to understand things written on paper and then translate them to the screen! I learnt the difference between universal variables and how to declare variables in bigger objects such as my different scenes. I also learnt to better understand the differentiation between preload, setup and draw functions and which sort of code should go in each of these categories depending on what I wanted to happen on the screen.

Something really interesting that happened in my scene 2 (Spring) was that although my variables were defined and I called the coded my line right using “this.kitPart” to call my Tone.Part, p5 would not want to recognise that, and Luisa showed me a hack to work around that. This was to call a variable “that” and make it equal to “this”, so then “this.kitPart” became “that.kitPart”, and the sketch finally worked. I thought this was quite amusing!

In the last few days, I learnt that it was very important to watch out for missing brackets (“{“) and naming things properly because for a small single error, the whole sketch would not run properly. And this would result in my p5 to constantly crash. Additionally, I learnt the importance of coding more neatly and calling different functions when I actually wanted them to happen, so Luisa helped me move around my code lines to better places in the sketch so that p5 would understand it better. Things that needed to be in setup would be in setup while things in draw would be in draw because the function draw is a constant loop and there are some things that we do not need to be drawing all the time.

ACKOWLEDGEMENTS 

In this project, I used music downloaded mainly from freesound.com and a few YouTube videos. I also used the soft body example on the p5 webpage to design a soft body for my Fall season. I also took a lot of references from the p5.play website and creation of sprites in order to include animation into my p5 sketches.

Throughout this process, I am extremely grateful to my professor Luisa for having spent so much time explaining to me how things worked in p5 and teaching me so many new things. I really appreciated all the examples that she provided me for reference and the time we took looking for my errors and why my project would not work.

IMPROVEMENTS & FEEDBACK

Upon showing the project in class, some comments that I received included having a relationship between the different seasons instead of them feeling like totally different spheres. Despite having visuals that connected them and feelings of different seasons, I think the hook that is missing is why would the user go through those seasons? I believe that if I can incorporate an element that is present throughout the seasons such as the “soft body “ in the first season, I can perhaps take the user to experience a story which would enhance the experience. I think it will be nice to work on incorporating this now!

LOOKING BACK

Looking back at this semester as a whole, I really feel that I learnt a lot by doing and writing code. I thoroughly enjoyed the lectures and learning and reconnecting with musical elements and I think this course gave me a brand new appreciation of music and how I could make music sound and play the way I want it to. This course also enabled me to start discovering how to create a musical interface and introduced me to how I could now go about and do this. I believe I have a lot more to learn and experience and hope that I can take this knowledge and make it grow bigger.

 

 

Final Documentation [Code Of Music, Pereira]

First, here is the link to my final project: http://192.168.50.184/~man421/guessthesong/

The project is designed as a game that one can play to guess Melodies of Songs that they are familiar with. In this version, it has 3 songs, each placed in their own state so that if you click the right bubble for the son you’re hearing, you go to the next song. If you click the wrong one, it takes you to a songless state where you can choose to restart the game or not.

Here’s a video where a friend tried to play it.

 

 

At first, I wanted to do this game using randomly alternating markov chain produced versions of the midi files of different song but it turned out that getting all of these to get together into one cohesive file that works was really difficult.

What I did first was download midi files of popular songs from open source sites that had them. This was a long process only because I had to sort through them to find what sounded as much as the real song as possible. It was much harder than I thought. I tried to also search for single instrument midi files but that was unsuccessful. So in the end, I worked with the best three I could find and the sketch for that is in the link below.

http://192.168.50.184/~man421/midiplay/

This code would generated a sequence of midi notes to play in order and printed them out for me. I’d then use that sequence to play the song. First though, I had to hear what the sequence sounded like to be sure and also to make sure the code worked for I made a separate p5 sketch first for it. Below is the link to an example of that code.

http://192.168.50.184/~man421/playsong/

With that I could here how the song sounded when played with the midi.

After that, I wanted to move this into the main file that plays the song and repeat it for three different songs. So I did that after some few difficulties to get it all working. The code below will show you the finalised version of the .js file.

I think I’m glad with the final result of my finished project. I didn’t think it’d get this far when I ran into some issues earlier so I’m happy to see that it turned out like this. Of course Id have like to have it randomised so that the user can’t guess the pattern of the songs if they choose to restart but when I tried to do that, it kept glitching. I’d definitely like to see if it’s possible to do that because that would make the game that much more difficult to win. Which is what I want.

I’d also wanted to make it mobile friendly but there was no time for that but I think I’ll easily do that with some styling in the future.

What do you think about it?

//this is the first scene, first bubble, first song

var cloud;
var cloud2;

// jingle bells
var songA = [60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,64,70,70,64,67,64,68,64,69,65,60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,72,64,72,72,64,64,70,74,64,72,70,67,65,69,65,65,69,69,65,69,65,69,65,69,72,65,67,65,69,62,70,62,70,62,70,62,70,70,60,69,60,69,60,69,59,67,67,59,69,59,67,64,72,65,69,69,65,65,69,60,69,69,60,69,60,69,72,65,67,65,69,70,62,65,70,62,70,62,62,70,60,69,60,69,64,72,70,64,69,67,65,60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,64,67,72,64,72,64,70,68,64,69,60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,72,64,72,72,64,70,74,72,70,67,65,72,65,69,69,65,65,69,60,69,65,60,65,69,65,69,60,69,65,72,65,67,69,65,64,63,62,70,70,62,70,60,69,60,69,60,69,59,67,59,67,69,67,67,64,64,72,65,69,69,65,65,69,60,69,69,60,69,60,69,72,65,67,69,65,64,63,62,70,70,62,70,60,69,69,60,69,64,72,70,69,67,65,60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,64,67,69,64,70,64,69,65,60,69,67,65,60,60,69,67,65,62,62,70,69,67,64,72,64,72,72,64,64,70,74,64,72,70,64,67,65,72,60,65,69,60,69,65,69,60,65,69,60,65,60,69,65,60,65,69,69,60,65,72,65,60,60,67,65,69,60,65,64,63,62,70,70,70,60,69,60,69,69,59,67,59,67,59,69,67,67,60,72,65,69,65,69,65,69,60,69,60,69,69,60,69,65,72,65,67,69,65,64,63,62,70,70,62,70,60,68,69,60,69,69,60,64,72,72,64,70,62,64,67,65];
// all out of love
var songB = [36,43,36,48,36,43,36,48,36,36,35,33,28,29,31,36,36,36,43,36,36,36,48,43,36,38,36,35,35,33,28,29,33,31,43,36,33,35,33,31,29,31,36,35,33,28,29,31,36,48,43,36,36,43,36,48,36,43,36,48,36,36,35,33,28,29,31,36,36,36,43,36,36,36,48,43,36,38,36,35,35,33,28,29,33,31,43,36,33,35,33,31,29,31,36,35,33,28,29,31,36,36,36,35,33,28,28,29,41,40,38,33,28,26,28,28,29,41,40,38,29,31,33,35,29,31,33,35,48,43,36,35,33,28,29,31,36,35,33,28,29,31,36,35,33,28,29,31,36,35,33,28,29,31,36,35,33,28,29,31,36,35,33,28,29,31,36];
// wannabe
var songC = [44,49,54,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,54,38,39,44,54,54,54,44,54,54,44,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,44,49,54,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,54,38,39,44,54,54,54,44,54,44,54,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,44,49,54,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,54,38,39,44,54,54,54,44,54,44,35,38,39,44,44,35,38,39,35,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,35,38,39,35,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,35,44,38,39,44,44,35,44,38,39,44,44,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,35,38,39,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,54,35,54,44,54,54,38,39,54,54,44,54,54,44,54,35,54,44,54,54,38,39,54,54,44,54,44,54,44,35,38,39,44,44,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,54,44,54,35,54,44,81,54,54,38,39,54,54,44,81,54,44,54,54,44,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,54,44,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,54,44,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,54,44,35,54,54,54,38,39,44,54,54,54,54,44,54,35,54,54,44,54,38,39,54,54,54,44,54,44,49];

var keysA;
var keysB;
var keysC;

var currentPitchA;
var currentPitchB;
var currentPitchC;

var loopSongA;
var loopSongB;
var loopSongC;

// var state0 = true;
var state1 = true;
var state0 = false;
var state2 = false;
var state3 = false;



function setup() {
  createCanvas(800,400);  
  
  cloud = createSprite(200, height);
  cloud.addAnimation("normal", "assets/cloud_breathing0001.png", "assets/cloud_breathing0009.png");
  cloud.velocity.y = -3;
  
  cloud2 = createSprite(600, height);
  cloud2.addAnimation("normal", "assets/asterisk_circle0000.png", "assets/asterisk_circle0005.png");
  cloud2.velocity.y = -3;
  text("green is Deck the Halls, pink is Jingle Bells, click on one", 300, height/2, 200);
  
  keysA = new Tone.PolySynth(3, Tone.Synth);
  keysA.toMaster();
  
  currentPitchA = 0;
  
  keysB = new Tone.PolySynth(6, Tone.MembraneSynth);
  keysB.toMaster();
  
  currentPitchB = 0;
  
  keysC = new Tone.PolySynth(4, Tone.Synth);
  keysC.toMaster();
  
  currentPitchC = 0;

  loopSongA = new Tone.Loop(function(time){
    var pitch = Tone.Frequency(songA[currentPitchA], "midi").eval();
    //print(pitch);
    keysA.triggerAttackRelease(pitch, "8n");
    currentPitchA = (currentPitchA + 1) % songA.length;
  }, "8n");
  Tone.Transport.start();
  
  loopSongB = new Tone.Loop(function(time){
    var pitch = Tone.Frequency(songB[currentPitchB], "midi").eval();
    //print(pitch);
    keysB.triggerAttackRelease(pitch, "8n");
    currentPitchB = (currentPitchB + 1) % songB.length;
  }, "8n");
  
  loopSongC = new Tone.Loop(function(time){
    var pitch = Tone.Frequency(songC[currentPitchC], "midi").eval();
    //print(pitch);
    keysC.triggerAttackRelease(pitch, "4n");
    currentPitchC = (currentPitchC + 1) % songC.length;
  }, "8n");
  
}

function draw() {
  // background(255,255,255);  
  background(255,255,255);
  mySprites();
  
  if (state0){
    fill(random(0,255), random(0,255), random(0,255));
    text("WELCOME!! This is the guess the song challenge. Songs have been altered in their MIDI form to make it had to decipher. How good are you at picking out the melody? ENJOY!", 320, 20, 200);
    textAlign(CENTER);
    text("You can always click Space Bar to restart!", width/2, height-80);
  }
  
  if (state1){
    //mySprites();
    state0 = false;
    triggerState1();
    fill(random(0,255), random(0,255), random(0,255));
    text("WELCOME!! This is the guess the song challenge. Songs have been altered in their MIDI form to make it had to decipher. How good are you at picking out the melody? ENJOY!", 320, 20, 200);
    fill(0);
    textAlign(CENTER);
    text("Green is Deck the Halls, Pink is Jingle Bells. CLICK ON THE CORRECT ONE!", 300, height/2, 200);
  }
  if (state2){
    state0 = false;
    triggerState2();
    fill(random(0,255), random(0,255), random(0,255));
    text("WELCOME!! This is the guess the song challenge. Songs have been altered in their MIDI form to make it had to decipher. How good are you at picking out the melody? ENJOY!", 320, 20, 200);
    textAlign(CENTER);
    fill(0);
    text("NEW SONG!!! Green is All Out Of Love, Pink is Mambo no.5. CLICK ON THE CORRECT ONE!", 300, height/2, 200);
  }
  if (state3){
    state0 = false;
    triggerState3();
    fill(random(0,255), random(0,255), random(0,255));
    text("WELCOME!! This is the guess the song challenge. Songs have been altered in their MIDI form to make it had to decipher. How good are you at picking out the melody? ENJOY!", 320, 20, 200);
    textAlign(CENTER);
    fill(0);
    text("NEW SONG!!! Green is Someone Like You, Pink is Wannabe. CLICK ON THE CORRECT ONE!", 300, height/2, 200);
  
  } 
}

function newGame(){
  cloud = createSprite(200, height);
  cloud.addAnimation("normal", "assets/cloud_breathing0001.png", "assets/cloud_breathing0009.png");
  cloud.velocity.y = -3;
  
  cloud2 = createSprite(600, height);
  cloud2.addAnimation("normal", "assets/asterisk_circle0000.png", "assets/asterisk_circle0005.png");
  cloud2.velocity.y = -3;
}

function mySprites(){
  if(cloud.position.y < 0)
    cloud.position.y = height;
    
  if(cloud2.position.y < 0)
    cloud2.position.y = height;
  
  //draw the sprites
  drawSprites();
}

function cloudPressed(){
  //cloud2.visible = false;
  cloud2.remove;
  cloud.velocity.y = 0;
  cloud.position.x = width/2;
  cloud.life = 400;
  }
 

function cloud2Pressed(){
  cloud.remove;
  cloud2.velocity.y = 0;
  cloud2.position.x = width/2;
  cloud2.life = 400;
}


function triggerState1() { // play songA

  loopSongA.start(0);

  mySprites();
}

function triggerState2() { // play songB

  
  loopSongB.start(0);

  mySprites();
}

function triggerState3() { // play songC

  loopSongC.start(0);

  mySprites();
}

function mouseClicked(){
  // start song 1
  if (state1 && cloud2.overlapPoint(mouseX, mouseY)){

    state1 = false;
    loopSongA.stop();
    background(0,255,0);
    setTimeout(function(){
     state2 = true; 
    },60);
    
  //start song 1 one again;
  } else if (state1 && cloud.overlapPoint(mouseX, mouseY)){

    state1 = false;
    //state0 = false;
    loopSongA.stop();
    setTimeout(function(){
    state0 = true; 
    },80);
    
  //start song 3;
  } else if (state2 && cloud.overlapPoint(mouseX, mouseY)){
    // cloud2.onMousePressed = function() {
    // cloud.scale = 3;
    // cloudPressed();
    state2 = false;
    loopSongB.stop();
    setTimeout(function(){
     state3 = true; 
    },60);
    
    
  //beginning
  } else if (state2 && cloud2.overlapPoint(mouseX, mouseY)){

    state2 = false;
    loopSongB.stop();
    setTimeout(function(){
     state0 = true; 
    },60);
    
  //do song two again
  } else if (state3 && cloud.overlapPoint(mouseX, mouseY)){
    state3 = false;
    loopSongC.stop();
    setTimeout(function(){
     state0 = true; 
    },60);
    
  //go to beginning
  } else if (state3 && cloud2.overlapPoint(mouseX, mouseY)){
    state3 = false;
    loopSongC.stop();
    fill(0);
    text("YES! YOU WIN!", 300, height/2, 200);
    setTimeout(function(){
      state0 = true;
    },100);
  }
}

function keyPressed(){
  if(key == ' '){
    //state0 = false;
    state1 = true;
  }
}

Final: Song Collage [Code of Music]

Link to code
NAS hosted version

1. Concept.

The inspiration comes from ZZ’s midterm project. He created a sketch where you can type in a box, and each letter is read out. The most important part, though, was if you typed a comma there was a clip played like: “Comma~” And it was very interesting. I suggested that he could create a slightly different version where you could type entire words. Since ZZ decided to do something else for his final, I really wanted to do this.

In concept, it’s a lot like those old newspaper letters, where you cut out words or letters from a newspaper or magazine and paste them to a paper instead of writing or typing. Except it’s with words from songs, not letters from a magazine! And fonts aren’t radically different, but with rhthym, beat, melody, and all that, sound clips are very different from each other. Even so, the fact that they’re all music unifies them.

If I had much more time to do this, I would’ve liked to also provide a free input feature instead of just the examples. So you would type some words and press “play”, then it would download all the right words and let you play it back. I would need between 5000 and 10000 english words to reasonably do that, though, and that’s a lot of time and work.

2. Project.

On the left there’s the quotes and who said it. For my presentation I have a bit of the famous Robert Frost poem, the chorus from Smells Like Teen Spirit, and the Gettysburg address’s preamble. When you click on a quote, it downloads all the required sound clips and puts them together. One problem I’ve faced is that it sometimes takes a long time for the playback to start. I think it’s a combination of Tone.js and also asynchronous things being really hard.

The word that is being played is highlighted, and you can mouse over the word to see which song it came from, and click it to hear just that word.

3. Technology.

Tone’s Part was very useful to arrange all the words perfectly. When I prototyped it in VLC, the music player, it had odd clicks between tracks because it was probably loading each sound one at a time. But in Tone.js, it’s more or less perfect, like I was doing it in an audio editing software, plus I can programmatically add little pauses between each word as well as making it pause at the end. If I was manually assembling these it would take like five minutes of repetitive work for a sentence, but in Tone it’s quick.

The song info and the quotes are all in JSON files. They’re very useful, since I can write them by hand but Javascript has built-in features for understanding them. I also have a script that looks at all the sound clip files i have and generates the info to be easily referenced as a JSON.

As for searching for words, I wrote a couple Python scripts to let me search through all the lyrics I have saved as text files on my computer. I hoped to be able to use a lyric search engine, but there’s often so many words from obscure songs that it was only helpful for finding difficult words, like “proposition.” This also lets me use words from songs I care about, and the fact that I already have the song file is a plus.

I used Audacity to not only increase or reduce volumes for the songs, but also cut out the words in question. It was very useful and easy to use, though getting used to its interface is a little difficult.

4. Process.

At first, I hoped to entirely dissect a song for its words, and hopefully automatically too. But words in songs are really a difficult case. They’re often stretched out really long, and short words are often passed over or blurred into the next word. For example, the lyrics “at least i’m not as sad as i used to be” sounds more like:””. So I had to curate words, preferring words that are emphasized over ones that are briefly touched on and passed over. Words at the end of a sentence were especially commonly used, as well as words that are drawn out.

As for the technical side, I had a really hard time making it work reliably. The Web Audio API automatically manages preloading for audio clips, in that it won’t start playing until it has all the files downloaded, but Tone Part takes a long time to initialize, for some reason, and even though I tried to reuse a single Part for playing the same quote again it doesn’t really work.

Something I definitely want to improve is how reliable it is.

5. Acknowledgements and references

For starters, Stack Overflow was a huge help, as always, for solving technical issues. I also borrowed a function to turn a sentence into title case. And Luisa helped me starting the process, especially how to not get stuck trying to make something hard work, and to prototype first to see if it was a good idea. Which it was.

I also used MDN for referencing how to use Javascript a lot, and the Tone JS documents for figuring out how Part and Buffer works. And this random guy named Ben McCormick to figure out just how Promise works. He was actually more helpful than MDN.

(http://benmccormick.org/2015/12/30/es6-patterns-converting-callbacks-to-promises/)

Second Iteration for Final [Code of Music, Pereira]

Just a few minor changes to the sketch.js file code. Here, I had finally managed to figure out how to switch between the two states for the songs playing. However, I still have some issues with the movement of the sprites as I want them to so I’ll be working on that as well as the music.

//this is the first scene, first bubble, first song

var cloud;
var cloud2;

var track1;

var won = false;
var lost = false;

var state1 =true;
var state2 =false;


function preload(){
// tracklist = new Tone.MultiPlayer({
// urls : {
// "track1" : "/media/weightless.mp3",
// "track2" : "/media/congas.m4a"

// }
// }).toMaster();

track1 = new Tone.Player({
"url" : "/media/likeyou.mp3",
"playbackRate" : 1

}).toMaster();
track2 = new Tone.Player('media/swing.mp3').toMaster();
track3 = new Tone.Player('media/congas.m4a').toMaster();

track1.loop = true;
track2.loop = true;
track3.loop = true;

}

function setup() {
createCanvas(800,400); 

// var won = false;
// var lost = false;
// var scene1 =true;
// var scene2 =false;

cloud = createSprite(200, height);
cloud.addAnimation("normal", "assets/cloud_breathing0001.png", "assets/cloud_breathing0009.png");
cloud.velocity.y = -3;

cloud2 = createSprite(600, height);
cloud2.addAnimation("normal", "assets/asterisk_circle0000.png", "assets/asterisk_circle0005.png");
cloud2.velocity.y = -3;

// track1.start();

cloud2.onMousePressed = function() {
this.scale = 3;
cloud2Pressed();
//triggerState2();
}
cloud.onMousePressed = function() {
this.scale = 3;
cloudPressed();
//triggerState2();
// redraw();

}
}

function draw() {
// background(255,255,255); 
background(255,255,255);
mySprites();

if (state1){
triggerState1();
}
if (state2){
track1.stop();
triggerState2();
}


}
function mySprites(){
if(cloud.position.y < 0)
cloud.position.y = height;

if(cloud2.position.y < 0)
cloud2.position.y = height;

//draw the sprites
drawSprites();
}

function cloudPressed(){
cloud2.remove();
cloud.velocity.y = 0;
cloud.position.x = width/2;
// background(255,0,0); 
}

function cloud2Pressed(){
cloud.remove();
cloud2.velocity.y = 0;
cloud2.position.x = width/2;
// background(0,255,0); 
}


function triggerState1() {
// background(0,255,0);
// cloud.remove();
// cloud2.velocity.y = 0;
// cloud2.position.x = width/2;
// //track1.stop();
// won = true;
// scene2 = true;

if (state1){

track1.start();
mySprites();
}

// so what next??
}

function triggerState2() {
// cloud2.remove();
// cloud.velocity.y = 0;
// cloud.position.x = width/2;
// background(255,0,0);
// track1.stop();
// lost = true;
// scene1 = true;
// suspect
track1.stop();
track2.start();
mySprites();
}

function triggerState3() {
// cloud2.remove();
// cloud.velocity.y = 0;
// cloud.position.x = width/2;
// background(255,0,0);
// track1.stop();
// lost = true;
// scene1 = true;
// suspect
track2.stop();
track3.start();
mySprites();
}

function mouseClicked(){
if (state1){
//background(0,255,0);
state1 = false;
background(255);
state2 = true;
// nextTrack = new Tone.Player('media/swing.mp3');
} else if (state2){
//background(255,0,0);
state1 = false;
state1 = true;
} else if (won === true && state2){
state1 = false;
state3 = true;
} else if (lost === true && state2){
state1 = false;
state2 = false;
state2 = true;
}
}

//every mouse press
// function mousePressed() {

// //create a sprite
// var splat = createSprite(mouseX, mouseY);
// splat.addAnimation("normal", "assets/asterisk_explode0001.png", "assets/asterisk_explode0011.png");

// //set a self destruction timer (life)
// splat.life = 40;
// }

Code of Music First Iteration [Code of Music, Pereira]

This is the first code. I decided that it’d be much easier to use scenes to switch in and out of the different states I want to so I’ve started to incorporate that but it’s not yet working perfectly.

//Setting a sprite lifespan and visibility
//click on the canvas to create self destructing sprite and toggle visibility

var cloud;
var cloud2;
var track1;
var won = false;
var lost = false;
var scene1 =false;
var scene2 =false;


function preload(){
  // tracklist = new Tone.MultiPlayer({
  //     urls : {
  //       "track1" : "/media/weightless.mp3",
  //       "track2" : "/media/congas.m4a"
            
  //     }
  //   }).toMaster();
    
  track1 = new Tone.Player({
    "url" : "/media/likeyou.mp3",
    "playbackRate" : 1
    
  }).toMaster();
  
  track1.loop = true;
  
}



function setup() {
  createCanvas(800,400);  
  
  // var won = false;
  // var lost = false;
  // var scene1 =true;
  // var scene2 =false;
  
  cloud = createSprite(200, height);
  cloud.addAnimation("normal", "assets/cloud_breathing0001.png", "assets/cloud_breathing0009.png");
  cloud.velocity.y = -3;
  
  cloud2 = createSprite(600, height);
  cloud2.addAnimation("normal", "assets/asterisk_circle0000.png", "assets/asterisk_circle0005.png");
  cloud2.velocity.y = -3;
  
  track1.start();
  
  cloud2.onMousePressed = function() {
  this.scale = 3;
  triggerState1();
  }
  cloud.onMousePressed = function() {
    this.scale = 3;
    triggerState2();
    // redraw();
    
  }
}

function draw() {
  // background(255,255,255);  
  background(255,255,255)
  
  //sprites' visibility can be turned on an off
  //and invisible sprite is still updating normally
  // if(mouseIsPressed)
  //   cloud.visible = false;
  // else
  //   cloud.visible = true;
  
  // how do I change the background colour?
  
  // if (mouseClicked() && (won = true)){
  //   background(0,255,0);
  // } else if (mouseClicked() && (lost = true)) {
  //   background(255,0,0);
  // } else {
  //   background(255,255,255);
  // }
  
  
  if(cloud.position.y < 0)
    cloud.position.y = height;
    
  if(cloud2.position.y < 0)
    cloud2.position.y = height;
  
  //draw the sprites
  drawSprites();
}

function triggerState1() {
  background(0,255,0);
  cloud.remove();
  cloud2.velocity.y = 0;
  cloud2.position.x = width/2;
  track1.stop();
  won = true;
  scene2 = true;
  
  // so what next??
}

function triggerState2() {
  cloud2.remove();
  cloud.velocity.y = 0;
  cloud.position.x = width/2;
  background(255,0,0);
  track1.stop();
  lost = true;
  scene1 = true;
  // suspect
}

function mouseClicked(){
  if (won == true){
    background(0,255,0);
  } else if (lost == true){
    background(255,0,0);
  } else{
    background(255,255,255);
  }
}

//every mouse press
// function mousePressed() {
  
//   //create a sprite
//   var splat = createSprite(mouseX, mouseY);
//   splat.addAnimation("normal", "assets/asterisk_explode0001.png", "assets/asterisk_explode0011.png");
  
//   //set a self destruction timer (life)
//   splat.life = 40;
// }

Code of project in progress. [Code of Music, Luisa Pereira]

My code is below. I’ve marked with the comments where the code doesn’t work. For now I am stuck with it.

 

var scene1 = true;
var scene2 = false;
var scene3 = false;
var scene4 = false;
var scene5 = false;
var scene6 = false;
var checko = false;
var checkl = false;
var c, o, l, v, k, n, b, r;
var last, canary, cajo, elephant, ocean, leaves, rate, chorus;
var pingPong;
var beauty, albi;
var albi1 = false;
var beauty1 = false;
var checks = false;
var checkd = false;
var checke = false;
var checken = false;
var ball = {};
function preload() {

  beauty = new Tone.Player('sounds/beauty1.wav').toMaster();
  albi = new Tone.Player('sounds/albi.wav').toMaster();
  elephant = new Tone.Player('sounds/elephant.wav').toMaster();
  ocean = new Tone.Player('sounds/ocean.mp3').toMaster();
  leaves = new Tone.Player('sounds/leaves1.wav').toMaster();
  engine = new Tone.Player('sounds/engine.wav').toMaster();
  rock = new Tone.Player('sounds/stone.mp3').toMaster();
  wood = new Tone.Player('sounds/door.mp3').toMaster();
  canary = new Tone.Player('sounds/canary.wav').toMaster();
  cajo = new Tone.Player('sounds/cajo.wav').toMaster();
  v = new Tone.Player('sounds/leaves1.wav');
  k = new Tone.Player("sounds/ocean.mp3");
  l = new Tone.Player('sounds/door.mp3');
  n = new Tone.Player("sounds/stone.mp3");
  b = new Tone.Player('sounds/elephant.wav');
  r = new Tone.Player('sounds/engine.wav');
  

}


function setup() {

  createCanvas(800, 750);
  
}

function draw() {
  if (scene1) {
    one();

  }
  if (scene2) {

    two();
  }
  if (scene3) {

    three();
  }
  if (scene4) {

    four();
  }
  if (scene5) {
    five();
  }
  if(scene6){
    six();
  }


}




function one() {
  if (scene1) {
    x = mouseX;
    y = mouseY;
    background(0);
    fill(255);
    rect(350, 250, 100, 30);
    rect(350, 500, 100, 30);
    if (y > 249 && y < 281 && x > 349 && x < 451 && scene1) {
      canary.start();
      cajo.stop();
      fill(random(0, 200), x * 0.4, random(0, 245));
      rect(350, 250, 100, 30);
    } else if (y > 499 && y < 531 && x > 349 && x < 451 && scene1) {
      cajo.start();
      canary.stop();
      fill(x * 0.2, random(0, 245), random(0, 245));
      rect(350, 500, 100, 30);
    }
    fill(255);
    textSize(17);
    text("Prees UP to choose sound#1, press DOWN for sound#2", 50, 50, 650, 50);
    
  }
}

function two() {
  background(0);
  fill(255);
  rect(50, 50, 700, 300);
  rect(50, 400, 700, 300);
  canary.stop();
  cajo.stop();
  fill(255);
  textSize(17);
  text("Choose your environment. Prees UP to choose sound#3, press DOWN for sound#4", 50, 300, 650, 300);
  var r = mouseX;
  var t = mouseY;
  if (t > 49 && t < 349 && r > 49 && r < 699) {
    fill(r, t, random(0, 245));
    rect(50, 50, 700, 300);
    var loop = new Tone.Loop(function(time) {
      leaves.start(time);

    }, "8n").start(0);
    Tone.Transport.start();
    ocean.stop();
    println("leaves");
  } else if (t < 701 && t > 399 && r > 49 && r < 699) {
    fill(random(0, 255), r, t);
    rect(50, 400, 700, 300);
    leaves.stop();
    loop = new Tone.Loop(function(time) {
      ocean.start(time);
    }, "8n").start(0);
    Tone.Transport.start();
    println("ocean");
  }
}

function three() {
  var x = mouseX;
  var y = mouseY;

  background(0);
  fill(255);
  ellipse(200, 370, 80, 80);
  ellipse(600, 370, 80, 80);

  canary.stop();
  cajo.stop();
  //v.stop();
  ocean.stop();
  leaves.stop();
  fill(255);
  textSize(17);
  text("Prees UP to choose sound#5, press DOWN for sound#6", 50, 50, 650, 50);

  if (y > 329 && y < 401 && x > 159 && x < 241) {
    fill(56, 60, random(0, 245));
    ellipse(200, 370, 80, 80);
    var loop = new Tone.Loop(function(time) {
      elephant.start(time);
    }, "8n").start(0);
    Tone.Transport.start();
    engine.stop();
  } else if (y > 329 && y, 401 && x > 559 && x < 741) {
    fill(56, 60, random(0, 245));
    ellipse(600, 370, 80, 80);
    var loop = new Tone.Loop(function(time) {
      engine.start(time);
    }, "8n").start(0);
    Tone.Transport.start();
    elephant.stop();
  } else {
    elephant.stop();
    engine.stop();
  }
}

function four() {
  new Tone.Gain(1);
  var x = mouseX;
  var y = mouseY;
  elephant.stop();
  engine.stop();
  canary.stop();
  cajo.stop();
  ocean.stop();
  leaves.stop();
  background(0);
  fill(255);
  rect(200, 300, 370, 30);
  rect(200, 400, 370, 30);
  fill(255);
  textSize(17);
  text("Prees UP to choose sound#7, press DOWN for sound#7", 50, 50, 650, 50);
  if (y > 299 && y < 331 && x > 199 && x < 571) {
    fill(x, y, random(0, 245));
    rect(200, 300, 370, 30);
    var loop = new Tone.Loop(function(time) {

      rock.start(time);

    }, "8n").start(0);
    Tone.Transport.start();
    wood.stop();

  } else if (y > 399 && y < 431 && x > 199 && x < 571) {
    fill(random(0, 255), x, y);
    rect(200, 400, 370, 30);
    rock.stop();
    loop = new Tone.Loop(function(time) {
      wood.start(time);
    }, "8n").start(0);
    Tone.Transport.start();

  } else {
    rock.stop();
    wood.stop();
  }

}
function five(){
  var x= mouseX;
  var y = mouseY;
  background(0);
  elephant.stop();
  engine.stop();
  canary.stop();
  cajo.stop();
  ocean.stop();
  leaves.stop();
  rock.stop();
  wood.stop();
  background(0);
  fill(255);
  ellipse(200, 370, 80, 80);
  ellipse(600, 370, 80, 80);
  
  if (y > 329 && y < 401 && x > 159 && x < 241) {
    fill(x, y, random(0, 245));
    ellipse(200, 370, 80, 80);
    beauty.start();
    albi.stop();

  } else if (y > 329 && y, 401 && x > 559 && x < 741) {
    fill(random(0, 255), x, y);
    ellipse(600, 370, 80, 80);
    beauty.stop();
    albi.start();
  
  } else {
    albi.stop();
    beauty.stop();
  }
  
}

function six() {
  
  var x = mouseX;
  var y = mouseY;
  var t;
  
  rock.stop();
  wood.stop();
  elephant.stop();
  engine.stop();
  canary.stop();
  cajo.stop();
  
  ocean.stop();
  leaves.stop();
  // albi.stop();
  // beauty.stop();
  background(0);
  fill(255);
  rect(0, 50, width, 270);
  rect(0, 350, width, 50);
  rect(0, 450, width, 60);
  rect(0, 560, width, 50);
  textSize(16);
  text("Your sounds are compiled together. Change properties using mouse move and mouse click", 20, 20, 680, 20);
  //broken
//   chorus = new Tone.Chorus(mouseX, 2.5, 2.5);
//   chorus.toMaster();
//   if(checke) {
//     b.connect(chorus);
//     chorus.toMaster();
//   } else if (checken){
//     r.connect(chorus);
//     chorus.toMaster();
//   }
    
//   if (y > 559 && y < 611 ) {
//     if(checke){
//       chorus.toMaster();
//     b.start();
//     b.autostart = true;
//     b.loop = true;
//     fill(200, mouseX, 100);
//     ball.x = constrain(mouseX, 0, width);
//     ellipse(ball.x, 585, 50, 50)
//   } else if (checken){
//     chorus.toMaster();
//     r.start();
//     r.autostart = true;
//     r.loop = true;
//     fill(200, mouseX, 100);
//     ball.x = constrain(mouseX, 0, width);
//     ellipse(ball.x, 585, 50, 50)
//   }}

//broken
// if(beauty1){
//   beauty.start();
//   beauty.loop = true;
//   albi.stop();
// } else if(albi1){
//   albi.start();
//   albi.loop = true;
//   beauty.stop();
// }
  
  // if (checko){
  // if (y > 49 && y < 321) {
  //   fill(mouseX, random(0, 100), random(0, 255));
  //   rect(0, 50, width, 270);
  //   var tremolo = new Tone.Tremolo(9, 0.75).toMaster().start();
  //   t = map(mouseX, 0, width, 3, 6);
  //   v.connect(tremolo);
  //   v.start();
  //   v.loop = true;
  //   v.autoStart = true;
  // }
  
  // } else if(checkl){
  //   if (y > 49 && y < 321) {
  //   fill(mouseX, random(0, 100), random(0, 255));
  //   rect(0, 50, width, 270);
  //   var tremolo = new Tone.Tremolo(9, 0.75).toMaster().start();
  //   t = map(mouseX, 0, width, 3, 4);
  //   k.connect(tremolo);
  //   k.loop = true;
  //   k.autoStart = true;
  //   k.start();
    
  //   }
  // }

  if(y>349 && y<401){

  fill(mouseX, random(0,100), random(0,255));
  rect(0, 350, width, 50);
  rate.loop = true;
  rate.autoStart = true;
  rate.toMaster();
  rate.playbackRate= map(mouseX, 0, width, 0.2, 5);
  rate.detune = map(mouseY, 350, 400, 500, 30);
  rate.start();
  } 
  
  
  //broken
   // if(checks){
  // if(y>449 && y<511){
  //   fill(mouseX, random(0,100), random(0,255));
  //   rect(0, 450, width, 60);
  //   pingPong = new Tone.PingPongDelay("32n", 1).toMaster();
  //   l.loop = true;
  //   l.autoStart = true;
  //   l.connect(pingPong);
  //   l.start();
  // } }  else if (checkd) {
  // if(y>449 && y<511){
  //   fill(mouseX, random(0,100), random(0,255));
  //   rect(0, 450, width, 60);
  //   pingPong = new Tone.PingPongDelay("32n", 1).toMaster();
  //   l.loop = true;
  //   l.autoStart = true;
  //   l.connect(pingPong);
  //   l.start();
  // }}
}




//change between scenes
function keyReleased() {
  if (keyCode === UP_ARROW && scene1) {
    scene1 = false;
    background(255);
    scene2 = true;
    println('text');
    rate = new Tone.GrainPlayer('sounds/canary.wav')
  } else if (keyCode === DOWN_ARROW && scene1) {
    scene1 = false;
    scene2 = true;
    //c = cajo;
    rate = new Tone.GrainPlayer('sounds/cajo.wav')
  } else if (keyCode === UP_ARROW && scene2) {
    scene1 = false;
    scene2 = false;
    scene3 = true;
    checkl = true;

    

  } else if (keyCode === DOWN_ARROW && scene2) {
    scene1 = false;
    scene2 = false;
    scene3 = true;
    checko = true;
  
  } else if (keyCode === UP_ARROW && scene3) {

    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = true;
    checken= true;
  } else if (keyCode === DOWN_ARROW && scene3) {
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = true;
    checke = true;
  } else if (keyCode === UP_ARROW && scene4) {
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = true;
    checks = true;
  } else if (keyCode === DOWN_ARROW && scene4) {
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = true;
    checkd = true;
  } else if(keyCode === DOWN_ARROW && scene5){
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = false;
    scene6 = true;
    
  } else if(keyCode === UP_ARROW && scene5){
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = false;
    scene6 = true;
  
  } else if(keyCode === RIGHT_ARROW && scene5){
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = false;
    scene6 = true;
    albi1 = true;
  } else if(keyCode === LEFT_ARROW && scene5){
    scene1 = false;
    scene2 = false
    scene3 = false;
    scene4 = false;
    scene5 = false;
    scene6 = true;
    beauty1 = true;
  }
}