Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

3. Color Me Musical

Transcript

In this screencast, you'll add conditional, or if-then blocks so your program, so your project plays a different sound depending on what color the user touches with the mouse.

For example, as a user moves the mouse, the yellow X sprite follows it.

When the mouse stops on a green circle, an E note plays.

(E tone)

When the X is touch both a green and brown circle, an E note and an A note play one after the other.

(E and A tones alternating)

Conditionals, or if-then blocks, like this are one of the core computer science concepts that you'll see in all types of computer programs.

They are what make a computer look like it is making decisions.

First, you need to tell the yellow X sprite to follow the mouse on the screen.

You want the X sprite to follow the mouse.

So make sure you click on the X sprite before you start adding code blocks.

The X should start following the mouse when the flag is clicked so add a when flag clicked block from the events menu.

Under the motion menu, drag out the go to mouse-pointer block and add it under the when flag clicked block.

Right now the yellow X sprite is in the lower left of the stage.

Click the flag with the code you have now to see what happens.

Great, but the X only moves once.

Continuing to move the mouse doesn't change the yellow X.

You want the yellow X to keep going to the mouse-pointer over and over again forever once the green flag is clicked.

To make that happen, click on the control menu, drag out a forever block, and place it around the go to mouse-pointer block.

Now, when the green flag is clicked, the yellow X follows the mouse around forever and ever.

This isn't much of a music project without any sounds and you want the notes played to be based on which color the mouse is touching.

Use a conditional block, which is a block that says if something is happening, then do something else.

In this case, you'll want it to say if the sprite is touching green, then play a certain musical note.

Click on the control menu and drag out if blank, then blank block.

Place it inside the forever loop, because you want the condition to be checked the entire time the program is running.

Right now, the if-then block says if blank happens, then do blank so running the block won't do anything at all.

To fix that, go to the sensing menu, choose the touching color block, and drag it into the if statement.

Snap it in so it says if touching color, then do blank.

Change the color in the if block to one of the colors used on your stage by clicking on the small color block, then click on a color on the stage, like green, to update the touching color block to green.

Next, go to the sound menu.

Add a note play block to the if block.

You can read the sentence now as if the sprite is touching green, then play the note for .5 second beats.

See if that works by trying your code now.

(musical note)

It's always important to test your project whenever you add new blocks so you can make sure the blocks are doing what you want them to do.

It is easier to find a problem if you test often, when the changes are small, rather than waiting until you add lots of blocks trying them all out at once.

Whenever the sprite is touching green, a note is playing so it is working just as expected.

Of course, there are other colors in this project besides green.

So you need to build an if statement like this for every color.

To make this easy, right click on the if-then block, choose duplicate, and put that block set right after the first one.

That way, you only need to change the color and the note so this saves a lot of time.

Be sure to edit the colors for each touching color block.

You can use any notes or beat values like this in the play note block.

You don't need to copy the values you see here.

There is no one right answer.

Whatever results in a creation you like will be the right answer for you.

(musical notes)

Now it's your turn.

Make sure you have the yellow X sprite selected before you start coding.

Add a when flag clicked block with a forever loop and use the go to mouse pointer block to make your sprite follow the mouse.

Then use a if-then block, a touching color block, and a play sound block to build code that says if the sprite is touching a certain color, play a certain sound.

Then use the duplicate menu to repeat that if-then block set for each color in your project.

There are a lot of steps in this screencast, but you'll be fine.

Just take it one step at a time and remember to test your code blocks often and just keep trying new values until you have something you like.

arrow_backward Back
Next arrow_forward
Instructions
  1. Make the X sprite go to the mouse.
  2. Make the X sprite follow the mouse FOREVER.
  3. Learn about the "if" block.
  4. Make the "if" block say "if touching color."
  5. Make the X sprite play a note if it is touching green.
  6. Copy the if statement, then change it to make each color in your project play a different note.
  7. Add a "when green flag is clicked" event to start the program.