Transcript Slide 1

Version 3
YOUSRC Lesson Plans, Topics 1-6
1
2
3
4
5
6
Hello world (app structure, library functions, timing)
Load and display an image (global variables, parameters, return values)
Moving an image (for loops, while loops)
Bouncing an image (if statements, functions, error checking)
Using mouse input (user input, local variables)
Adding sound effects (multimedia richness, smoother animation timing)
These first six lessons aim to teach the essentials of programming including
program flow, basic use of variables, for and while loops, if statements, and how
to interact with an app using the mouse.
Note, the approach taken is deliberately visual with images, not just textual like
some other programming environments. This is meant to stimulate high interest
and satisfaction in students.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Learning objectives:
• Understand how sounds are stored in computers
• How to load a sound
• How to play a sound
• Understand the timing difference between sleeping and waiting
Vocabulary:
• Samples, sample bits, sample rate, channels
Resources:
• Best to work from the
• Some sound files – either available for students to upload, uploaded by you the teacher and published on YOUSRC, or the YOUSRC example sounds
Organisation of activity:
• Students should create a simple demo app which loads and plays a sound
• If you like, students can then upload their own sounds or sounds found for free on the web, and use these in their test app
• If you like, using a free utility like GoldWave, students can change the sample rate and number of channels, or trim a sound and experiment
• Going back to our image bouncing app from Lesson 5, students should add sound effects when the image bounces and at the end of the game
• Students should look at the TIMER.WAIT function reference and example, and understand how it works and why it works
• They should copy the TIMER.WAIT example to their workspace and experiment with it to confirm their understanding of sleeping and waiting
Plenary:
• Fun to ask students at the start and end of this session “what is sound?” “why is sound quieter further from the source?”
• Children should have the chance to show their apps to others. Does anyone have an Android device and can they use that to show app there?
• A discussion around different types of sound, why we might want a higher sample rate, why we might prefer stereo to audio, etc
• Timing discussion around computers, how they do lots of things at once, how software can run slowly, why it’s important to have smooth frame rate
Assessment:
• Do the children understand sound sample rates and difference between mono and stereo?
• Have they managed to get sounds loaded and played in their game at suitable places
• Do they understand the importance of accurate timing in games and the difference between a sleep and a wait?
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Vocabulary explained:
•
•
•
•
Channels – Generally sounds on computers are one channel (mono) or two channels (stereo).For stereo
sounds you need two loud-speakers so that one channel of sound can come out of each. Stereo sounds
take twice as much room as mono sounds as you need to store samples for two channels not one.
Samples – A computer turns an analogue (any value) sound signal detected through a microphone into a
digital (one of a specific number of values) number representing the amplitude (volume) of the sound at
the time of the sample. By taking samples again and again at a sample rate the computer builds up a set
of numbers describing how the amplitude changes over time.
Sample bits – When the computer samples the amplitude it has a number of bits it can use to describe
the amplitude. If it uses 8 bits (a byte) then the amplitude can be one of 28 (256) values. If it uses 16 bits
(2 bytes) then the amplitude can be one of 216 (65536) values. By having more bits the sound can be
more accurately represented in digital form, but it takes up more space in memory/disk/CD/USB stick.
Sample rate – This is the rate at which the samples are taken. For good quality sound this should be
twice the highest frequency to be sampled. Common sample rates are 11,000 times a second (11,000 Hz
which is also shown as 11KHz) for general sound effects up to 44KHz for high quality music. The higher
the sample rate the more data will be created and hence more space is needed.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Slides for use in the lesson…
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
In our last session we learnt how to…
1.
Stop and wait for a mouse click before we start our image bouncing
2.
Add a check for a mouse click to stop the bounce and end the app
3.
Change our code that checks for a mouse click to check if the mouse pointer
was clicked inside the bouncing image, only ending for a click inside.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
In this session we are going to…
1.
Learn about how computers store sound
2.
Load and play sound effects as a simple test
3.
Add sound effects to our image bouncing app
4.
Learn about how to make the animations in our apps smoother
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
What is sound?
Sounds are waves of energy travelling through the air. A loudspeaker creates a wave
by pushing the air and this wave spreads out getting fainter and fainter as the energy
is spread over a wider and wider area.
If the wave pushes the eardrum in your ear then you hear the sound, and the more
energy the wave has the more it pushes and the louder it sounds.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
How does a computer detect and store sound?
A computer detects sound using a microphone, which may be a tiny thing in the front
of your laptop, wired like in the picture below, or a wire connection from audio output
on a MP3 player, etc.
Microphones work a bit like the human ear – they have a detector that is pushed by
the sound wave, and it creates an electrical signal.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
How does a computer detect sound?
When we work with computer sounds we can change the number of times per
second the computer records the signal (“sample rate”), and the amount of data the
computer stores with each sample.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
How does a computer store sound?
Instead of just storing the sample values, we can use the fact that one sample value
is close to the next one to store less data. It uses less space to store numbers like 1
or 2 than numbers like 10, 12 or 15 (“compression”)…
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Time
Value
Difference
1
9
-
2
11
2
3
12
1
4
13
1
5
14
1
6
15
1
7
15
0
8
15
0
6 – Adding sound effects
How does a computer store sound?
Generally sounds are stored in a compressed form, where quality depends on how
good the compression is (mp3 for example is very good), the sample rate (typically
22,050 samples per second for sound effects or 44,100 samples per second for
music).
If we want two sets of sound at the same time (one for each ear, known as stereo)
then we need two “channels” which doubles the amount of data compared to one
channel (mono).
An alternative way to store music is a “midi” format where the data in the file
describes what notes should be played on what instruments and when. The midi
players in a PC are quite simple, but you can have quite long songs described by
quite short sound files compared to if you had sampled them.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
YOUSRC and music
YOUSRC supports uploading sound effect files to your workspace in the same way as
you can upload images. You can load and play sounds in your YOUSRC apps using a
few very simple functions, in a similar way to how you download and use images.
YOUSRC runs in your computers web browser or on your Android phone using the
power provided by the Java environment. YOUSRC apps also run in standalone
players on PC’s and the Raspberry Pi. It is up to the Java or YOUSRC player
environment on your device to decode the sounds and play them.
For sound effects and short sound clips of music we would recommend stereo,
22050 sample rate, PCM signed 16-bit WAV files as these work on most devices.
YOUSRC apps running in a web browser can also play MIDI music, but most other
devices don’t (yet) support this – for example Android phones are all a bit different.
Note: All YOUSRC uploads must be smaller than 200K in size. If you have
something bigger then use a free tool like GoldWave to reduce sample rate channels.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
There are some sound effects that you can freely use (check the Sounds area of your
Workspace). Let’s load a sound and play it using two sound library functions…
// Load and play a sound effect once
FUNCTION START()
{
LOCAL SoundEffect
GFX.WRITELINE("Loading sound...")
SND.SOUNDLOAD("yousrc:Peacock")
LET SoundEffect = RETVAL
GFX.WRITELINE("Playing sound...")
SND.PLAYONCE(SoundEffect)
}
A variable to store our sound
effect number after it loads
Show what we are doing
Load the peacock sound
Store the sound number for us
to use whenever we want to
play the sound
Play the sound once
This was found for free on the web by using Google to search for “free sound effect”
files. This one is a “wave file” (.wav) 16-bit PCM, sampled at 11,025 Hz (samples per
second), mono (one channel). It is 60K in size – quite large for a short sound effect.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Try this now
6 – Adding sound effects
If you want music then midi files are small even for long songs. The free midi sound
files available on the internet tend to sound very “cheesy” though…
// Load and play a cheesy song
FUNCTION START()
{
LOCAL CheesySong
GFX.WRITELINE("Loading sound... ")
SND.SOUNDLOAD("yousrc:Pussy Cat Dolls")
LET CheesySong = RETVAL
GFX.WRITELINE("Press key to stop")
SND.PLAYONCE(CheesySong)
KEY.WAIT()
SND.STOPPLAY(CheesySong)
This was found for free
on the web by using
Google to search for
“free midi songs” files.
It is 50K in size –
smaller than our
peacock sound effect
yet very long.
Play the cheesy song
Wait for keypressa
Stop playing the sound
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Try this now
6 – Adding sound effects
For a sound nightmare, loop the song, and have random peacock noises over the top!
// Drive yourself nuts: cheesy peacocks
FUNCTION START()
{
LOCAL CheesySong,Peacock,Finished,Delay
SND.SOUNDLOAD("yousrc:Pussy Cat Dolls")
LET CheesySong = RETVAL
SND.SOUNDLOAD("yousrc:Peacock")
LET Peacock = RETVAL
SND.PLAYLOOP(CheesySong)
LET Finished = FALSE
WHILE Finished = FALSE
{
UTIL.RANDOM(10)
LET Delay = RETVAL * 100
LET Delay = Delay + 100
TIMER.SLEEP(Delay)
SND.PLAYONCE(Peacock)
}
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Load the cheesy song
Load the peacock sound
Start the song and loop it
forever!
Get a random number up to 10
Convert number to seconds
Add a second to avoid no delay
Wait for the variable delay
Play the peacock sound
Try this now
6 – Adding sound effects
Adding sound effects to our game
To add sound effects to our game we need to load a sound effect (or more if you
prefer) when the game starts before we start the image bouncing.
We can then change our CheckForBounce() function so it sets RETVAL to TRUE if
the image bounces or FALSE if it doesn’t bounce.
We can finally change our PlayGame() function to check RETVAL after calling
CheckForBounce() and if RETVAL is TRUE then play a sound effect.
If you like you can add a looping soundtrack – either a sampled sound (remember
the 200K upload limit per item) or a midi sound file. To do this load the sound at the
start of the game, and before the game starts play the sound effect in a loop as we
just did for the “sound nightmare” on the preceding page.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Here are our changes to the start of the app so it loads our sound effect…
// Load and move image till mouse clicked
GLOBAL MyImage,MySound
GLOBAL xPos,yPos,xSpeed,ySpeed
GLOBAL xMin,yMin,xMax,yMax
FUNCTION START()
{
LET xPos = 0
LET yPos = 0
LET xSpeed = 1
LET ySpeed = 1
SND.SOUNDLOAD("yousrc:winter bell")
LET MySound = RETVAL
LoadImage()
CalculateBounds()
PlayGame()
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Added a variable for our sound
Load the sound effect and save
it in the MySound variable. It
would be better to check if
RETVAL is -1 which would
show a load error.
6 – Adding sound effects
Here are our changes to the CheckForBounce() function so we know if it bounces…
// Reverse image speed if bounds reached
FUNCTION CheckForBounce()
{
LET RETVAL = FALSE
IF xPos <= xMin
{
LET xSpeed = 1
LET RETVAL = TRUE
}
ELSEIF xPos >= xMax
{
LET xSpeed = -1
LET RETVAL = TRUE
}
IF yPos <= yMin
{
LET ySpeed = 1
LET RETVAL = TRUE
}
ELSEIF yPos >= yMax
{
LET ySpeed = -1
LET RETVAL = TRUE
}
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Assume there is no bounce
Show bounce detected
Show bounce detected
Show bounce detected
Show bounce detected
6 – Adding sound effects
To finish things off, check for bounce in PlayGame loop and make sound play…
// Bounce image until mouse clicked
FUNCTION PlayGame()
{
LOCAL Finished
LET Finished = FALSE
WHILE Finished = FALSE
{
MoveImage()
CheckForBounce()
IF RETVAL = TRUE
{
SND.PLAYONCE(MySound)
}
MOUSE.CHECK()
IF RETVAL = TRUE
{
IsMouseInImage()
LET Finished = RETVAL
}
RETVAL is TRUE when a
bounce has happened
Play the sound effect when a
bounce happens
}
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Try this now
6 – Adding sound effects
Before we close this series of sessions, let’s talk timing…
If you want a game to look good and feel good to play then you need to have a fairly
consistent screen update rate.
This is quite tricky because every time your code takes a branch through a new IF
statement, or calls a function inside an IF statement, then the amount of instructions
that the computer has to run this time around the main game loop could be different
to last time.
Plus, every now again your computer may give slightly less processing power to the
YOUSRC app because it might go and check your email, or your Twitter or Facebook
feed, or something else like that totally unrelated to playing the app.
This can mean that each time the computer runs the code in your game loop it might
take a lightly different amount of time to run. Unfortunately the human eye and brain
really notices timing differences like this and they don’t look good.
So what can we do about that?
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Consider the following game loop…
WHILE Finished = FALSE
{
Do lots of stuff which has IF statements in it
GFX.SHOW()
TIMER.SLEEP(2)
}
Each time around the loop will take a different amount of time depending firstly on
how long the “Do lots of stuff which has IF statements in it” takes, and secondly on
what else the computer is doing at the same time.
The IF statements in particular make a difference as they mean the amount of code
that gets run each time around the loop could well be different as they make their
decisions – perhaps in a game there could be an explosion to animate, or different
numbers of baddies on screen each checking if they have been shot by the player.
So what can we do about this?
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
There is an alternative, and that is instead of sleeping for 2x 100ths of a second,
instead to say “wait until 2x 100ths of a second until the last time we were at this
place in the app”.
This means that provided the “do lots of stuff” plus the GFX.SHOW() doesn’t take
longer than 2x 100ths of a second the timing will be more accurate – it doesn’t matter
if the time to “do lots of stuff” takes a different amount of time.
WHILE Finished = FALSE
{
Do lots of stuff which has IF statements in it
GFX.SHOW()
TIMER.WAIT(2)
TIMER.RESET()
}
So we wait until 2x 100ths of a second since the last timer reset, and then straight
away reset the timer again ready for this place in the code the next time around the
loop. So TIMER.WAIT works out how long to wait to give us smooth timing.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
To make sure this is understood, consider the following two timelines where the “do
stuff” takes a different amount of time, and we use either TIMER.SLEEP or the
smoother TIMER.WAIT with TIMER.RESET functions...
Code inside IF runs, timer adds 100
Inside each blue
box is a time and
some code to
show how it all
takes longer to
run when code
inside IF is run,
and how TIMER.
WAIT() evens up
timing whether
code inside IF is
run or not.
0000 IF ...
{
0010 ...
0020 ...
}
0030 TIMER.SLEEP(100)
0140 ...
Code inside IF doesn’t run, timer adds 100
0000 IF ...
{
...
...
}
0010 TIMER.SLEEP(100)
0120 ...
Code inside IF runs, timer waits till 100
Code inside IF doesn’t run, timer waits till 100
0000 IF ...
{
0010 ...
0020 ...
}
0030 TIMER.WAIT(100)
0100 TIMER.RESET()
0000 IF ...
{
...
...
}
0010 TIMER.WAIT(100)
0100 TIMER.RESET()
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
To change to this more accurate way of timing in our game, we need to change our
MoveImage() like this…
// Move image, update screen, wait
FUNCTION MoveImage()
{
LET xPos = xPos + xSpeed
LET yPos = yPos + ySpeed
GFX.IMAGEDRAW(MyImage,xPos,yPos)
GFX.SHOW()
TIMER.WAIT(2)
TIMER.RESET()
}
Wait for 2x 100ths of a second
since timer was reset
Reset the timer ready for this
place in the code next time
around the loop
So that’s it, our first fully playable app with sound, graphics, and mouse input!
Copyright © Previca Limited, 2011. Schools may freely use these resources.
Try this now
6 – Adding sound effects
Exercises
1.
Using Goldwave (www.goldwave.com) or similar software, record some singing
or music at 44100 sample rate. Using the software’s “resample” functionality
experiment with different rates (6000, 11025, 22050, 44100), noting what this
does to file size, and what it does to sound quality. Is quality affected by bitrate?
2.
Using a piano as a guide, record yourself singing “laaaaa” in each note from
middle C up to the next C. Edit these sounds into different sound files (using a
sample rate of say 22050) and upload to your sounds workspace. Write an app
to load these sounds and play back with a 2 second delay between each note.
3.
Using the KEY.WAIT function (the associated example will help you too) play
the sounds when the user presses the keys Q, W, E, R, T, Y, U, I as if these
were the piano keys C, D, E, F, G, A, B, C.
4.
Extend the last app using KEY.CHECKTHISKEY instead of KEY.WAIT to check
each of these keys as this will allow you to handle the case where multiple keys
are played at once.
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Summary
1. We learnt about how computers store sound
2. We loaded and played sound effects as a simple test
3. We added sound effects to our image bouncing app
4. Learn about how to make the animations in our apps smoother
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
Appendix –
App source code after this session
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
// Load and move image till mouse clicked
// Load image and check for a problem
GLOBAL MyImage,MySound
GLOBAL xPos,yPos,xSpeed,ySpeed
GLOBAL xMin,yMin,xMax,yMax,Width,Height
FUNCTION LoadImage()
{
GFX.WRITELINE("Loading image...")
GFX.IMAGELOAD("yousrc:logo")
LET MyImage = RETVAL
FUNCTION START()
{
LET xPos = 0
LET yPos = 0
LET xSpeed = 1
LET ySpeed = 1
IF MyImage = -1
{
FATALERROR("Can’t load image")
}
SND.SOUNDLOAD("yousrc:winter bell")
LET MySound = RETVAL
GFX.WRITELINE("Click mouse to start")
MOUSE.WAIT()
}
LoadImage()
CalculateBounds()
PlayGame()
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
// Calculate image display bounds
// Bounce until mouse clicked in image
FUNCTION CalculateBounds()
{
LET xMin = 0
LET yMin = 0
FUNCTION PlayGame()
{
LOCAL Finished
LET Finished = FALSE
WHILE Finished = FALSE
{
MoveImage()
CheckForBounce()
GFX.GETIMAGEWIDTH(MyImage)
LET Width = RETVAL
LET xMax = 480 - Width
GFX.GETIMAGEHEIGHT(MyImage)
LET Height = RETVAL
LET yMax = 360 - Height
IF RETVAL = TRUE
{
SND.PLAYONCE(MySound)
}
}
MOUSE.CHECK()
IF RETVAL = TRUE
{
IsMouseInImage()
LET Finished = RETVAL
}
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
}
6 – Adding sound effects
// Check if mouse is inside image
FUNCTION IsMouseInImage()
{
LOCAL xClick,yClick
LOCAL xClickMax,yClickMax
// Check if clicked left of image
IF xClick < xPos
{
LET RETVAL = FALSE
}
// Check if clicked right of image
IF xClick > xClickMax
{
LET RETVAL = FALSE
}
MOUSE.GETX()
LET xClick = RETVAL
MOUSE.GETY()
LET yClick = RETVAL
// Check if clicked above image
IF yClick < yPos
{
LET RETVAL = FALSE
}
// Work out bottom right point on image
LET xClickMax = xPos + Width
LET yClickMax = yPos + Height
// Assume inside for now. We can then
// set RETVAL to FALSE to show outside
// if our tests detect that
// Check if clicked below image
IF yClick > yClickMax
{
LET RETVAL = FALSE
}
LET RETVAL = TRUE
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
6 – Adding sound effects
// Move image, update screen, wait
// Reverse image speed if bounds reached
FUNCTION MoveImage()
{
LET xPos = xPos + xSpeed
LET yPos = yPos + ySpeed
FUNCTION CheckForBounce()
{
LET RETVAL = FALSE
IF xPos <= xMin
{
LET xSpeed = 1
LET RETVAL = TRUE
}
ELSEIF xPos >= xMax
{
LET xSpeed = -1
LET RETVAL = TRUE
}
GFX.IMAGEDRAW(MyImage,xPos,yPos)
GFX.SHOW()
TIMER.WAIT(2)
TIMER.RESET()
}
IF yPos <= yMin
{
LET ySpeed = 1
LET RETVAL = TRUE
}
ELSEIF yPos >= yMax
{
LET ySpeed = -1
LET RETVAL = TRUE
}
Copyright © Previca Limited, 2011. Schools may freely use these resources.
}