Jenn Hwang

As technology evoles to play a more substantial role in our lives and society, the field of Human-Computer Interaction (HCI) has been gaining more attention. As I was searching for inspiring project topics, I ran into Arduino and p5.js and discovered the cool things you could do when you combine the two. In this blog, I will talk about how I used Arduino and the JavaScript library p5.js to physically interact with my computer (the browser).

1. Arduino - setting up the circuit

First, I would like to introduce Arduino. For those of you familiar with Arduino, feel free to skip this section. Here is a description of Arduino taken from their website:

Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it into an output - activating a motor, turning on an LED, publishing something online. You can tell your board what to do by sending a set of instructions to the microcontroller on the board.

Arduino Uno board connected to my computer and a potentiometer installed on the breadboard.

For this project, the physical setup isn't extremely difficult so don't worry if this is your first time with Arduino. To set up the Arduino, you will need the following items:

Arduino board (green board on the left in the picture)
breadboard (white board on the right in the picture)
potentiometer (blue/white little gadget sitting on the breadboard)
knob (that attaches to the potentiometer)
some wires
USB cable to connect the Arduino to your computer

Before we dive into anything, let's first discuss what a breaboard is.

Schematic: Conductive metal strips underneath the breadboard.

Underneath the breadboard is a layout of conductive metal strips that looks like the schematic above. The two vertical strips under the columns labeled as (+) and (-) are the power and grounding points on the board. The horizontal strips are strips you can use to complete your circuit. Digesting the schematic above is crucial to understanding how the Arduino circuit works. Current always flows from high to low potential energy and voltage is defined to be the difference of potential energy between two points in a circuit. Ehem, putting physics aside, what is important to note here is that we need to power our electrical circuit so that all the wires let the current flow from high to low potential energy.

Now let's build our circuit.

First, we need to power our circuit by connecting a wire from the Arduino's 5V pin (on the left of the board) to the (+) strip on the breadboard. Now, to create the high-to-low energy gradient, we will need to ground our circuit by connecting the GND pin (right below the 5V pin on the Arduino board) to the (-) strip of the board. It is common practice to use a red wire for power and a black wire for ground.

Now that we have our basic setup complete, it's time to add components to our circuit. Referring to the picture above, the potentiometer+knob is the white/blue little gadget placed on rows 21-23 of the breadboard. The potentiometer has 3 terminals -- the outer terminals connect with the electric circuit and the middle one communicates with the Arduino board as it adjusts the voltage. Notice how the potentiometer's outer legs are connected to (+) and (-) so that it completes a circuit. The middle pin, which is sitting on row 22 and column g, connects to the Arduino's A0 port, designed to be one of the analog input pins that read in signals.

Now we are ready to move onto our next step: programming our Arduino using the Arduino IDE.

2. Arduino - coding our program

Let's click on the link above and download and install the Arduino IDE. Once installed and opened, you will realize there are 2 functions already set up for you.

Arduino IDE

The setup function runs only once when you start your Arduino program. As you might have guessed already, the function loop continues to run repeatedly. Now let's do some coding!

void setup() {
    // put your setup code here, to run once:
    Serial.begin(9600);
}

void loop() {
    // put your main code here, to run repeatedly:
    int potentiometer = analogRead(A0);
    int mappedPot = map(potentiometer, 0, 1023, 0, 30);
    Serial.write(mappedPot);
    delay(1);
}

In our setup function, we first make a connection to the serial port. Serial is used for communication between the Arduino board and a computer/other devices. 9600 is a number that specifies the rate at which data is sent (bps).

Now in our main loop function, we read the signal sent from the circuit to the Arduino board with the Arduino function called analogRead();. Because we connected our wire to the A0 input pin, we specify that we want to read the signal input from the A0 pin.

Now we call another Arduino function called map() where it takes 5 arguments -- signal you want to map, min signal, max signal, min mapped signal, max mapped signal. Then we code Serial.write(mappedPot) to send this mapped potentiometer reading to the serial (to our computer).

That's it for the coding part! We are done setting up our Arduino. In the next post, I'll talk about how to set up things on the p5.js end.

HCI , JS , Arduino , p5js , viz

⟵

Previous
Kaggle project: Predicting Titanic Survivors

Next
Exploring HCI with p5.js and Arduino (Part II - p5.js)

⟶

Blog

Exploring HCI with p5.js and Arduino (Part I - Arduino)

1. Arduino - setting up the circuit

2. Arduino - coding our program