🔊Lesson 1 - Intro to p5.Oscillator Object

How can we create a sound in a p5.js sketch?

Overview

This lesson will cover basic concepts of sound and introduce students to the p5.oscillator object which can be used to generate pitched sounds in a sketch.

Lesson Objectives

Students will be able to:

• Create an instance of an oscillator object

• Start the oscillator object by using a method

• Explain the steps needed to create an instance of an object using appropriate CS vocabulary

Suggested Duration

1 period (45 minutes)

NYS Standards

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

• Sound Synthesis - the technique of generating sound, using electronic hardware or software, from scratch.

• Oscillator - A circuit or device that produces a continuous and repeated waveform.

• Object - An instance of a class which contains its own methods and attributes

• Instance - A specific realization of any object.

• Dot Notation - A syntax used in Javascript to access attributes and methods of an object.

Planning Notes

This lesson is an introduction to using the p5.Oscillator object as a tool to create pitched sounds that can be used for music making sketches in future lessons.

Using the Oscillator object is different from the p5.Soundfile object in that you will not be working with a pre-recorded audio file that needs to be loaded into the sketch. The Oscillator object is a form of Sound Synthesis which is a way of generating sound electronically. This lesson provides some basic foundational knowledge of how sound works in nature and how we can replicate that process electronically. While this information is not necessary to write the code in this lesson, it can provide helpful context to understand what is happening when we make our oscillator.

The actual code needed to make an instance of the Oscillator object in p5.js is only about 3 lines worth of code. However, it is very important for students to be familiar with the steps needed to create an instance of an object from the sound library. If they can understand and master this skill, it will allow them to further access into the other objects in the sound library both for the lessons in this curriculum and to explore on their own.

Materials

Oscillator Object Exit Slip (Optional)

Resources

ICM Lesson - Introduction to Classes and Objects

Sound Synthesis Resource: https://learningsynths.ableton.com/

p5.Oscillator Object: https://p5js.org/reference/#/p5.Oscillator

Assessments

Formative:

• Create an instance of the oscillator object in their sketch.

• Use a method make this oscillator make sound.

Summative:

Explain what the code is doing for each step involved in making sound in their sketch using the oscillator object.

New Code in this lesson

Code	Type	Purpose
p5.Oscillator( )	Object	Creates an instance of Oscillator Object
.start( )	Method	Used to start sound produced by oscillator object

// Create variable to store 
let osc;

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

osc = new p5.Oscillator(); // Assign Oscillator Object to variable

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

Do Now/Warm Up

1. Have students go to this link: https://www.rapidtables.com/tools/tone-generator.html

Tone Generator Interface from rapidtables.com

What do you notice? What do you wonder?

Provide students with 5 minutes to explore the Tone Generator

Students can work alone or in pairs

Instruct students to write down observations and questions they have while they are using the Tone Generator. They shouldn’t wait until the 5 minutes is up but should write these things on their question sheet as they come up.

If needed, provide a 1-2 minute grace period to complete their observations when they are not using the Tone Generator anymore

Have students share out their observations of what the Tone Generator can do. Students may use different vocabulary to describe the same thing For example, the Tone generator says “frequency” but students may say “pitch” or “makes the sound high or low” Help make connections between those terms when possible.

Intro to Sound and Sound Synthesis

Note: This section of the lesson can be kept brief or modified to go more in depth. Some basic information is provided here but it is up to you to determine how much you want to cover. The share out session from the Do Now will hopefully give some insight into the knowledge students have in regards to some basic sound related concepts like pitch and volume and in turn, can help guide what may or may not need to be covered.

How Sound works in the real world

In this lesson (and throughout this curriculum), we will be using code to generate and manipulate sound. You may have experience working with sound in p5.js by importing a soundfile into your sketch and playing it. This involves using pre-recorded audio. this means that sounds were made out in the real world and captured through some manner of recording. The recording of that sound from the real world is what you are hearing when it is played in your sketch.

For sound to exist in the real world, we really only need two things:

1. Something needs to vibrate. All sound is caused by a vibration.

2. There needs to be a medium (air, liquid, solid). The initial vibration will cause the molecules in the surrounding medium to collide against one another causing a pressure wave that moves through the medium.

A good example of this concept is plucking a string on a guitar. It is easy to see the string vibrate and hear the sound it produces.

It is worth noting that an argument could be made that a third things is needed which is that someone needs to hear that sound (You could pose the question "If a tree falls in the forest and no one is around to hear it, does it make a sound?") However, we will be considering accessibility at different points through these lessons, particularly for members of the d/Deaf and hard of hearing community to engage with these projects, so we want to create an understanding from the beginning that "hearing" sound is not a requirement to experience, engage or interact with sound.

Sound Synthesis

In the projects we will be making, we will not be using recordings of sounds made in the real world, but instead using a process called sound synthesis.

Since we are working in the digital space of our computer, this means that nothing is technically "vibrating" and there is no medium containing molecules that are also going to vibrate. Instead that process is going to be simulated or "synthesized" by our computers with the code we write. The main source of this sound will be with something called an Oscillator.

Oscillators are the basic components of a synth sound. They output repeating waveforms that can be modified using three main controls (source)

The three main controls are qualities of sound that are also connected to musical characteristics which students might be aware of:

• Frequency: the speed at which a waveform vibrates (Pitch)

• Amplitude: The size of the waveform vibration (Volume)

• Waveshape: what a waveform actually sounds like. (Timbre)

Students might already be able to make the connection that these qualities controlled by the oscillator are parts of the Tone Generator from the Do Now.

Creating an Oscillator Object

Have students all go to the p5.js Web Editor and start a new sketch.

Tell students that to create a tone in p5.js, we need to use an Oscillator Object.

An Object is a thing we can use in our program that is capable of doing different things depending on the type of object it is. In this case, the thing is an Oscillator which, first and foremost, can generate a sound but it also can do other things with that sound. The things that an object can do are called methods.

Checking Documentation

Show students the documentation for the p5.Oscillator( ) object and scroll to the methods section. Explain that these are all the different methods that an Oscillator object can do. We will be covering some of them but not all of them as those methods aren’t necessary for what we are going to do.

Note: This is also an opportunity to highlight the importance of documentation. Right away we can get a sense of the code we are going to use along with an example before we do anything ourselves. We can also go back to it later to try out other things.

Instantiating an Object

The first thing we need to do in our code is declare a variable at the top of our sketch.

However, unlike other variables you might have made in the past, we are not going to assign any value to this variable just yet. This is because this variable is not going to contain a value like a number or a data structure like an array. This variable is going to hold our oscillator object.

On line 1, write:

let osc;

Tell students that this variable name could be called anything. However, It is helpful to give variables names which are related to the purpose they will serve in the program. Otherwise, it can be confusing to other people trying to read your code, or even you if you come back to your code at a later time.

When we create an object, it is called creating an instance of an object. Basically, we are giving this object a specific name, so when we want to use it in our sketch, we need to refer to it by the name we gave it. This is so if we wanted to have two different oscillator objects in the same sketch, we would be able to tell them apart since they would each have different names.

In the setup function, we are going to create an instance of this oscillator object by assigning it to the variable we just made. In the setup function, write osc = new p5.Oscillator( );

let osc;

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

Now we have created an instance of the oscillator object and it has the name osc. When we want to make this object do something, we will refer to it by that name.

Using an Object Method

Making Sound with our Oscillator Object

We are now going to make this oscillator object do something, make a sound. To do this, we need to use one of the oscillator object’s methods. The .start( ) method.

Dot Notation syntax

When using methods with an object, we will be using something called dot notation. Dot notation is the syntax we use to access the methods for a specific object. You write the name of your specific object (in this case, osc) followed by a dot, followed by the name of the method you want to use (in this case, start( )).

In this case, we are using the start method for our osc object, so the code would look like this: osc.start( );

Write this in the sketch underneath where you assigned the object to the variable:

let osc;

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

Now we have everything we need to generate a tone in our sketch. Have students run their sketch to hear the tone. Make sure volume is up on their laptops or that they have their headphones on.

It is important to know that the .start( ) method should not be called in the draw( ) function. Because the draw( ) function is a loop that is constantly updating, each time the loop updates, it will call the .start( ) method again. Since draw( ) is updating at aroud 60 times per second, it will create a very unpleasent sound. You can demonstrate this once for the students to make this clear. You could also use this as an opportunity to review how the draw( ) function works or have the students try to figure out why you should not use the .start( ) method in this way.

Assessment Opportunity

Have students save this sketch as Oscillator Object template

Get student volunteers to review the steps needed to create the oscillator object.

Emphasize accurate CS vocabulary

Distribute Oscillator Object Exit Slip

Students are asked to write down the 3 steps needed in order to generate a tone in a p5.js sketch using the Oscillator Object with appropriate CS vocabulary.

Alternative: Choose to have students complete this assignment in a new p5 sketch and provide comments which explain each of the three steps needed in order to generate a tone in a p5.js sketch using the Oscillator Object. Students can then send the link through the platform of your choosing.

One drawback of this is that you will not have the opportunity to check on student work prior to trying to run the code in the web editor.

Correct Steps:

1. Declare a Variable to hold the object instance.

2. Create an instance of the oscillator object by assigning it to the variable.

3. Use the .start( ) method for that object instance

Wrap Up

Write the code from their exit slip into a new sketch to check if it works correctly. If they have any errors, students should comment out that line of code and add another one. They should also include in a comment why the first line of code didn’t work.

Inform students that this Oscillator Object is going to be the first building block of a lot of the projects that we will make in these units. While they will not have to create one every single time (This is why they made a template), it is important that they understand the steps needed to do it and what is happening in each of those steps as there will be other objects we will start to use and they will follow a similar sequence to instantiate and use in our sketches.

Extensions

Students can look at the documentation for the p5.Oscillator object and try to find which methods could be used to change the qualities of sounds that can be controlled by the oscillator which were discussed in the Intro to Sound part of the lesson and that we saw in the Tone Generator website.