We are the music makers

11/15

Today's agenda:

  • Build a drum kit
  • Discuss cloning
  • Build a music box
  • Build a robot band
  • Clone your robot band


BY REQUEST (see what you get for asking) more piano

and some extras:

guitars


https://www.poetryfoundation.org/poems/54933/ode-

Warm Up!

Let's build some drums

Check out the drum kit at the following url:

https://codepen.io/kathykato/details/KqPxZX


What I want you to make for warmup is a button that makes a noise (specifically a drum noise) when it is clicked or when a given key press of your choosing. (like pressing the a button on the keyboard)

Additionally, there should be some visual indicator that the button was clicked.

The examples in the link has the button growing, but having them move slightly down (like a button does) or change colors or any other visual indicator works just fine.

Think of blocks inside the "Looks" category, you could change costume or use one of the effects like "set negative to 100". The block should change it's look when pressed and then return to it's original look.

Requirements:

  • Build a button sprite
  • The sprite must make a sound from this collection of sounds drumkit.zip
  • The sprite must make this sound when clicked with the mouse
  • The sprite must make this sound when a unique key is pressed
  • Provide a visual indicator that the button was "activated" and then return the button back to it's "resting" costume
  • ONLY use the editor resources to make your images. Do not look for animations or other things to take, try using the costume editor or grow blocks or shrink blocks or whatever you think works best but use something available within Snap!

HINT!!!! Break this problem into smaller ones if you are having trouble. Don't worry about the visual indicator until you have the noise or the other way around, but solving bigger problems by building up solutions to smaller problems is often the best approach.

Bonus!

Build a button for each of the noises to complete your drum kit. Or export your sprite and share different buttons with each other to complete your full set and allow yourself to play virtual drums. This is not terribly different from the tools used by industry professionals and you made it as a warm up. Congrats.! You, pro programmer, you!

Group Review

When everyone has finished we will review our cloning labs from yesterday and discuss cloning in general. Namely local and global variables and how they differ.

Lets build a Music Box


If you look at old time music boxes like the one pictured to the left of the title or modern day tools used for creating music like the one pictured to the right of the title there exists commonalities.

Can you abstract this problem into the shared relevant bits of information?

What does each tool use?

There is some representation of the sound to be made (the little metal rods in the music box, the instrument label on the beat machine, and the notes on the sheet music)

There is an element of timing by how the notes are spaced.

And there is some indicator of where we currently are. This is less obvious in first example but it's there. It's just like traversing a list.

For this assignment we will be building a music reader similar to the ones sandwiching this sections titles. The focus will be on looping a musical segment.


Let's break the problem down into smaller parts.

First,

let's create a line that goes from the left of your screen all the way to the right and then resets. Remember the ranges of the stage area are x:-240 to 240 and y:-180 to 180.

This represents us moving through the music. imagine an arm on a record player (or google for a gif of a record player if that idea is foreign to you).

Requirements

  • Make an "arm" sprite
  • the sprite starts at the leftmost part of the screen
  • the sprite advances at a reasonable pace (consider using a variable to control speed so it can be changed easily in the future)
  • the sprite resets it's position to the leftmost part of the screen when it hits the rightmost section of the screen

When you are finished with this step your screen should look like the following. This is your arm sprite. We will use this to trigger sounds.


The next part of this problem is we need sounds to play, or notes to play, or however you want to think of it but at the end of the day we are in Snap! so you know it's going to be a Sprite.


So let's build a Sprite that makes a sound whenever it is touching this arm.


Second

part of your assignment is make a "sound sprite"

This sprite should make a sound when the arm touches it. The sound it plays is up to you.

Here's some piano sounds piano.zip

Requirements

  • Make a sound sprite
  • this sprite plays a sound when it touches our previously created "arm" sprite


Drag this sprite wherever you'd like on the stage. This isn't quite music yet is it? Normally our favorite songs are not just a single note.

Duplicate this sprite and scatter the duplicates across the stage. Still not quite there because we are only making one note or sound.

Musical Interlude


Take a break from coding and look at the sounds we use to make "Mary had a little lamb" pictured to the left.

The letter's above the syllables represent a key on a keyboard (talk about abstraction).

Check this site out: http://html5piano.ilinov.eu/

See if you can manually play the notes to "Mary had a little lamb".

Press the "Toggle piano key names On/Off" button to see the letters for each key.

Third

Now let's make the code do it for us.

Using these piano sounds piano.zip

See if you can get your music box to play the song for you one note at a time. Or use these notes to recreate some other simple song that uses these basic piano sounds.

Another option is to go back into your drum sounds and create a drum beat that repeats itself. Think of the "We will rock you" drum beat of two stomps and a clap. Maybe try using the drum sounds to recreate that classic "Kick, Kick, Clap, Kick, Kick, Clap"

Requirements

  • Fill your stage with enough sound sprites from your previous step that a song is recreated as the arm passes over these sprites.
  • The sprites will need to be spaced out to make the sound work for the speed of your "arm"
  • Each sprite should play a single sound.
  • The sprites will need to make different sounds from one another to play the different notes of a song.

Pretty cool stuff we've made so far!!!

Think of how you can combine your sound boxes from the warm up and the repeating lines to have an automated musician to play alongside you. This looping is used in music making and once again isn't terribly off from things used by professionals. You can play your music with your keys with an automated drum beat backing you.

You could build buttons for each of the piano notes and make a full Snap! piano.

Additionally you can store scripts that play a sequence of sounds with appropriate waits (maybe sounds from a list?). You could add on this and make boxes you turn on or off to play a particular loop. You could then combine several boxes to make a song comprised of multiple looping bits.

Look at this example for inspiration https://learningmusic.ableton.com/

Another thing you could do is find these 4 chord sounds and import them to Snap!. This would let you easily recreate the 229 songs listed on the provided site.

Attac .... errr ... Music of the clones!!!

If you had to make a sprite for EVERY sound that would be tedious and could even present a problem with memory usage.

Think about what we learned about cloning and how that could be used in this lab.

What is the difference between each sound sprite?

Really it is just the sound and where it is positioned (something we don't track because we have existing x position and y position reporters).

We are going to make a single sound sprite so that we can clone it instead of duplicating every time. Duplicating this sprite too many times would quickly exceed the 10mb limit Snap! has for saving because each Sprite will have a copy of each sound.

Requirements

  • Create a sound sprite like the one before, it should make a noise when it touches an arm sprite. The sound it makes will be based on the value provided upon it's creation (handled further down this list)
  • Create an arm sprite that satisfies all the old requirements for the arm sprite
  • This sound sprite should contain every sound you would like to have access to
  • Create a script in the stage that creates a clone of the sound sprite whenever the stage is clicked
  • Using the "When clone is created" hat block inside of the sound sprite it should do the following:
    • it should move to wherever the mouse is, this means that after clicking the stage your new clone should be where the click occurred
    • it should prompt the user for what sound it should make and store that value in a variable that is exclusive to that clone and not shared across clones
    • when this sprite touches the arm sprite it should make the sound that was provided on it's creation (do NOT hard code this value)

Recording Our Drum Buttons

Another useful thing we can do with our warm up buttons is use them to make a song that is then repeated. Like hitting a record button and then looping what you played.

Taking parts from all of our old code we can build this out.

Requirements

  • Create a project that has one of your music buttons from the warm up
  • Introduce your arm sprite into this project
  • Introduce the sound sprite from the previous exercise (one sprite with all sounds that has logic for being cloned)
  • Add logic to the button that makes it so whenever it is pressed it creates a clone of the sound sprite at the arm's current x position (choose whatever y position you think makes for a nicer display)
  • When the sound sprite clone is created it should have its sound set to whatever sound is produced by the button you pressed
  • These sprites should still play noise when the arm touches them AND the button should still make noise when it is pressed


This is great that our code can now record and playback the music we make.


Just like earlier though, a single note or sound does not make a song.

Introduce more buttons, maybe even a representation of piano keys to go alongside your drum buttonS (emphasis on plural)


The challenge with this addition will be how do you get your cloned sprite to use the sound of the pressed button. It will need to be different based on what button created it.


MORE BUTTONS!!!

Requirements

  • Add at least two more sound buttons to your previous code.
  • These buttons should have two different sounds, ultimately you have at least 3 unique sounds that are accessed by playing your sound buttons.
  • When a button is pressed you will need to still clone the sprite like before only make sure that the sprite uses the sound of whatever button made it (no hard coding!), this should be true for EVERY playback of these sprites.

For instance if you had 3 blocks that made the sounds A B and C from a piano and you pressed A A B A C when the arm plays over them it should play the notes A A B A C just like you performed.

  • Do this without creating different sound sprites, you should have only ONE master sound sprite that is cloned and changed based on the button pressed to create it.