app.protobject.com
agsdix-fas fa-child

Colors!

With this activity, you will learn how colors are represented on screens.

info outline icon
Basic Activity; Potentiometer; Main Loop; Color Representation
Open In Protobject

What are we going to do?

Learn
Make
Reflect

Are you a teacher?

Lesson plan

Courses

  • Grades 3-12
  • 3rd grade – 12th grade courses

Materials

  • Cell phone, tablet, or computer
  • Internet connection

Description

In this activity, students can experiment with Protobject, learning about visual programming and computer science in a safe and playful manner.

Educational Objectives

  • Understand the concept of color and how it is represented.
  • Create a technological object (prototype) using a device.
  • Identify relationships between technology and the surrounding world.
  • Evaluate personal and others’ work individually or in a team.
  • Engage in dialogue and reflection on ideas for improvement.

Beginning (10 minutes)

Welcome the students to the class and briefly introduce the activity of the day:

Today, we will learn how colors are represented.

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

To begin the class, we can start with a question:

Do you know how colors are represented?

Color is nothing more than our brain’s interpretation of the light around us. When an object is illuminated, it absorbs a great deal of the received light, reflecting a little. It is precisely this reflected light that reaches our eyes and allows us to see it.

To mix colors, we must not forget that we are talking about light, so to obtain colors, we must find a way to mix the rays of light. Given this, if we mix all the colors of light, we get white light. Conversely, in the absence of color, the absence of light, we get black. In this activity, we will look at the two main models with which colors are mixed and represented: Additive Synthesis and Subtractive Synthesis.

Development (20-30 minutes)

We connect our equipment to the Protobject platform, which will allow us to use the screen we want to create with programming commands that will display the timer.

To carry out the practical part of the activity, you must follow the steps in the “Prototyping” section. Remember to experiment with it yourself before asking the students to experiment with Protobject. This way, you can anticipate any questions that may arise from the students.

Closure (5-10 minutes)

Now that you know how colors work, ask yourself:

– What colors do I need to mix to create my favorite color?
– In what context can Additive Synthesis be used?
– In what context can Subtractive Synthesis be used?
– What other prototype can you think of creating with this new information?

We are ready to continue programming!

To solve the challenge, you can define a variable that changes with each iteration. One way to play with this idea is to create a variable and change which color it controls. This way, we can see how the primary colors affect the final result.

Check the challenge solution.

present
lesson plan
agsdix-fas fa-book-reader

Learn

How do we see colors?

When an object is illuminated, it absorbs a significant amount of the received light, reflecting some of it. It is precisely this reflected light that reaches our eyes and allows us to see it.

For example, if we see a red apple, it means that it is absorbing all the incoming light, except the red. Then, these rays of reflected light reach our eyes, and that’s why we see it as red!

An object that doesn’t reflect light cannot be seen, it’s transparent!

And how do we mix colors?

To obtain colors, we must find a way to mix rays of light. Given this, by mixing all the colors of light, we get white light. Conversely, in the absence of color or light, we get black.

You can even see this in nature. After rain, the moisture in the air is able to separate the white sunlight into all its components… creating a rainbow!

There are currently two models for representing colors: Additive Synthesis and Subtractive Synthesis.

Subtractive Synthesis

In this model, it is said that the color of an object depends entirely on the light it reflects. So, if we change which colors it absorbs and reflects, we say we subtract a color.

In this case, the primary colors considered are Cyan, Yellow, and Magenta, meaning the other colors are derived from these three:

  • Magenta + Cyan = Blue
  • Yellow + Cyan = Green
  • Magenta + Yellow = Red

As we are modifying which colors are absorbed by the object, the sum of the three colors results in Black, as no light would be reflected.

This model is primarily used for objects that do not emit light but only reflect it. Examples of this include color photo printing, hair dyes, and paints.

Additive Synthesis

In this model, color is obtained through the combination of different lights. This allows us to see color separation and reproduce it on screens.

In this case, the primary colors considered are Red, Green, and Blue, and their combinations create secondary colors:

  • Red + Green = Yellow
  • Green + Blue = Cyan
  • Red + Blue = Magenta

Since we are now mixing lights, the combination of the three primary colors results in White Light.

This model is primarily used in color representation on televisions and monitors.

And how does it work on a monitor?

As mentioned earlier, the model used by a monitor is the Additive Synthesis because the monitor emits light, not reflects it.

A monitor is composed of millions of tiny LEDs grouped in threes, each with a primary color. So, to represent a specific color, each LED is lit up at a certain intensity, mixing the lights and forming a color. This is done for every pixel on the screen!

Make

Let’s create a prototype that allows changing the color of a light.

We need 4 devices: 1 light and 3 rotary knobs (one for each primary color).

1

Click on Add device, select Lamp, and press Open in this window to open the lamp on the same computer.

2

Click on Devices → Add device and select Knob, then scan the QR code with the first smartphone to control the red color.

3

Open two more devices of type Knob on two other smartphones, to control the green and blue colors.

We are ready to start prototyping!

Code composition

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

Reflect

Now that you know how colors work, ask yourself:

What colors do you need to mix to create your favorite color?
In what contexts can Additive Synthesis be used?
In what contexts can Subtractive Synthesis be used?

plus square icon

Challenge: Let’s create a lamp that gradually changes color without being controlled by one or more knobs!

Hint: You can use a loop to increment a variable from 0 to 100 (using a timer) and use this variable as the color value. You could play with different variables for different primary colors.

In the next activity, we will create a tilt sensor for hanging pictures!