📈Lesson 2 - Changing Frequency and Amplitude

How can we use methods of our oscillator object to change different qualities of the sound?

Overview

This lesson will have students changing the pitch and volume of the oscillator objects using the .freq( ) and .amp( ) methods.

Lesson Objectives

Students will be able to:

• Use different methods to change attributes of an object

• Include optional parameters to access additional functionality of a method

• Make changes in the pitch and volume of the generated sound of the oscillator object

Suggested Duration

1 period (45 minutes)

NYS Standards

9-12.CT.1 Create a simple digital model that makes predictions of outcomes.

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

Vocabulary

Amplitude - The measure of the size of a sound wave which affects the volume emitted from the wave.

Frequency - The speed at which a sound wave is vibrating up and down which affects the pitch emitted from the wave.

Ramp - A linear rising or falling of a value with respect to time.

Planning Notes

This lesson introduces two additional methods for the Oscillator object which will allow us to change two characteristics of the sound, volume and pitch. It also will make students aware of the possibility of optional arguments for a given method or function. These are arguments that do not have to be passed in order for the function to execute, but allow additional functionality if we choose to use them. In this case, we can opt to use these arguments to add changes over time to the volume or pitch of a sound.

Materials

N/A

Resources

ICM Lesson: Off Canvas Methods

p5.js Reference: amp( ) method

p5.js Reference: freq( ) method

Assessments

Formative assessment -

• Check that students understand how to use both methods covered in this lesson

Summative assessment -

• Check for understanding of how argument values passed to methods affect qualities and changes in sound by providing specific prompts for how the sound should change.

New Code in this lesson

Code	Type	Purpose
.freq( )	Method	Used to set/change a specific frequency (pitch) of sound produced by oscillator object. Argument passed corresponds to hertz
.amp( )	Method	Used to set/change the amplitude (volume) of the sound produced by the oscillator object. Range between 0-1

let osc;

function setup(){
createCanvas(400, 400);
osc = new p5.Oscillator();

osc.freq(400); // method to set frequency value of sound to 400hz

osc.amp(0.75); //method to set volume of sound
}

Do Now/Warm Up

Present students with the two images below which each include two different waves that represent a vibration which produces sound, ie a sound wave. Give students the following prompt to try and predict the differences in sound produced by each sound wave.

"The sound waves in one image both have the same volume but a different pitch. The sound waves in the other image have the same pitch but a different volume. Which image is which? Explain how you arrived at your answer."

Image 1 - Volume

Image 2 - Pitch

Provide students with 2-3 minutes to think about their prediction. It is not necessary to have students share out their predictions as it isn't about whether they get it right or wrong. This is just an exercise to get students thinking about how sound waves behave and how that can affect the different qualities of sound produced by these vibrations.

After everyone has arrived at their answer, show them the following video which explains the two different qualities of sound, pitch and volume, and shows how these qualities relate to a visual representation of a sound wave.

Qualities of Sound - Amplitude and Frequency

Note: The main point of this section is to define the vocabulary related to the methods you will be using: Amplitude and Frequency and to make a clear connection between those terms and how it affects the sounds being produced by our oscillator . This is all that is really necessary to start the coding part of the lesson. Beyond that, you can determine how much time you want to spend on these concepts.

As discussed in the first lesson, we are using an Oscillator to synthesize sound by outputting repeated waveforms that simulate something vibrating (going up and down) in the real world. Using this method, we are able to control different qualities the sound being produce: Frequency and Amplitude.

Amplitude: The force which causes something to vibrate will have an affect on how large the vibration is. The size of the vibration will have an affect on how many molecules in the medium are moved around by the initial vibration which will determine how loud or quiet we perceive the sound to be. Therefore we can make a connection between the amplitude and volume(loud/quiet).

Frequency: When something vibrates, it moves up and down. When a wave vibrates up and down one time, it is called a cycle. The more cycles a wave does in a second, the faster it vibrates. The speed at which a wave is vibrating is called the frequency (Think of the word frequent, how frequently does the wave complete a cycle). When a wave is vibrating fast, we perceive that sound to have a higher pitch. When a wave is vibrating slow, we perceive that sound to have a lower pitch Therefore we can make a connection between frequency and pitch(high/low).

If time permits, you can consider showing students the follow projects in Chrome Music Lab:

Voice Spinner - This project will record your voice and show a visual representation of the recorded sound. Do a recording of your voice using a quiet voice and another recording using a loud voice. Point out the difference in size of the visual sound wave based on how loud or quiet your voice was. You can demonstrate this to the class or have students do it themselves. You could have students pair up and have one do a quiet voice and the other do a loud voice and compare their results side by side. (The voice spinner also allows you to play back the recording at different speeds and also backwards. While it is not relevant to use it to compare the sizee of the sound wave and the volume of the sound, it can produce some hilarious results that students will often be amused by!)

Chrome Music Lab Voice Spinner - Loud voice

Chrome Music Lab Voice Spinner - Quiet voice

Soundwave - This project includes a good visual of multiple dots moving up and down when you play a tone on the keyboard. The dots are meant to represent air molecules that are moved around by a sound vibration. When you play a lower note on the keyboard, you will see the dots/molecules move up and down at a slow speed. As you move up the keyboard and hear the pitch get higher, you will notice the dots moving faster and faster. This shows the connection between the speed of a vibrating sound wave and the pitch it produces. You can also zoom in to see the path of a single dot/molecule drawn out which will closely resemble the images show in the beginning of the lesson.

Chrome Music Lab Soundwave project - Zoom Out

Chrome Music Lab Soundwave project - Zoom In

Using methods with Oscillator Object

Have students open the Oscillator Object template made from the previous lesson and make a copy of this project.

Code should look like this:

// Create variable to store 
let osc;

function setup(){
createCanvas(400, 400);
// Assign Oscillator Object to variable
osc = new p5.Oscillator();

// method to start sound made by oscillator object
osc.start();
}

Inform students that we are going to change some of the qualities of the oscillator object.

Remind students of the Tone Generator website they looked at in the previous lesson. Two of the things we are able to change is the frequency (pitch) and volume(amplitude). We are going to use two methods from our oscillator object to do this.

Have students look at the documentation for the p5.Oscillator object and provide one minute to try to identify which methods we might use to do this. (Some students may have already done this as an extension from the previous lesson).

Have students share out which ones they found and why they think that is the correct method. Encourage students to read the parts from the documentation which helped them make their decision.

Refer back to the Tone Generator website and point out the warning at the top of the webpage.

Volume Warning from Tone Generator Website from rapidtables.com

It is worth pointing out that this is a choice made with care by the designers of this website because they are showing concern for the well being of the user. When working with sound, we need to take the volume into consideration as excessive exposure to loud volumes can be damaging to our hearing. Keeping this in mind, we will start by adjusting the volume of our Oscillator.

.amp( ) method

To change the volume, we will use the .amp( ) method. Amp in this case is short for Amplitude. Amplitude refers to the size of a vibration. The larger a vibration, the more molecules are displaced in the surrounding medium which creates a larger pressure wave that makes a sound appear to be louder.

For this method, we write the following:

osc.amp( );

Take a moment to review dot notation syntax for use with object methods. Write the name of the object instance variable followed by a dot then the name of the method.

Passing arguments to a method Have students write this in their code and run the sketch. Students may notice that there is no difference in the sound from what we had before. This is because this method will take an argument. An argument is a specific value of some data type that will be given to the method in order for it to carry out what it is supposed to do.

When we look at the documentation for this method, it says “set the amplitude between 0 and 1” This is telling us that this method takes an argument that is a number between 0 and 1. So when we write this method, we should write a number inside of the parentheses at the end of the method.

Example: osc.amp(0.1);

Have students start with a very low number as it is better to start low and work our way up so we do not risk hurting our ears.

let osc;

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

osc = new p5.Oscillator();
osc.start();
osc.amp(0.1);
}

Have students experiment with gradual increases in the value of the argument. Students can also try to include a number slightly over 1 to see if the object will accept that value but stress that they should not try large numbers as the volume could be damaging to their own and others' hearing.

.freq( ) method

To change the frequency, we will use the .freq( ) method. Just like with the amp method, we will use dot notation to use the freq method.

osc.freq( );

This method will take one argument. Point out that, in this case, the documentation does not give any specific number or range of numbers that should be used. It just says:

"Set frequency of an oscillator to a value."

Further down in the documentation under parameters it says:

"Frequency in Hz"

This will be a number that represents the hertz of the frequency produced by our oscillator. Remind students that hertz represents the number of cycles per second in a vibration. In other words, how fast something is vibrating (The faster the vibration, the higher the pitch). In the Tone Generator website, students may have noticed a section titled:

Human Hearing range explanation from Tone Generator Website on rapidtables.com

This provides us with helpful information about what values we can pass to this method. We can also use the frequency slider on this website to get a better idea of what the tone will sound like with each frequency.

Just as with the Amplitude, have students start with a lower value as very high frequencies can be painful to our ears. Point out that all the sample frequencies provided on the website were between 100 and 500hz so they can try some of those to start.

Example Code:

let osc;

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

osc = new p5.Oscillator();
osc.start();
osc.amp(0.6);
osc.freq(200); // .freq method
}

Changes in Frequency and Amplitude - ramp parameter

Looking at the documentation for the freq( ) method, we can see that there are two optional parameters that are specified as rampTime and timeFromNow. An optional parameter is a parameter that does not need to be passed to a method or function for it to do what it is supposed to do. It usually offers some additional functionality which is not always necessary when using that particular function/method. An example students may already have experience with is the alpha parameter with the fill( ) function.

These optional parameters introduce a new element to our work with sound: Time. It is worth noting that experiencing sound is time-sensitive. Listening to a specific sound requires a specific amount of time to pass. Have students consider the time bar they might see on a streaming website that shows how much time of the song has passed.

For now we will just be looking at rampTime.

rampTime allows us to change the frequency to a different pitch over a specified amount of time. Ramp means that the pitch is going to change gradually. It will play all the frequencies in between the starting pitch and ending pitch as one single tone. It will mimic the effect of a slide whistle. The argument we will pass for this parameter will specify how long it will take to go from the starting frequency to the next frequency.

In order for this to work, you need to initialize the starting frequency with the freq( ) method and then make a second call to the freq( ) method with the ending frequency and also include the rampTime parameter. Remember that the value passed as an argument is the number of seconds. For time less than one second, use a decimal point = 0.7

let osc;

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

osc = new p5.Oscillator();
osc.start();

osc.freq(200); // freq() method
osc.freq(500, 3) // The frequency will move from 200hz to 500hz over 3 seconds
}

Go to the documentation for the .amp( ) and you can see that it includes the same optional parameters. In this case, the rampTime parameter will initialize a change in volume over a specified amount of time. Similar to .freq( ), you first need to initialize the starting amplitude and then make a second call to the amp( ) method with the ending amplitude and also include the rampTime parameter. Remind students that the amp( ) method generally is a number between 0 and 1, so we do not want to be making large value changes in our amplitude.

let osc;

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

osc = new p5.Oscillator();
osc.start();

osc.amp(1);// amp() method
osc.amp(0.1, 3) // The frequency will move from 1 to 0.1 over 3 seconds
}

Assessment Opportunity

Have students experiment with these two parameters to make changes in the pitch and volume of their oscillator. As a possible assessment opportunity, you can provide prompts to students on what type of changes you would like to hear and have them use the correct methods and arguments to execute that sound. Make sure to be clear about the vocabulary you will use in reference to the changes in the sound: louder/quieter = amplitude, higher/lower = frequency.

Examples:

• A sound that starts with a high pitch and moves to a low pitch in less than 5 seconds

• A sound that gets twice as loud over 3 seconds

• A sound that gets higher and quieter. It takes twice as long to get quieter as it does to get higher.

Wrap Up

Since the assessment prompts are designed to allow for multiple correct solutions, you can take some time at the end to have students share their solutions to the same prompt. Use this opportunity to emphasize that there can always be more than one correct way to arrive at a solution to a problem.

It can also be helpful to have students share the values that they used and write them down on a board or Smartboard. This helps students to see different solutions side by side in addition to hearing the results.

Consider how your class is set up to share out results that include sound. If you have a quick way to hook up students computers to some type of speaker (using a headphone jack), you could have them come up to share. If that is not available, you can have students turn up the volume on their laptop and share. Make sure to remind the rest of the class to be respectful and quiet, so everyone can hear the sound. Another possibility is just to have your own laptop hooked up with a sketch that includes the code for the solution and change the arguments passed to the freq( ) or amp( ) method to show each students solution.

Extensions

The oscillator object also includes what are known as getter methods for the frequency and amplitude. These are methods which can be used to retrieve the current value of the oscillator frequency or amplitude.

let osc;

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

osc = new p5.Oscillator();
osc.start();

osc.amp(0.7); // sets amplitude to 0.7
osc.freq(600); // sets frequency to 600
}

function draw() {
background(220);

let amp = osc.getAmp() // getter method for amplitude
let freq = osc.getFreq() // getter method for frequency

console.log(amp) // prints 0.7
console.log(freq); // prints  600
}

If your students are familiar with using basic conditional statements (IF statements), they can use these methods as part of the condition to check if the amplitude or frequency has reached the value that you have set the oscillator to ramp to. Once the oscillator reaches that value, they can have the conditional statement execute some additional code. This could be in the form of something visual (a shape appears or the background color changes) or it could do something to the sound of the oscillator (Go to a different frequency/amplitude or even turn off the oscillator using the .stop() method).

Remind students that these conditional statement should be included in the draw function, not setup, because it will constantly be checking if the condition has been met (or leave it up to them to figure it out).

Examples:

getAmp() - Circle Appears

getFreq() - Pitch goes up and down