The Noise Meter

How can you turn sound into a picture? In this Level 2 mission, we’re diving into the world of digital graphics! You’ll learn how programmers use the Cartesian Plane (X and Y coordinates) to draw shapes and lines on a screen. Get ready to build a real-time noise visualizer that uses your microphone’s input to control a dynamic, graphical display.

Cartesian plane; Drawing; Coordinates; Noise sensor; Main loop; Data visualization

Open in Protobject

What will we do?

Learn Create Reflect

Are you a teacher?

Courses

Grades 6-12

Materials

Cell phone, tablet, or computer
Internet connection

Educational Objectives

Understand the concepts of the Cartesian plane and screen drawing.
Create a technological object (prototype) using a device.
Identify the relationships between technology and the surrounding world.
Evaluate their own work and that of others.
Engage in dialogue and reflect on ideas for improvement.

Start (10 minutes) - The Canvas is a Map

Welcome students and introduce the day’s activity: “Today we will learn how to prototype a noise visualizer, turning sound into graphics.”
Kick off the lesson with a question that connects to their math classes: “Have you ever heard of the Cartesian plane in math? What is it used for?”
Connect their answers to the world of programming. Explain that every screen—from their phone to a video game—is a grid. Programmers use X and Y coordinates to place every single visual element. Today, they’ll become digital artists, using this system to draw a line whose length is controlled by sound.

What is the Cartesian Plane?

Think of a screen not as a flat surface, but as a piece of graph paper. To tell the computer where to draw something, you need to give it an “address,” just like a location on a map. This map is called the Cartesian Plane. It’s a coordinate system composed of two perpendicular axes: the horizontal line is called the X-axis, and the vertical line is called the Y-axis. The point where they meet is the “origin” (0,0).

How do the X and Y axes work?

The X-axis (horizontal) works just like a number line: smaller numbers are on the left, and larger numbers are on the right. The Y-axis (vertical) places smaller numbers at the bottom and larger ones at the top. By combining an X and a Y value, we can define the precise location of any point on the screen.

The First Quadrant

The Cartesian plane is divided into four quadrants. In Protobject, to keep things simple, we primarily use the first quadrant, where both X and Y values are positive numbers. The origin point (0,0) corresponds to the bottom-left corner of our drawing canvas.

How to Draw a Line

To draw a line, you just need to give the computer three instructions: a starting point (an X, Y coordinate), the direction to travel (an angle), and how far to go (a length). For a vertical bar, we’ll start at the bottom of the screen, point straight up (a 90-degree angle), and make the length change based on the noise level!

Why visualize noise?

Visualizing sound intensity isn’t just for fun; it’s useful! In loud environments like factories, a noise meter can help protect workers’ hearing. In a classroom or library, it can be a great visual cue to help everyone be more aware of noise levels, creating a better environment for learning and focusing.

Development (20-30 minutes) - Drawing with Data

Now that the students understand the fundamentals of drawing on a coordinate plane, it’s time to build their sound visualizer.
Lead them through the instructions for creating the drawing canvas and programming the visualization logic, as detailed in the hands-on section below. Pay close attention to the draw line block and how the noise level from the sensor is used to determine the line’s length in real-time.

Closure (5-10 minutes) - The Digital Artist

Once everyone has a working visualizer that reacts to their voice, it’s time to reflect on the new graphical powers they’ve unlocked.
Use the final section to challenge their understanding of the coordinate system and to introduce a more complex visualization challenge that involves shapes and text.

Reflect

You just drew with data! Now, let’s get creative.

Our code draws a vertical line. How would you change the parameters of the “draw line” block to make it a horizontal line instead?
Besides a line, what other ways could you visualize the noise? A circle that grows? A color that changes from green to red?

Present Lesson Plan

What is the Cartesian Plane?

Think of a screen not as a flat surface, but as a piece of graph paper. To tell the computer where to draw something, you need to give it an “address,” just like a location on a map. This map is called the Cartesian Plane. It’s a coordinate system composed of two perpendicular axes: the horizontal line is called the X-axis, and the vertical line is called the Y-axis. The point where they meet is the “origin” (0,0).

How do the X and Y axes work?

The X-axis (horizontal) works just like a number line: smaller numbers are on the left, and larger numbers are on the right. The Y-axis (vertical) places smaller numbers at the bottom and larger ones at the top. By combining an X and a Y value, we can define the precise location of any point on the screen.

The First Quadrant

The Cartesian plane is divided into four quadrants. In Protobject, to keep things simple, we primarily use the first quadrant, where both X and Y values are positive numbers. The origin point (0,0) corresponds to the bottom-left corner of our drawing canvas.

How to Draw a Line

To draw a line, you just need to give the computer three instructions: a starting point (an X, Y coordinate), the direction to travel (an angle), and how far to go (a length). For a vertical bar, we’ll start at the bottom of the screen, point straight up (a 90-degree angle), and make the length change based on the noise level!

Why visualize noise?

Visualizing sound intensity isn’t just for fun; it’s useful! In loud environments like factories, a noise meter can help protect workers’ hearing. In a classroom or library, it can be a great visual cue to help everyone be more aware of noise levels, creating a better environment for learning and focusing.

Make the Noise Visualizer

Let’s create the prototype that visualizes the noise level in real-time.

First, we need to add two components: one to (1) detect noise with the microphone and another to (2) act as our drawing canvas.

1

Press ✙ Add Device, select Noise Level, and scan the ▣ QR code with your smartphone.

2

Click on ✙ Add Device, select WriteDraw, and press Open in this window to generate a drawing surface on the computer.

We are ready to start prototyping!

Code Composition

Click on the question mark icon to open comments explaining the code. Note that we have to clear the screen in every loop cycle to erase the old line before drawing the new one!

Reflect

You just drew with data! Now, let's get creative.

Our code draws a vertical line. How would you change the parameters of the “draw line” block to make it a horizontal line instead?
Besides a line, what other ways could you visualize the noise? A circle that grows? A color that changes from green to red?

Challenge: Let’s create a noise visualizer for a classroom. We want it to show a circle that grows as the noise level increases. Additionally, if the noise level gets too high (exceeds a specific value), it should display the word SILENCE! on the screen.

Hint: You can use the “draw a point at” block to draw the circle, and set its size based on the noise level. You’ll need a conditional (IF block) to check the noise level and decide when to write the text.