Teaching colour addition with a STEM educational resource based on Arduino and Processing Development Environment

STEM Education is an important topic in today’s educational paradigm. The knowledge in the STEM area will be important to everyone because to solve real-world problems it is necessary to have information from different areas of knowledge. In this perspective we present an educational resource that combines the contents of physics (colour addition with LEDs), engineering (circuit assembly), technology (Arduino platform and Processing, an open-source programming language and integrated development environment), and mathematics (number handling and unit conversion). Although there are many examples in the literature regarding the study of colour addition, the educational resource here presented brings a novelty for the students. With a very intuitive setup and a simulation, students are able to understand colour addition perceived by the human eyes from two different mechanisms simultaneously: the colour seen on a computer screen and the colour produced by an RGB LED. This STEM activity uses a very simple and affordable experimental setup (less than 30 dollars, excluding the computer) and it is a clear example of how technology enhanced learning in science can be incorporated in the classroom for teaching physics in a very engaging context.


Introduction
In the educational paradigm of today's society, STEM (Science, Technology, Engineering and Mathematics) education is a crucial subject.According to Sjøberg et al. [1], advances in science and technology will undoubtedly affect the emergence of new occupations, some of which are still unknown and will only come to our knowledge in the future.It is also asserted that people will be benefitted from having a comprehension of the STEM fields because it takes the understanding from many different fields to address problems in the real world [2].
Even though STEM education has been accepted as an important way to approach students and motivate them to the STEM areas, it is possible to find in the literature different views on how these areas should be integrated.Sanders [3] argues that an integrated STEM education should be treated as "approaches that explore teaching and learning between or among any two or more of the STEM subject areas, and/or between a STEM subject and one or more other school subjects" (p.21).According to Moore et al. [4], integrated STEM education is "an effort to combine some or all of the four disciplines of science, technology, engineering, and mathematics into one class, unit, or lesson that is based on connections between the subjects and real-world problems" (p.38).However, Kelley and Knowles [5], define integrated STEM education as "the approach to teaching the STEM content of two or more STEM domains, bound by STEM practices within an authentic context for the purpose of connecting these subjects to enhance student learning" (p.3).
Based on any of the definitions mentioned above, this paper presents an experimental setup that offers a teaching tool that combines all areas of STEM: physics concepts (Stem), related to colour addition using an RGB LED; technology (sTem), using the open-source Arduino platform, widely used for the development of technological projects, and Processing, also an open-source programming language and integrated development environment; engineering (stEm), from circuit assembly to the everyday use of LED technology, such as screens and displays; and mathematics (steM), for number manipulation and unit conversion.

Method
In this section and following subsections, there will be a brief description about Arduino [6], Processing [7] and how to integrate them.

Arduino and Processing
Arduino is an open-source electronics platform based on simple hardware and software, designed for anyone interested in crafting interactive projects.This versatile platform can manipulate lights, motors, and other actuators to impact its surroundings while concurrently collecting data from a variety of sensors.By employing the Arduino development environment and programming language, one can provide specific instructions for its operation [6].
This microcontroller board may be used from entertaining setups to industrial processes passing through educational purposes.Through its interface (software) it is possible to program Arduino's board (hardware) to control electronic circuits and receive data from sensors, including creating and developing projects for educational purposes such as colour addition.
On the other hand, the Processing software encourages literacy in the visual arts and in technology.Processing offers a versatile software sketchbook and an open-source language that makes it possible for beginners to learn how to code.Processing is used for learning and prototyping by tens of thousands of students, artists, designers, researchers, and hobbyists.[7].It enables the creation of visual and interactive applications using a simplified syntax and set of pre-built functions allowing the use of graphics, animation, and interaction even for people with little to no programming experience [7].
By combining Arduino and Processing, it becomes possible to bridge the real (Arduino) and virtual (Processing) worlds, making it an effective approach for teaching physics, specifically in the context of colour addition.

Arduino in physics teaching.
Using Arduino to control an RGB LED has been already presented as a viable choice to show colour addition [8], and to accomplish this result is quite simple.All we need is an Arduino UNO, a protoboard, wires, three 10 kΩ potentiometers, a common cathode RGB LED and three resistors.The main goal is to obtain secondary colours such as yellow, cyan and magenta by adding the primary colours red, green and blue and finally obtain white when all primary colours are added together.It is important, therefore, to test beforehand which combination of resistors are best suited for each RGB LED leg so it produces the colours as expected.One possible choice of resistors values are 5,0 kΩ, 10 kΩ and 4,7 kΩ to the red, green and blue legs respectively, as shown in Figure 1.The values of the resistors required for the experiment setup may vary depending on the manufacturer of the RGB LED.

Processing in physics teaching.
The use of Processing [7] for physics teaching is somewhat neglected and probably not the usual choice for most teachers.There is a lack of papers in the scientific literature covering its usefulness, hence it is understandable that not so many teachers or researchers use this tool.However, one may find many projects made with Processing regarding physics models of nature, arts, visual computation, generative arts [9][10][11], etc.In fact, Processing has been used by many users, but usually from the arts and computer sciences, but not physical sciences.Since this tool is very useful for its simplicity in producing visual applications and is also compatible with Arduino, it is possible to integrate them both, as described in the Appendix.

Results
The integration of the experimental setup with Processing is done throughout a visual application (Fig. 2.a.) that visualize the Arduino output for the RGB LED in a decimal scale (range from 0 to 255), in real time.The visual application contains several menus such as "Intro", "Side by side", "Venn diagram" and "Movable circles" as we will explain in the following.The "Side by side" tab shows all primary colours, and the result when they are added (Fig. 2.b.) is compared in real time to that from the RGB LED in the Arduino experimental setup (Fig. 3).This comparison has been previously explored [12].The tab "Venn diagram" is responsible to show the colour addition in the usual way most textbook show the primary colours: by placing circles containing the primary colours over each other intercepting in the middle (Fig. 4).This representation was chosen in order to show conformity to what is usually seen in textbooks and allows students to compare all results: real RGB LED, screen colour addition and textbook results.

Figure 4. Colour addition by intersection of the primary colours
The tab "Movable circles" contains the codes to create three circles that can be moved around (Fig. 5).This new feature allows the user to interact the circles how they want and gives the possibility to explore the colour addition, exactly two by two superimposed or all the three together.One important feature of this new tab is the possibility to reset all circles position as can be seen in the lower right side if the figure 5.

Conclusion
Even though colour addition has been explored by means of an RGB LED and by means of colours appearing in a computer screen, the integration between them is an upcoming new approach that can be explored successfully with the students.The presented app in this work is an educational resource based on a previous study [12] that allows two new ways to visualize and compare in real time the colours' addition in the real word from a RGB LED with the virtual result projected in a computer screen.Theses new features enable teachers to provide new ways of showing colour addition in order to promote a better understanding of the phenomenon.This integration between Arduino, Processing, colour addition, circuit assembly, number manipulation and conversion, stands well suited within an integrated STEM education framework.Further, this new application is suitable for active learning by guided inquiry, or just by means of the teacher's demonstration to the students according to the teacher's educational approach.
The app's code (available at https://www.fc.up.pt/giedif/codes/MPTL.zip)may be deemed complex, but beginner programmers and coders may easily understand and modify it.After unzipping MPTL.zip the file, run MPTL.pdeand follow the instructions on Appendix.Note that Arduino (arduino.cc)and Processing (processing.org)must be previously installed on the computer.

Integrating Arduino and Processing.
There are several ways to pass data and information from Arduino to Processing and vice-versa.Usually all of them will need a library installed in processing called processing.serial in which "The Serial library reads and writes data to and from external devices one byte at a time.It allows two computers to send and receive data.This library has the flexibility to communicate with custom microcontroller devices and to use them as the input or output to Processing programs (...) note that the console is relatively slow.It does not support high-speed, real-time output (such as at 60 frames per second) (...)" [13] Because Arduino can transfer data at a high-rate and sometimes that's not exactly what is desired, only using the serial library is not recommended.One solution is to use another library called cc.arduino which will enable the Arduino board to be controlled directly from the Processing software, as long as Arduino is correctly prepared to receive the information from Processing.To achieve this goal, there are a few steps to be taken, as described in [9] and reproduced here in detail.
In the Arduino software make sure the Firmata library is installed.To do so, open the Arduino software, then proceed to "Sketch" → "Include Library" → "Manage Libraries…".In the Library Manager windows that is opened, search for "Firmata" (blue ellipse) and see if it is installed (red ellipse) (Fig 6).If the library is not installed, a button for automatic installation will appear.

Figure 6. Verification / Installation of Firmata Library
After the Firmata library is installed and with the Arduino board connected to the computer, it is necessary to configure the correct board and to which computer port Arduino is connected.To select the correct board, go to Tools → Board → Arduino UNO if an Arduino UNO is being used (Fig. 7.a).Otherwise, choose the correct board.IOP Publishing doi:10.1088/1742-6596/2693/1/0120057 necessary to take note of which port Arduino is connected to.This may vary according to which computer is being used or what USB port the Arduino is connected to or even other factors.Therefore, one must take note that there are 3 ports whose indexes are 0 (COM7); 1 (COM8) and 2 (COM9) and this knowledge will be needed later.The next step is the upload of the "StandardFirmata" example.To do this go to File → Examples → Firmata → StandardFirmata (Fig. 8)

Figure 8. Selection of the StandardFirmata example
After the example has been loaded, it is ready to be uploaded to the Arduino board.For that, go to Sketch → Upload (Fig. 9).

Figure 9. Uploading the code to the Arduino board
After the "StandardFirmata" has been uploaded to the board, the Arduino is ready to be controlled by the Processing software and all focus is now towards the code in the Processing.

Inside Processing.
The Processing software interface (v.3.5.4) is somewhat like the Arduino software interface.They also share two basic functions with equal results.Arduino uses the void setup() and void loop() function, while Processing has a void setup() and a void draw().Dropping the word "void" for now on (in all functions), in both cases the setup() functions are called at the beginning of the runtime exactly once.
After that, loop()/draw() are executed in an infinite loop.Those functions are located at the main tab of the code called "MPTL" tab which will be approached in more detail just below.

Figure 10. All tabs created for the application development
In the main tab "MPTL" one may find the declaration of global variables and several functions, such as setup(), draw() in lines 31 and 80 respectively, as mentioned above.There are also functions called mousePressed(), mouseReleased() and mouseClicked() which are an easy way to call commands and other functions for actions such as the left button of the mouse has been pressed, released or clicked (pressed and released), on lines 97, 103 and 110 respectively.
In both Arduino and Processing, it is usual to declare global variables, constants and import libraries before the setup().Hence, when connecting Processing to the Arduino we need to import two libraries: processing.serial.*and cc.arduino.*(lines 4 and 5 of the code available) (Fig. 11).These libraries will make it possible to control the Arduino using the code written in Processing.Several other command lines are found before setup() either to set up global variables, or to define objects from classes.It is important to note that Processing is an object-oriented programming (OOP) language which enables the creation of several objects from one same class.
It is very important to note that in line 60 appears the code: arduino = new Arduino(this, Arduino.list()[2], 57600) (Fig. 12).In this line the user may need to change the number inside the square brackets.It all depends on which port the Arduino is connected to the computer.In this case, as shown before, the Arduino was connected to "COM9", the third available port.Therefore, inside the square brackets it is necessary to use the number "2" because it is the third number starting from zero.If the Arduino was connected to the first port, the number inside the square bracket would be "0".The tab called "DraggableCircle" is responsible for defining and creating a class of objects that are allowed to be dragged and moved around.These objects also have other properties, such as size and colour, as examples.This tab contains all information regarding these objects.The creation of this class was based on several works by Daniel Shiffman (https://thecodingtrain.com/).These objects will be used further by the tab called "Movable circles".
The "navigationMenu" tab holds the code and information for the topmost part of the application where the user may choose to which form of colour addition he wants to see.In all other tabs the function navigationMenu() is called in order to make the navigation menu visible (Fig. 13).

Figure 13. View of the navigation menu
The tab "introScreen" is the welcoming screen that shows the title of the application as well as the authors and the research group of the team.

Figure 1 .
Figure 1.Representation of the experimental setup and wiring

Figure 2 .
Figure 2. a. (left) Introduction page of the application in Processing for colour addition.b. (right) A side-by-side view of all primary colours and the result of their addition to obtain white.

Figure 3 .
Figure 3. Combinations of primary colours and the result of their addition from the experimental results.

Figure 5 .
Figure 5. Colour addition by movable circles of primary colour.

Figure 7
Figure 7. a. Selection of the correct Arduino board.b.Selection of the correct port to which Arduino is connected to.Next, to select the correct port in which the Arduino is connected, go to Tools → Port and choose the port indicated by "Arduino Uno" (Fig. 7.b).Here, there is one very important additional step: it is

Figure 11 .
Figure 11.Lines 4 and 5 where the two libraries are being imported.

Figure 12 .
Figure 12.Line 60 where the port must be chosen To control the Arduino board through Processing, we need to invoke specific commands calling the arduino object created from line 7 "Arduino arduino".An example is the command arduino.pinMode(PIN,Arduino.MODE); (lines 63-68) where PIN in the pin number in which a LED