🐭Lesson 4 - Mouse Theremin: Code

How can we use the mouse to control the sounds produced by an oscillator?

Overview

This lesson will allow students to change the frequency and amplitude of an oscillator by controlling the mouse.

Lesson Objectives

Students will be able to:

• Control the attributes of the Oscillator Object using the mouse.

• Use the map function to convert one range of value to a different range

• Identify the purpose of a specific piece of code and modify that code to serve a similar purpose for a different part of their project.

Suggested Duration

1 period (45 minutes)

NYS Standards

9-12.CT.5 Modify a function or procedure in a program to perform its computation in a different way over the same inputs, while preserving the result of the overall program.

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

Theremin - an electronic musical instrument controlled without physical contact by the performer

Planning Notes

This project that allows students more real time control over the changes in pitch and volume of the sounds made in their sketches. It can lend itself to a lot of classroom distraction as it is easy to make a variety of fun (but at times annoying) noises, even when they shouldn’t be. It is important to lay down some ground rules beforehand and even to try to utilize any headphones you or the students may have to mitigate the amount of extra noises that can be made.

They will start by looking at a real life version of a theremin as well as an example of a digital version on which their own project will be based. They will consider the functionality of that version and how they can execute similar concepts in using code in p5. They will also be made aware of specific choices that are made in how the website is designed which affects how the user interacts with the program. After the coding concepts in this lesson, students will be asked to start considering the design of their own project in relation to a user. They will collect feedback about the experience of the user of their sketch with the intention of making modifications to improve that experience as well as making it more consistent with how a theremin behaves in real life.

Materials

Mouse Theremin - Frequency to Amplitude Conversion Sheet

Resources

ICM lesson: The map( ) function

ICM Lesson: Intro to Variables: System Variables (mouseX, mouseY)

Map function reference

Assessments

Formative

• Map a variable to a new range of numbers to be used for a different set of parameters

Summative

• Apply knowledge of the purpose of specific functions and methods to write new code which results in different output but uses similar functions and methods

New Code in this lesson

Code	Type	Purpose
mouseX	Variable	Contains the value of the location of the mouse on the x axis of the canvas
mouseY	Variable	Contains the value of the location of the mouse on the y axis of the canvas
map(variable, min1, max1, min2, max2 );	Function	Converts the number range of a variable to a new range of numbers

// Converts the range of the mouse on the X axis from 0 to 400 to a range between 0 and 255
let x = map(mouseX, 0, 400, 0, 255);

Do Now/Warm Up

Have students watch the video. Provide the following focus questions:

• How do we change the frequency (pitch) when playing the theremin?

• How do we change the amplitude (volume) when playing the theremin?

https://www.youtube.com/watch?v=-QgTF8p-284

Online Theremin Website

Have students explore this website below. Provide the following focus questions:

• What is similar/different from the way the theremin is played in the video and how it is played in the app?

• What are some features that can be changed in the app?

Theremix - Virtual Theremin

Take a few minutes to have students share out answers to these questions. Things that should be emphasized:

• The movements needed to change the frequency (left and right) and the volume(up and down)

• There seems to be a certain area available where you are confined to move around in.

• In real life, you use your hands to control, but in the app you use the mouse.

• The app allows you to change several things (type of oscillator, “glide” - breaks into notes, settings has several more options related to musical characteristics like key and scales) Inform students to keep these changes in mind as we will be getting into them in later lessons.

Controlling frequency with mouseX variable

For this project, students are going to be creating their own simple theremin that works in a similar way to what we saw in the website. Students should open their Oscillator Object template and create a copy of the sketch. They should change the name to Mouse Theremin.

For this project, we are going to use the built in variable mouseX to control the value that we pass as the argument to the .freq( ) method.

The mouseX variable will have the value of wherever the mouse is located on the x axis of canvas. This means it will be a value between 0 and the size of the canvas, which we can see in the first number in the createCanvas function.

Inside of the draw function, under the background function, create a variable called pitch and assign mouseX as the value:

let pitch = mouseX;

On the next line of code, have students put the .freq( ) method and put the pitch variable as the argument inside of the parentheses.

function draw(){
background(220);
let pitch = mouseX;
osc.freq(pitch);
}

Inform students that in the past lessons, we were putting the .freq( ) method inside of the setup function. The setup function only is called once when the sketch begins. This means that whatever value we give as the frequency will not change for the rest of the time that the sketch is running. The draw function is a loop which is always updating itself (approx. 60 times per second). Putting the .freq method in the draw function means that the value we pass to this method can change while the sketch is running which in turn will change the pitch of the sound in real time.

Have students run the code and move the mouse left and right across the canvas to hear the change in frequency. Ask students to share any observations they have about what is happening.

Example: the pitch continues to get higher even when we go off the canvas.

Look for someone to point out that there doesn’t seem to be any sound when the mouse is at the left side of the canvas or that the sound appears to get quieter. Check if any student can explain why this is.

Remind students of the section from the Tone Generator website about Hearing Range which said that, on average, humans can hear between a range of 20-20000hz. If the value of mouseX is between 0 and 400 (the default width of the canvas), when we are on the left side of the canvas, the value of the frequency is lower than 20hz (and even between 20 and 40hz, the sound can be nearly inaudible) This means the frequency of the sound is lower than what our ears can hear.

The map( ) function

To choose our own range of frequencies for our mouse, we are going to use a process called mapping. Mapping takes a variable that contains one range of values and converts that to a new range of values. In this case, we want to convert the range of our X axis (the width of our canvas) to a range of frequencies starting on a low pitch and moving to a high pitch.

This will require us to use the map( ) function.

The map( ) function takes five arguments: The variable you want to convert, the min and max values of that variable and the new min and max values of the range you want to convert to.

On the line where you have declared the pitch variable, you will put the map function with the following arguments:

function draw(){
background(220);
let pitch = map(mouseX, 0, width, 200, 800);
osc.freq(pitch);
}

Students can experiment with the min and max values being used for the frequency range of the oscillator, but it is advised to keep the max value below 1000 as higher pitches can be painful to their ears and others. Use this opportunity to remind students about approaching their projects with Care.

Assessment opportunity - Mapping Amplitude

Based on the app students looked at for the Do Now, we can also change the amplitude using the mouse. In this case we will be changing it based on the location of the mouse on the Y axis, therefore we will be using the variable mouseY.

The way we will do this is very similar to how we changed the pitch except that we will have to change some things in our code.

Provide students with the Mouse Theremin - Frequency to Amplitude Conversion sheet. This sheet includes the following parts of the code we used to map mouseX to the frequency range. Have them convert each part to what will be needed to change the amplitude.

• let pitch (variable to store mapped values. Remember we chose this name)

• mouseX (Variable who's range will be mapped)

• 0, width (range of mouseX)

• 200, 800 (range of frequency)

• osc.freq( ) (method that controls the oscillator frequency)

Optional Assessment Opportunity: The Conversion sheet already includes the purpose of each piece of code. You could chose to modify this to have students explain what purpose each piece of code serves in the context of this project.

Check student work and once they have demonstrated the correct code, have them enter it into their sketch to see the results:

Example of finished code:

function draw(){
background(220);
let pitch = map(mouseX, 0, width, 200, 800);
osc.freq(pitch);

let vol = map(mouseY, 0, height, 0, 1);
osc.amp(vol);
}

Note: Students were given the freedom to create the name of the variable used to store the new mapped range of values. Remind them that it is good practice to choose a variable name which relates to what purpose it will serve in our code. This is useful both for other coders who look at our sketch (another choice made with Care!) and for ourselves when we come back to our code at a later time.

For this example, one variable name that would make sense would be volume. However, volume is already the name of a method in p5.js and if we make a variable of the same name, it can cause problems in our code (similar to if we were to create a variable called background). Therefore we should try to choose a different variable name that still has some significance for what we want to do. This could be an abbreviated version (vol), a more detailed version (ampVolume) or a different word (amp). Allow students to make their own choice here.

Intro to UX Design - User Testing

We have now designed a simple instrument that can be used by anyone who choses to interact with our program. The code we used to do this is relatively straight forward and simple, as is the resulting product: We move the mouse left and right, the pitch changes. We move the mouse up and down, the volume changes.

From here, we want to take some time to consider the experience of our user and use their feedback to help us further develop and improve upon this simple design. There are no doubt things that we can change/modify/add to will enhance our user's experience. In the next lesson students will be asked to consider user feedback, identify areas in need of improvement, ideate on possible solutions and then implement these solutions within their code.

Below are some guiding questions that can be asked to user to get their feedback. You could also take time to have students try to generate their own questions to ask users and consider if responses to those questions could be helpful to improve the project.

Guiding Questions

• Is it working the way we intended it to?

• Is it consistent with how the real instrument works?

• What did you find most enjoyable about using this instrument?

• What could be done to improve the user experience?

• What might the user find confusing about using this instrument?

• What did you find frustrating/annoying?

• What is something you would like it to do but it cannot?

The way you choose to gather this user feedback will be dependent on your individual logistical situation. One possibility for this project could be to solicit outside user feedback from students, teachers or family/friends who were not involved in the initial coding of this project. They can be presented with the theremin in the fullscreen mode where they cannot see the code for the project and provided a series of questions to answer to gain information about their experience using this instrument. This option will provide you with the benefit of having feedback from people who have no prior knowledge of what went into this project or how it was designed to work. The user should be given very little in regards to instructions on how to use the instrument.

However, this may not be a realistic endeavor for your class to do for a myriad of reasons. If this is the case, you can have you own students try to use the theremin in the full screen mode and try to put themselves in the place of someone using this instrument for the first time.

You may also choose to do a combination of both in an effort to gather as much feedback as possible to inform your decisions for making changes. Eliciting feedback from the students in your class can also help provide an activity for students who have finished the assessment part of the lesson. For this case, it would be advised to have written instructions that explain what students are supposed to do.

Wrap Up

Depending on how and when you choose to role out the plan for user testing, use this time to explain the task of gathering the feedback. This could involve a script needed to present to outside users, going over the guiding questions, how to engaged with the project in full screen mode so the code cannot be seen. It would be recommended to have a Google form or other format where you can access all the results in one place so that it can be easy to read and analyze. You could assign this task as a homework assignment for students to do outside of class with someone else or on their own. You could also opt to set aside some class time for students to complete this part of the lesson. Ideally, you want to have the user feedback data collect before the next lesson in this unit. The data will be used as the starting point to begin thinking about the changes you will make in your design to improve user experience.

Extensions

N/A