agsdix-fas fa-child

Noise Visualizer

We create a noise visualizer using the Cartesian plane. The noise intensity is represented with a line that is proportionally longer or shorter. More noise results in a longer line, while less noise results in a shorter line. This way, we can visually observe how the noise intensity changes.

info outline icon
Intermediate activity; Cartesian plane; Events; Conditions; Drawing.

What are we going to do?

¿Eres Profesor?

Lesson Plan

Courses

  • Grades 6-12
  • Grades 6th to 4th upper secondary

Materials

  • Cell phone, tablet, or computer
  • Internet connection

Description

In this activity, students can experiment with Protobject, learning visual programming and computer science safely and enjoyably using a device.

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 in individual or group work.
  • Engage in dialogue and reflect on ideas for improvement.

Beginning (10 minutes)

Welcome students to the lesson and briefly introduce the day’s activity, “today we will learn how to prototype a noise visualizer.”

We will start the lesson by providing technical knowledge to students for meaningful learning of the practical activity.

To kick off the lesson, we can begin with a question:

Do you know the Cartesian plane?

You can allow students to propose their answers, and then integrate them with the correct response.

The two-dimensional Cartesian plane is a coordinate system used to position elements in space.

It consists of two perpendicular axes: the horizontal axis is called the X-axis, and the vertical axis is called the Y-axis.

The point where these axes intersect is called the origin and is represented by the value 0,0.

In mathematics and programming, you might need a third axis, Z, that would allow you to work in three dimensions, adding depth.

The X-axis, the horizontal line of your Cartesian plane, places smaller numbers to the left and larger numbers to the right.

Furthermore, negative values are represented to the left of the Y-axis, counting from 0 to the origin.

The Y-axis, the vertical line of your Cartesian plane, places smaller numbers at the bottom and larger numbers at the top.

Furthermore, negative values are represented below the X-axis, counting from 0 to the origin.

Explain how the quadrants work in the Cartesian plane.

The Cartesian plane is like a large chalkboard divided into four parts called quadrants. These quadrants help us position points on the plane and understand how positive and negative numbers relate.

Imagine looking at the Cartesian plane in front of you. In the top-right part, in the first quadrant, you find positive numbers on both the horizontal axis (called “x”) and the vertical axis (called “y”). Points with positive values for “x” and “y” are located here. It’s as if you’re in the top-right corner of the plane.

On the other hand, if you look to the left in the upper part, you’ll find the second quadrant. Here, the horizontal axis (x) has negative values, while the vertical axis (y) has positive values. You’re in the top-left corner now.

If you look down, you’ll reach the third quadrant, in the bottom-left corner. In this quadrant, both the horizontal axis (x) and the vertical axis (y) have negative values. You’re in the bottom-left corner.

Finally, if you look down and move to the right, you’ll reach the fourth quadrant, in the bottom-right corner. Here, the horizontal axis (x) has positive values, while the vertical axis (y) has negative values. You’re in the bottom-right corner now.

When we draw on a computer, we can use Cartesian coordinates to indicate the position of elements on the screen. It’s as if we’re using a Cartesian plane, but in this case, the plane is on the computer monitor.

In Protobject, only the first quadrant of the Cartesian plane (highlighted in green) is used for convenience. Negative values are not used to avoid unnecessary complications.

Imagine the surface you want to draw on as a large white canvas. On this surface, the point (0,0) in the Cartesian plane is located in the bottom-left corner. So, in the case of drawing on a computer, the point (0,0) corresponds to the bottom-left corner of the surface.

When we want to draw something on the surface, we use positive values to indicate the coordinates of the points.

So, how do we draw a line?

Imagine you want to draw a vertical line on the screen. To do this, you can use Cartesian coordinates. In this case, the starting point of our line is (3, 1). This means we start from position 3 on the horizontal axis (x) and position 1 on the vertical axis (y).

This position is slightly up and to the right of the bottom-left corner of the monitor. Now, to draw a vertical line from this position, we instruct the computer to go upwards, which corresponds to an angle of 90 degrees. So, we want to draw a line of 2 pixels, so we ask the computer to draw a 2-pixel line.

So, the vertical line we’ll draw will go from the point (3, 1) to the point (3, 3). This means we start from position (3, 1) and go vertically up to position (3, 3). By following these instructions, you can program the computer to draw a vertical line of 2 points on the screen, starting from point (3, 1) and ending at point (3, 3).

Now, why would it be useful to visualize noise?

Visually showing the intensity of noise can be very useful for understanding how loud a sound is in a clear and objective way. This can help us in various situations. For example, in places like a factory or a machine repair workshop, where there’s a lot of noise, this can help workers better understand how much noise there is and take measures to reduce it. It can also be very useful in the classroom.

If there’s a lot of noise in the classroom, it can be difficult to hear the teacher and learn effectively. Visualizing the noise level in a visual way helps us understand how much noise we’re making, so we can be more aware and try to make less noise. In short, noise visualization helps us understand how loud a sound is and helps us take measures to reduce noise in places like factories, workshops, and classrooms. This way, we can create a quieter and more conducive environment for work and learning!

Let’s create a noise visualizer?

Development (20-30 minutes)

Connect our device to the Protobject platform. For this exercise, we will use NOISE LEVEL and DRAW ON SCREEN.

Remember to experiment on your own in advance so that you can anticipate questions that might arise from students.

You can follow the activity’s code step by step, and if you have any doubts, read the commented code.

To test the prototype, we’ll instruct students to click on the activation button.

Congratulations!

Closing (5-10 minutes)

Now that you’ve learned how to draw on the screen:

How could we draw a horizontal line instead of a vertical one?

How else could we use different modes to visualize noise?

You can also challenge them if you have time or as homework.

Challenge:We want to create a noise visualizer that helps us maintain silence in the classroom. Instead of using a line, we will visualize noise with a growing circle as the noise level increases. Additionally, our visualizer will display the word SILENCE! when the noise level exceeds a specific value.

View the challenge solution.

agsdix-fas fa-book-reader

Learn

What is the cartesian plane?
The two-dimensional Cartesian plane is a coordinate system used to locate elements in space.

It is composed of two perpendicular axes: the horizontal axis is called the X-axis, and the vertical axis is called the Y-axis.

The point of intersection of these axes is called the origin, and it is represented with the value 0,0.

Additionally, in mathematics and programming, you may need a third axis, called Z, which allows you to work in three dimensions, adding depth.

How do two-dimensional axes work?

The X-axis, which is the horizontal line of your Cartesian plane, places smaller numbers to the left and larger numbers to the right.

Furthermore, negative values are represented to the left of the Y-axis, counting from 0 at the origin.

The Y-axis, which is the vertical line of your Cartesian plane, places smaller numbers at the bottom and larger numbers at the top.

Additionally, negative values are represented below the X-axis, counting from 0 at the origin.

The quadrants in the cartesian plane

The Cartesian plane is like a large board divided into four parts called quadrants. These quadrants help us locate points on the plane and understand how positive and negative numbers relate.

Imagine you are looking at the Cartesian plane in front of you. In the upper right part, in the first quadrant, you find positive numbers on both the horizontal axis (called “x”) and the vertical axis (called “y”). This is where points with positive values for “x” and “y” are located. It’s as if you were in the right-hand corner at the top of the plane.

Conversely, if you look to the left in the upper part, you’ll find the second quadrant. Here, the horizontal axis (x) has negative values, while the vertical axis (y) has positive values. You are in the left-hand corner at the top of the plane.

If you lower your gaze, you’ll reach the third quadrant, in the lower left corner. In this quadrant, both the horizontal axis (x) and the vertical axis (y) have negative values. You are in the left-hand corner at the bottom of the plane.

Finally, if you look down but move to the right, you’ll arrive at the fourth quadrant, in the lower right corner. Here, the horizontal axis (x) has positive values, while the vertical axis (y) has negative values. You are in the right-hand corner at the bottom of the plane.

Drawing using the cartesian plane

When we draw on a computer, we can use Cartesian coordinates to indicate the position of elements on the screen. It’s as if we were using a Cartesian plane, but in this case, the plane is on the computer monitor.

In Protobject, only the first quadrant of the Cartesian plane (highlighted in green) is used for convenience. Negative values are not used to avoid unnecessary complications.

Imagine that the surface where you want to draw is like a blank canvas. On this surface, the point (0,0) in the Cartesian plane is located in the lower left corner. Therefore, when drawing on a computer, the point (0,0) corresponds to the lower left corner of the surface.

When we want to draw something on the surface, we use positive values to indicate the coordinates of the points.

Drawing a line

Imagine you want to draw a vertical line on the screen. To do this, you can use Cartesian coordinates.

In this case, the starting point of our line is (3, 1). This means we begin at position 3 on the horizontal axis (x) and position 1 on the vertical axis (y). This position would be slightly up and to the right of the lower-left corner of the monitor.

Now, to draw a vertical line from this position, we instruct the computer to move upwards, which corresponds to an angle of 90 degrees. Then, we want to draw a 2-pixel line, so we ask the computer to draw a 2-pixel line.

So, the vertical line we will draw goes from point (3, 1) to point (3, 3). This means we start at position (3, 1) and move vertically up to position (3, 3).

By following these instructions, you can program the computer to draw a 2-pixel vertical line on the screen, starting from point (3, 1) and ending at point (3, 3).

Why is it useful to visualize noise?

Visualizing the intensity of noise can be very useful for understanding how loud a sound is in a clear and objective way. This can help us in various situations.

For example, in places like a factory or a machine repair workshop, where there is a lot of noise, it can help workers better understand how much noise is present and take measures to reduce it.

It can also be highly beneficial in the classroom. If there’s a lot of noise in the classroom, it can be challenging to hear the teacher and learn effectively. Visualizing the noise level helps us realize how much noise we are making, making us more aware and encouraging us to be quieter.

In summary, visualizing noise helps us understand how loud a sound is and assists us in taking measures to reduce noise in places like factories, workshops, and classrooms. This way, we can create a quieter and more conducive environment for work and learning!

Prototipar

Let’s create the prototype that visualizes the noise level.

The first step is to add two devices that allow us to (1) detect noise and (2) draw on the screen.

1

Press Add Device, select Noise Level, and scan the QR code with your smartphone to generate a noise detector.

2

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

We are ready to start prototyping!

Code composition

Click on the question circle icon to open comments that explain the code.
agsdi-bulb-options

Reflect

Now that you’ve learned how to draw on the screen:

How could we draw a horizontal line instead of a vertical one?

What other methods could we use to visualize the noise?

Plus Square Icon

Challenge: We are going to create a noise visualizer that will help us maintain silence in class. Instead of using a line, we will visualize the noise with a circle that will grow as the noise level increases. Additionally, our visualizer will display the word SILENCE! when the noise level exceeds a specific value.

Hint: Use the “draw a point at” block to draw the circle, making sure to set the circle’s size based on the detected noise in advance.