Lab W4: Introducing Arduino programming
using Wokwi

Update note 3/3:
- Changed 1023 to 255 in setColor() function (highlighted in yellow)

Using Arduino
Programming in the Arduino IDE is built on C / C++ functions1. In particular, we make use of functions
called “wiring”, which have been created with the purpose of making input/outputs operations easier
for the user. An Arduino program is called a sketch.

As with any other embedded system code, it has to run in a continuous loop, and in the case of the
Arduino two functions need to be present:

• setup( )
• loop( )

The setup( ) runs only once, at the beginning of code execution, and the loop( ) operates cyclically.
Thus, setup( ) is used to initialize pins or functions, and the loop( ) is used to run the application (even
if they are not used, they still have to be declared albeit empty). As with other instances of setup( ) and
loop( ), these are declared with ‘void’ statements (meaning that they do not return a value but are
‘empty’). Functions are enclosed in curly brackets { }. So, the structure would be to declare a void
statement, then open a function statement which contains the statements for the function. Statements
have their arguments in brackets ( ) and are terminated by semi-colon (;). You can add comments using
a double backslash (//).

Making the onboard LED blink
Set Up the Wokwi emulator
1. Open www.wokwi.com
2. Select Arduino Uno
3. In this exercise, we are just going to flash a red LED which is located on the Uno board next
to the ‘L’, to the left of the Arduino logo on the simulator

int led = 13; // define the LED we are going to use as the onboard LED which is at port 13

void setup(){
pinMode(led, OUTPUT); // define port 13 mode to the output
}

void loop(){
digitalWrite(led, HIGH); //turn on the LED
delay(1000); //wait for 1s
digitalWrite(led, LOW); //turn off the LED
delay(1000); //wait for 1s
}


1 You can download this from here: https://www.arduino.cc/en/main/software

If you change the defined port (i.e., edit the first line to read int led = 0; ) you will make the yellow
LED next to the RX flash.

Try it yourself
1. Try to change the delay and see what happens. Note: PWM doesn’t work well on Wokwi.
2. Try to connect a button to turn on and off the LED. You can use week 4 lecture slides.


Controlling a three-colour LED
1. Open www.wokwi.com
2. Select Arduino Uno
3. Use the purple plus button to open the list of components


4. Select the RGB LED. The RGB LED has four pins – one for each colour and one labelled
‘com’ (com = common?). Connect com to 5V. Then connect each of the other pins to
separate PWM pins (these are labelled with ~). For ‘real’ circuits, you would place 100k ohm
resistors between the LED pins and Uno pins (as protection) and you would also check
whether you are using Common Anode or Common cathode LEDs (in Wokwi the model is a
common anode which connects to power, or 5V, but a common cathode connects to gnd. The
longest pin on the RGB LED is the cathode or anode pin – if you’re not sure, it is a good idea
to see if it works with connection to ground first).



5. Define the ports that we are using

int RedPin = 9;
int BluePin = 10;
int GreenPin = 11;

6. Define the mode for each port – these will all be used as Output.

void setup() {
pinMode(RedPin, OUTPUT);
pinMode(BluePin, OUTPUT);
pinMode(GreenPin, OUTPUT);
}

7. Specify the order in which we want to the colours to appear on the LED, with a 1s delay between
each colour. Note: this will not give the colours we expect… don’t panic.

void loop() {
setColor(255, 0, 0); // red
delay(1000);
setColor(0, 255, 0); // green
delay(1000);
setColor(0, 0, 255); // blue
delay(1000);
}

void setColor(int red, int green, int blue)
{
analogWrite(RedPin, red);
analogWrite(GreenPin, green);
analogWrite(BluePin, blue);
}

8. Using this code, we don’t get the colours we expect, i.e., the colours cycle through light blue;
purple; yellow. This is because we are driving the anode. We simply need to invert the
colours, i.e., by subtracting the colour from 255, which can easily do by modifying the final
block of code to read:

void setColor(int red, int green, int blue)
{
analogWrite(RedPin, 255-red);
analogWrite(GreenPin, 255-green);
analogWrite(BluePin, 255-blue);
}

You could add more colours to the setColor routine, e.g.,

setColor(255, 255, 0); // yellow
delay(1000);
setColor(80, 0, 80); // purple
delay(1000);
setColor(0, 255, 255); // aqua
delay(1000);

Using rotary potentiometers to change the colours
A rotary potentiometer is a control which can be rotated to increase or decrease current. We connect
this to an analog input pin on the Arduino and then relate the current from the potentiometer to RGB
colour using Pulse-Width Modulation (at the end of this tutorial, I have a short explanation of PWM).

3. Use the purple plus button to open the list of components

4. Select one RGB LED and three Potentiometers from the menu
5. You can select any of the elements and move them. You can use ctrl-R on a select item to
rotate it.

6. Each potentiometer has three pins. These are labelled Gnd, Sig, VCC. Gnd on the
potentiometers are connected to Gnd on the Uno. To wire the connection, click on gnd on
one of the potentiometers and gnd on the Uno. This produces a wired connection. For
ground, this will be black. Connect the VCC on the potentiometer to 5V on the Uno.
Connect the signal (sig) pins on the potentiometers to separate Analog pins.


7. Next, we need to tell the code what connections we have made. Assume that we have called
the Potentiometers, pot1, pot2, pot3 (labelled from top to bottom). In the code window we
define these as:

const int pot1 = A0;
const int pot2 = A1;
const int pot3 = A2;

8. We do the same for each of the driving pins for the RGB LED:

const int red = 3;
const int green = 5;
const int blue = 6;

9. The setup part of the code defines whether the pins are being used for input or output.
Remember that Arduino pins are GPIO (meaning general purpose input output) so we need to
specific which mode they are using.

void setup() {
pinMode(red, OUTPUT);
pinMode(green, OUTPUT);
pinMode(blue, OUTPUT);
pinMode(pot1, INPUT);
pinMode(pot2, INPUT);
pinMode(pot3, INPUT);
}

10. We also, because we are using the Pulse-Width Modulation capability of the ~ pins, need to
define how we want to apply PWM.

int readPot(int pin) {
return map(analogRead(pin), 0, 1023, 0, 255);
}

Notice that this uses the ‘map’ function and has two ranges (0 -1023) and (0-255). In the Arduino, the
analog read function has 10-bit resolution. This means that the input can be divided into 2^10 discrete
elements which, means from 0 to 1023. The Arduino PWM, however, has an 8-bit resolution. So, divides
input into 2^8 (or 256 discrete elements). So, the map function converts from the analog read 0-1023 to the
PWM 0 -255.


//define operations which pair potentiometer setting to RGB LED component
void loop() {
analogWrite(red, 255-readPot(pot1));
analogWrite(green, 255-readPot(pot2));
analogWrite(blue, 255-readPot(pot3));
}

Remember that, in the first exercise we subtracted the value from the maximum? To correct for
colour here, we subtract our potentiometer readings from the maximum PWM.
Try removing the ‘1023-‘ parts from the void loop. You should see light blue, purple, yellow. You
can produce red, green, blue (even with this setting) simply by setting pairs of potentiometers to their
maximum settings.

Add the ‘1023-‘ back into the void loop, and experiment with setting pairs of potentiometers to
maximum settings. You should find that blue + red = purple; red + green = yellow; blue + green =
cyan.

Try replacing the rotary potentiometers with slide potentiometers (from the menu). The code should
still work OK.

Pulse-Width Modulation
We use PWM to generate pulse to represent the amplitude of an analog input signal to be used by a
digital controller. In effect, we are converting AC signal into DC (where the DC signal is either ON
or OFF).
Frequency: the rate at which a transistor is switching from OFF to ON. An 8-bit microcontroller with
have a frequency 4MHz to 80MHz. If we assume that it is generating a pulse of 20MHz for PWM,
this given a time period, t, for a single pulse = 1 / 20MHz = 0.05micro-seconds.
Duty Cycle: the ON period of the pulse.

Try it yourself
1. Try to tweak the map() function to change the behaviour of the LED.
2. (Advanced) Use seven segment display and a potentiometer to display numbers between 0
and 9.