PWM – ITP Physical Computing

Lab: Serial Output From p5.js Using the p5.webserial Library

In this lab you’ll learn how to send data from p5.js to a microcontroller using asynchronous serial communication.

Overview

When you use the p5.webserial library for P5.js, it uses the W3C’s WebSerial API to allow your browser to communicate with serial ports on your computer. This lab shows you how to use P5 to control a microcontroller using asynchronous serial communication. WebSerial is currently only available in the Chrome and Chromium browsers and the Microsoft Edge browser, so make sure you’re using one of those to do this lab.

To get the most out of this tutorial, you should know what a microcontroller is and how to program them. You should also understand asynchronous serial communication between microcontrollers and personal computers. You should also understand the basics of P5.js, and should have tried the WebSerial Input to P5.js lab.

Things You’ll Need

For this lab, you’ll need the hardware below,

For this lab, you’ll need the hardware below, and you’ll need the same software setup as the WebSerial Input to P5.js lab: You’ll create a p5.js sketch. You’ll also use the p5.WebSerial library. You can use the p5.js web editor or your favorite text editor for this (the Visual Studio Code editor works well).

*Figure 2. LEDs. Shown here are four LEDs. The one on the right is an RGB LED. You can tell this because it has four legs, while the others have only two legs.*

*Figure 3. Resistors. Shown here are 220-ohm resistors. You can tell this because they have two red and one brown band, followed by a gold band.*

An 8 ohm speaker with 2 wires solder to the speakers leads — *Figure 4. An 8 ohm speaker (optional).This is a good alternate to the LED if you prefer audible output.*

Prepare the breadboard

Connect power and ground on the breadboard to power and ground from the microcontroller. On the Arduino Uno, use the 5V and any of the ground connections. On the Nano, use 3.3V and the ground connections:

Arduino Nano on a breadboard. — *Figure 6. Breadboard view of an Arduino Nano mounted on a breadboard.*

The +3.3 volts and ground pins of the Arduino Nano are connected by red and black wires(Figure 6), respectively, to the left side rows of the breadboard. +3.3 volts is connected to the left outer side row (the voltage bus) and ground is connected to the left inner side row (the ground bus). The side rows on the left are connected to the side rows on the right using red and black wires, respectively, creating a voltage bus and a ground bus on both sides of the board.Figure 5. Breadboard view of an Arduino Nano connected to a breadboard. The +3.3 volts and ground pins of the Arduino are connected by red and black wires, respectively, to the left side rows of the breadboard. +3.3 volts is connected to the left outer side row (the voltage bus) and ground is connected to the left inner side row (the ground bus). The side rows on the left are connected to the side rows on the right using red and black wires, respectively, creating a voltage bus and a ground bus on both sides of the board.

Made with Fritzing

Add an LED

Connect the LED and resistor to digital I/O pin 11 of the module(Figure 7-8). Alternately, you can replace the 220-ohm LED with a speaker (Figure 9-10). You’ll find code below that uses tones instead of LEDs where appropriate. For more on how to do that, see the Tone Output lab:

Schematic view of an Arduino connected to an LED. Digital pin 5 is connected to a 22-ohm resistor. The other side of the resistor is connected to the anode (long leg) of an LED. The cathode of the LED is connected to ground. — *Figure 7. Schematic view of an Arduino connected to an LED.*

Breadboard view of an Arduino connected to an LED. The +5 volts and ground pins of the Arduino are connected by red and black wires, respectively, to the left side rows of the breadboard. +5 volts is connected to the left outer side row (the voltage bus) and ground is connected to the left inner side row (the ground bus). The side rows on the left are connected to the side rows on the right using red and black wires, respectively, creating a voltage bus and a ground bus on both sides of the board. A blue wire connects Digital to a 22-ohm resistor that straddles the center divide of the breadboard in row 17. The other side of the resistor is connected to the anode (long leg) of an LED. The LED is mounted in rowsd 16 and 17 of the right side of the center section of the board. a black wire connects the cathode's row, row 16, to the ground bus on the right side of the board. — *Figure 8. Breadboard view of an Arduino connected to an LED.*

Figure 9 shows a breadboard view of an LED connected to digital pin 5 of an Arduino Nano. The Nano straddles the center of the breadboard in the first fifteen rows. The Nano’s voltage pin (physical pin 2) connects to the board’s voltage bus, and the Nano’s ground pin (physical pin 14) connects to the board’s ground bus. The LED is in the right center of the board, with its anode in one row and the cathode in the next. A 220-ohm resistor connects the LED’s anode to a wire connecting to digital pin 5. The LED’s cathode is connected to the ground bus.

Breadboard view of an Arduino Nano connected to two force sensing resistors (FSRs) and a speaker. The Nano’s 3.3 Volts (physical pin 2) and ground (physical pin 14) are connected to the voltage and ground buses of the breadboard as usual. The red positive wire of the speaker is connected to digital pin 5 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the resistor connects to ground. — *Figure 10. Breadboard view of an Arduino Nano connected to a speaker to digital pin 5.*

Figure 10 shows a breadboard view of an Arduino Nano connected to a speaker. The Nano’s ground (physical pin 14) is connected to the ground bus of the breadboard as usual. The red positive wire of the speaker is connected to digital pin 5 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the resistor connects to ground.

Program the Microcontroller

Program your Arduino to read the analog input as follows:

void setup() {
  Serial.begin(9600);     // initialize serial communications
  pinMode(5, OUTPUT);
}
 
void loop() {
  if (Serial.available() > 0) { // if there's serial data available
    int inByte = Serial.read();   // read it
    Serial.write(inByte);         // send it back out as raw binary data
    analogWrite(5, inByte);       // use it to set the LED brightness
    // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
    //  tone(5, inByte*10);     // play tone on pin 5
  }
}

Only one port at a time can access a serial port.

As you work on this any microcontroller-to-computer application, you will be switching back and forth between the app that programs the microcontroller (in this case, the Arduino IDE) and the app that the microcontroller is communicating with (in this case, p5.js in the browser). You have to keep in mind that only one of these at a time can access a serial port.

That means that when you want to reprogram your Arduino from the Arduino IDE, you should to stop your sketch in the browser window to do so. Then, restart the browser sketch when you’re done reprogramming the Arduino. You don’t need to quit the Arduino IDE each time, because it knows to release the serial port when it’s not programming. However, you do need to close the Serial Monitor in the Arduino IDE when you are using WebSerial in the browser.

The P5.js WebSerial Library

To communicate with your microcontroller serially, you’re going to use the P5.js WebSerial library. If you’re using the p5.js web editor, make a new sketch. Click the Sketch Files tab, and then choose the index.html file. In the head of the document, look for this line:

1	`<script` `src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>`

Right after that line, add this line:

1	`<script` `src="https://unpkg.com/p5-webserial@0.1.1/build/p5.webserial.js"></script>`

The P5.js Sketch

The sketch you’re going to write will control the microcontroller’s LED from P5.js. Dragging the mouse up and down the canvas will dim or brighten the LED, and typing 0 through 9 will set the LED’s brightness in increments from off (0) through almost full brightness (9). There’s an alternate sketch that will make changing tones if you prefer that instead of a changing LED. The sketch will also receive serial input from the microcontroller just as in the WebSerial Input to P5.js lab, so that you can see that the microcontroller is getting the same values you’re sending.

The setup of your sketch will initialize the P5.webserial library and define your callback functions for serial events. Program the global variables and setup() function as follows:

// variable to hold an instance of the p5.webserial library:
const serial = new p5.WebSerial();
 
// HTML button object:
let portButton;
let inData;                            // for incoming serial data
let outByte = 0;                       // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  // check to see if serial is available:
  if (!navigator.serial) {
    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");
  }
  // if serial is available, add connect/disconnect listeners:
  navigator.serial.addEventListener("connect", portConnect);
  navigator.serial.addEventListener("disconnect", portDisconnect);
  // check for any ports that are available:
  serial.getPorts();
  // if there's no port chosen, choose one:
  serial.on("noport", makePortButton);
  // open whatever port is available:
  serial.on("portavailable", openPort);
  // handle serial errors:
  serial.on("requesterror", portError);
  // handle any incoming serial data:
  serial.on("data", serialEvent);
  serial.on("close", makePortButton);
}
 
function draw() {
 
}

For now you’re leaving the draw() function empty. You’ll fill it in later. You’ll be adding some functions to read mouse dragging and key pressing as well.

Program the handler functions similarly to those in the WebSerial Input to P5.js lab:

// if there's no port selected, 
// make a port select button appear:
function makePortButton() {
  // create and position a port chooser button:
  portButton = createButton("choose port");
  portButton.position(10, 10);
  // give the port button a mousepressed handler:
  portButton.mousePressed(choosePort);
}
 
// make the port selector window appear:
function choosePort() {
  serial.requestPort();
}
 
// open the selected port, and make the port 
// button invisible:
function openPort() {
  // wait for the serial.open promise to return,
  // then call the initiateSerial function
  serial.open().then(initiateSerial);
 
  // once the port opens, let the user know:
  function initiateSerial() {
    console.log("port open");
  }
  // hide the port button once a port is chosen:
  if (portButton) portButton.hide();
}
 
// read any incoming data as a byte:
function serialEvent() {
  // read a byte from the serial port:
  var inByte = serial.read();
  // store it in a global variable:
  inData = inByte;
}
 
// pop up an alert if there's a port error:
function portError(err) {
  alert("Serial port error: " + err);
}
 
// try to connect if a new serial port 
// gets added (i.e. plugged in via USB):
function portConnect() {
  console.log("port connected");
  serial.getPorts();
}
 
// if a port is disconnected:
function portDisconnect() {
  serial.close();
  console.log("port disconnected");
}
 
function closePort() {
  serial.close();
}

Program the draw() function to display the value of any incoming serial bytes. Here it is:

function draw() {
  // black background, white text:
  background(0);
  fill(255);
  // display the incoming serial data as a string:
  text("incoming value: " + inData, 30, 30);
}

To read the mouse and keyboard, you’ll need to write functions to respond to the ‘mouseDragged’ and ‘keyPressed’ events. ‘MouseDragged’ will happen whenever you click and drag the mouse on the canvas. When that happens, read the mouseY, and map its position on the canvas to a value from 0 to 255. Convert the result to a number using the int() function. Then send it out the serial port using the serial.write() function:

function mouseDragged() {
  // map the mouseY to a range from 0 to 255:
  outByte = byte(map(mouseY, 0, height, 0, 255));
  // send it out the serial port:
  serial.write(outByte);
}

The serial.write() function is versatile. If you give it a variable or literal that’s a numeric data type, it will send it as its raw binary value. In the code above, note how you’re converting the output of the map() function to a number using the int() function. If you give it a string, however, it will send out that ASCII string. So be aware of the difference, and make sure you know whether your serial receiving device wants raw binary or ASCII-encoded data.

Program the keyPressed() function similarly to the mouseDragged() function. You want it to read the key strokes, convert them to raw bytes, and send them out the serial port. But you only want to send them if they key hit was 0 through 9. The P5.js variable key returns a numeric value, so you can do math on it and convert it like so:

function keyPressed() {
  if (key >= 0 && key <= 9) { // if the user presses 0 through 9
    outByte = (key * 25); // map the key to a range from 0 to 225
    serial.write(outByte); // send it out the serial port
  }
}

That’s all you want your sketch to do, so try running it now. You should see that the initial incoming serial value is undefined, but when you drag the mouse up and down, or type 0 through 9, it will update when the Arduino program returns what it received. The LED will also change with these actions.

You can see this sketch running on gitHub at this link. You can get the full text of it at this link.

Sending ASCII-Encoded Serial Data

When you send data from p5.js using p5.webserial, the serial.write() function works like it does in Arduino: it sends numbers as binary data. In the programs above, you’re sending binary data from p5.js and reading it as binary in Arduino.

If you want to send ASCII-encoded serial data from P5.js instead, all you have to do is to serial.print() or serial.println() your string. On the Arduino side, you can read single characters one byte at a time simply as well. However, if you want to convert multi-byte number strings to numeric values, you’ll need a new function to read ASCII encoded numeric strings called parseInt().

Program the Microcontroller Again

To start off with, load a sketch from the Arduino examples called PhysicalPixel. You can find it in the File Menu -> Examples -> Communication -> PhysicalPixel. Here’s what it looks like. Change the LED pin number to pin 5 as follows:

const int ledPin = 5; // the pin that the LED is attached to
int incomingByte;     // a variable to read incoming serial data into
 
void setup() {
  Serial.begin(9600);             // initialize serial communication
  pinMode(ledPin, OUTPUT);        // initialize the LED pin as an output
}
 
void loop() {
  if (Serial.available() > 0) { // see if there's incoming serial data
    incomingByte = Serial.read(); // read it
    if (incomingByte == 'H') {    // if it's a capital H (ASCII 72),
      digitalWrite(ledPin, HIGH); // turn on the LED
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      //  tone(5, 440);           // play middle A on pin 5
    }
    if (incomingByte == 'L') {    // if it's an L (ASCII 76)
      digitalWrite(ledPin, LOW);  // turn off the LED
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      // noTone(5);
    }
  }
}

When you run this, open the serial monitor and type H or L, and the LED will go on or off. Try typing h or l instead. The LED won’t change, because H and h have different ASCII values, as do L and l. But you can see from this that you don’t need to memorize the ASCII chart to check for character values in your code. Put the character you want to read in single quotes, and the Arduino compiler will automatically convert the character to its ASCII value for you. It only works for single characters, though.

Program P5.js To Control the LED

To get P5.js to control this Arduino program serially, you only need to add to the keyPressed() function to read H or L in addition to 0 through 9. Here’s your new mousePressed() function:

function keyPressed() {
  if (key >= 0 && key <= 9) {
    // if the user presses 0 through 9
    outByte = byte(key * 25); // map the key to a range from 0 to 225
    serial.write(outByte); // send it out the serial port
  }
  if (key === "H" || key === "L") {
    // if the user presses H or L
    serial.write(key); // send it out the serial port
  }
}

Because the key is already a single character, P5.js sends it out as is, and Arduino reads it as a single byte, looking for the ASCII value of H or L. Notice how the values returned to P5.js are 72 and 76, the ASCII values for H and L. For single characters like this, exchanging data is simple.

If you tried to change the LED with the mouse, you didn’t see anything happen unless your output value was 72 or 76. Why is that?

To see the sketch running on GitHub at this link. You can see the source files for copying into the p5.js editor at this link.

Processing ASCII-Encoded Strings With Arduino

It is also possible to read and interpret ASCII-encoded strings in Arduino. The String.parseInt() function reads an incoming string until it finds a non-numeric character, then converts the numeric string that it read into a long integer. This is a blocking function, meaning that String.parseInt() stops the program and does nothing until it sees a non-numeric character, or until a timeout passes. The timeout is normally one second (or 1000 milliseconds), but you can set it to a lower number of milliseconds using Serial.setTimeout(). Here’s a variation on the original Arduino sketch from above, using Serial.parseInt() this time:

void setup() {
  Serial.begin(9600);    // initialize serial communications
  Serial.setTimeout(10); // set the timeout for parseInt
  pinMode(5, OUTPUT);
}
 
void loop() {
  if (Serial.available() > 0) { // if there's serial data available
    int inByte = Serial.parseInt(); // read it
    if (inByte > 0) {
      Serial.write(inByte);      // send it back out as raw binary data
      analogWrite(5, inByte);    // use it to set the LED brightness
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      //  tone(5, inByte*10);     // play tone on pin 5
    }
  }
}

Upload this to your microcontroller, then open the Serial Monitor and send in some ASCII numeric strings. You’ll see the character that’s represented by the string’s value. For example, 65 will return A, 34 will return “, and so forth.Notice that this version of the sketch has a conditional statement to check if the incoming byte is 0. This is because of a quirk of the parseInt() function. It returns 0 if the timeout is hit, or if the string is legitimately 0. This means you can’t really parse for a string like this: "0\n".

Program p5.js To Send a String

Now that your microcontroller is expecting a string, program P5.js to send one. This means changing the mouseDragged() function. Program it to print a string with a newline at the end using the serial.println() command like so:

1	`serial.println(outByte);`

Since the newline added at the end by serial.println() is a non-numeric character, the Serial.parseInt() function will see it and parse the string, not waiting for the timeout.

To see the sketch running on GitHub at this link. You can see the source files for copying into the p5.js editor at this link.

Conclusion

When you’re sending data between two computers using asynchronous serial communication, you have to make sure that what the sender is sending is formatted the same as what the receiver is listening for. See Table 1 to review what are suitable data formats for different types/sizes of data and which functions to use on p5.js and Arduino for serial communication.

Number of Bytes	1 Byte		Multi Bytes
Data to Send	A single number < 255	A single character	A single number > 255, multiple values
Send as:	Binary	Ascii	Ascii
p5.js ->	serial.write(integer)	serial.write(string)	serial.write (valueToSend + ",")
-> Arduino	Serial.read()		Serial.parseInt()

Table 1. Serial Communication: p5.js to Arduino

Think this out in advance before you code, then consider what functions you’ve got on both computers to convert data from strings to raw binary numbers and back. Test with fixed values at first, so you know you’re getting what you think you should. For example, sending an ASCII-encoded numeric string like this:

1023\n

Will always result in these six bytes:

49 48 50 51 10

Likewise, this text string:

Hello\n

will always be:

72 101 108 108 111 10

By sending a string you know both the ASCII and raw binary representations of, you can test your code easier, because what you’re sending won’t change. Once you know the sending and receiving works, then you can send variable strings.

The more you work with serial data, the more you’ll become familiar with the methods for handling it.

For more on serial flow control in P5.js, see the Two-Way Duplex Serial Communication Using p5.WebSerial Lab.

Lab: Serial output from P5.js Using the p5.serialport Library

In this lab you’ll learn how to send data from p5.js to a microcontroller using asynchronous serial communication.

Overview

When you use the p5.serialport library for P5.js, it communicates with a webSocket server in the P5.js IDE to give you access to serial devices attached to your computer. This lab shows you how to use P5 to control a microcontroller using asynchronous serial communication.

Things You’ll Need

For this lab, you’ll need the hardware below,

For this lab, you’ll need the hardware below, and you’ll need the same software setup as the Serial Input to P5.js lab: You’ll create a p5.js sketch. You’ll also use the p5.serialport library and the P5.serialcontrol app. You can use the p5.js web editor or your favorite text editor for this (the Visual Studio Code editor or the Atom text editor work well).

Prepare the breadboard

Connect power and ground on the breadboard to power and ground from the microcontroller. On the Arduino UNo, use the 5V and any of the ground connections. On the Nano, use 3.3V and the ground connections:

Made with Fritzing

Add an LED

Program the Microcontroller

Program your Arduino to read the analog input as follows:

void setup() {
  Serial.begin(9600);           // initialize serial communications
}
 
void loop() {
  if (Serial.available() > 0) { // if there's serial data available
    int inByte = Serial.read();   // read it
    Serial.write(inByte);         // send it back out as raw binary data
    analogWrite(5, inByte);       // use it to set the LED brightness
    // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
    //  tone(5, inByte*10);     // play tone on pin 5
  }
}

The P5.js serialport library

To communicate with your microcontroller serially, you’re going to use the P5.js serialport library and the p5.serialcontrol app. The P5.js serialport library can’t access your serial ports directly when a sketch is running in a browser because the browser doesn’t have direct access to the serial port. But it can communicate with another program on your computer that can exchange data with the serialport. p5.serialcontrol is the app that connects your sketch, running in a browser, with the serial ports on your computer as shown in Figure 11.

Diagram of three rectangles connected by arrows. The rectangle on the right represents your p5.js sketch, running in a browser. Your sketch implements the p5.serialport library. Your sketch connects to p5 serial control, the middle rectangle, via a webSocket. The p5 serial control application runs on your laptop. It connects to a serial port on your computer and listens for webSocket connections from your p5.js sketch. It passes whatever comes in the serial port through to the webSocket and vice versa. The third rectangle is your Arduino, connected to p5 serial control via the serial port. — *Figure 11. Diagram of the connection from the serial port to p5.js through p5.serialcontrol*

Once you gain an understanding of serial communication, you can use any program that can connect with your computer’s serial ports to communicate with a microcontroller. Processing, Max/MSP, and OpenFrameworks are three other popular multimedia programming environments that can communicate via the serial ports. You can also do this with Unity, Unreal, or any other programming environment that can access the serial ports.

Install the P5.serialcontrol App

Download the latest version of the P5.serialcontrol application and save it in your Applications folder. When you run it, it will check serial ports on your machine. You don’t need to do anything with the app, just have it open. However, remember this most important fact:

Only one port at a time can access a serial port.

That means that when you want to reprogram your Arduino from the Arduino IDE, you need to quit p5.serialcontrol to do so. Then, reopen p5.serialcontrol when you’re done reprogramming the Arduino. You don’t need to quit the Arduino IDE each time, because it knows to release the serial port when it’s not programming. However, you do need to close the Serial Monitor in the Arduino IDE when you are using p5.serialcontrol.

You’ll need to know the name of your serial port to get started. If you’re not sure how to get this, see the Serial Input to P5.js lab for how to get a list of ports.

The P5.js Sketch

The sketch you’re going to write will control the microcontroller’s LED from P5.js. Dragging the mouse up and down the canvas will dim or brighten the LED, and typing 0 through 9 will set the LED’s brightness in increments from off (0) through almost full brightness (9). There’s an alternate sketch that will make changing tones if you prefer that instead of a changing LED. The sketch will also receive serial input from the microcontroller just as in the Serial Input to P5.js lab, so that you can see that the microcontroller is getting the same values you’re sending.

Program P5.js For Serial Communication

Make a P5.js sketch. If you’re using the p5.js web editor, make a new sketch. Click the Sketch Files tab, and then choose the index.html file. In the head of the document, look for this line:

1	`<script` `src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>`

Right after that line, add this line:

1	`<script` `language="javascript"` `type="text/javascript"` `src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>`

The setup of your sketch will initialize the P5.serialport library and define your callback functions for serial events. Program the global variables and setup() function as follows:

var serial;          // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1421'; // fill in your serial port name here
var inData;                            // for incoming serial data
var outByte = 0;                       // for outgoing data
 
function setup() {
  createCanvas(400, 300);          // make the canvas
  serial = new p5.SerialPort();    // make a new instance of the serialport library
  serial.on('data', serialEvent);  // callback for when new data arrives
  serial.on('error', serialError); // callback for errors
  serial.on('list', printList);       // set a callback function for the serialport list event
  serial.list();                   // list the serial ports
  
  serial.open(portName);           // open a serial port
}

You’re only using the ‘data’ and ‘error’ and ‘list’ callbacks this time, but you can add the other serial callbacks if you want them. You can also add a serialport select menu as you did in the Serial Input to P5.js lab if you wish.

Program the serialEvent() function and serialError() function similarly to those in the previous lab. They read incoming data (serialEvent()) and report any errors (serialError()), as follows:

function serialEvent() {
  // read a byte from the serial port:
  var inByte = serial.read();
  // store it in a global variable:
  inData = inByte;
}
 
function serialError(err) {
  println('Something went wrong with the serial port. ' + err);
}

Program the draw() function to display the value of any incoming serial bytes. Here it is:

function draw() {
  // black background, white text:
  background(0);
  fill(255);
  // display the incoming serial data as a string:
  text("incoming value: " + inData, 30, 50);
}

function mouseDragged() {
  // map the mouseY to a range from 0 to 255:
  outByte = int(map(mouseY, 0, height, 0, 255));
  // send it out the serial port:
  serial.write(outByte);
}

function keyPressed() {
  if (key >= 0 && key <= 9) { // if the user presses 0 through 9
    outByte = byte(key * 25); // map the key to a range from 0 to 225
  }
  serial.write(outByte); // send it out the serial port
}

Sending ASCII-Encoded Serial Data

If you want to send ASCII-encoded serial data from P5.js, all you have to do is to serial.write() your string. Sending strings is the P5.serialport’s default behavior. On the Arduino side, you can read single characters one byte at a time simply as well. However, if you want to convert multi-byte number strings to numeric values, you’ll need a new function to read ASCII encoded numeric strings called parseInt().

Program the Microcontroller Again

const int ledPin = 5; // the pin that the LED is attached to
int incomingByte;     // a variable to read incoming serial data into
 
void setup() {
  Serial.begin(9600);             // initialize serial communication
  pinMode(ledPin, OUTPUT);        // initialize the LED pin as an output
}
 
void loop() {
  if (Serial.available() > 0) { // see if there's incoming serial data
    incomingByte = Serial.read(); // read it
    if (incomingByte == 'H') {    // if it's a capital H (ASCII 72),
      digitalWrite(ledPin, HIGH); // turn on the LED
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      //  tone(5, 440);           // play middle A on pin 5
    }
    if (incomingByte == 'L') {    // if it's an L (ASCII 76)
      digitalWrite(ledPin, LOW);  // turn off the LED
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      // noTone(5);
    }
  }
}

Program P5.js To Control the LED

To get P5.js to control this Arduino program serially, you only need to change the keyPressed() function to read H or L instead of 0 through 9. Here’s your new mousePressed() function:

function keyPressed() {
  if (key ==='H' || key ==='L') { // if the user presses H or L
    serial.write(key);              // send it out the serial port
  }
}

If you tried to change the LED with the mouse, you didn’t see anything happen unless your output value was 72 or 76. Why is that?

Processing ASCII-Encoded Strings With Arduino

void setup() {
  Serial.begin(9600);    // initialize serial communications
  Serial.setTimeout(10); // set the timeout for parseInt
}
 
void loop() {
  if (Serial.available() > 0) { // if there's serial data available
    int inByte = Serial.parseInt(); // read it
    if (inByte >= 0) {
      Serial.write(inByte);      // send it back out as raw binary data
      analogWrite(5, inByte);    // use it to set the LED brightness
      // if you're using a speaker instead of an LED, uncomment line below  and comment out the previous line:
      //  tone(5, inByte*10);     // play tone on pin 5
    }
  }
}

Program P5.js To Send a String With a Newline Character

Now that your microcontroller is expecting a string, program P5.js to send one. This means changing the mouseDragged() function. You still need to convert it to an integer using the int() function (you could also use round()), but then you need to convert it back to a String and add a delimiter. A quick way to do this is by adding the delimiter in the serial.write() command like so:

1	`serial.write(outByte +` `'\n');`

When the command encounters the two different elements, the number and the string (‘\n’), it will convert the number into a string in in order to concatenate the two. In addition, the newline on the end will is useful on the Arduino side. Since it’s a non-numeric character, the Serial.parseInt() function will see it and parse the string, not waiting for the timeout.

The full code for all the examples in this lab can be found in this gitHub repository.

Conclusion

Number of Bytes	1 Byte		Multi Bytes
Data to Send	A single number < 255	A single character	A single number > 255, multiple values
Send as:	Binary	Ascii	Ascii
p5.js ->	serial.write(integer)	serial.write(string)	serial.write (valueToSend + ",")
-> Arduino	Serial.read()		Serial.parseInt()

Table 1. Serial Communication: p5.js to Arduino

1023\n

Will always result in these six bytes:

49 48 50 51 10

Likewise, this text string:

Hello\n

will always be:

72 101 108 108 111 10

The more you work with serial data, the more you’ll become familiar with the methods for handling it.

For more on serial flow control in P5.js, see the Two-Way Duplex Serial Communication Using P5.js Lab.

Controlling Stepper Motors

Introduction

Stepper motors are useful for when you need to rotate a full 360 degrees, but need to position your motor at a particular angle. What follows is a more detailed introduction to unipolar and bipolar stepper motors and how to control them from a microcontroller. In order to get the most out of these notes, you should know something about how electricity works, and you should know the basics of how a microcontroller works as well. You should also understand how transistors are used to control high-current loads. You should also understand how DC motors work.

As you learned in the introduction to motors, stepper motor is a motor controlled by a pair of electromagnetic coils. The center shaft has a series of magnets mounted on it, and the coils surrounding the shaft are alternately given current or not, creating magnetic fields which repulse or attract the magnets on the shaft, causing the motor to rotate.

There are two basic types of stepper motors, bipolar steppers and unipolar steppers. A bipolar is the simpler kind of stepper motor; it’s simply two coils, and has four wires. Depending on which coil you put power through, and which direction you send the power in, you step the motor one step forward or back. A unipolar stepper is slightly more complex. It also has two coils, but the centers of the coils are joined in a single junction. This effectively creates four coils, depending on how you put electrical energy through it.

If you’re looking for sources of stepper motors and stepper motor drivers, you’ll find many motors and drivers at Pololu, Adafruit, Sparkfun, and the other usual hobbyist electronics retailers. Octopart will also give you wide variety of retailers for steppers.

Bipolar stepper motors

A bipolar stepper motor usually has four wires coming out of it. It has two independent coils. Figure 1 shows a typical bipolar stepper with four wires. In the center is the motor’s shaft, which has a cog-like rotor on it. Each tooth of the cog is magnetized, and every cog’s magnetic polarity is opposite the one next to it.When you put voltage and current through one coil, it turns the central rotor a few degrees, because the magnets on the rotor are attracted to the magnetic field generated by the coil. When you turn that coil off and the other one on, the motor moves a few degrees more.

Schematic drawing of a bipolar stepper motor. It has two coils facing each other. The ends of the coils are numbered 1 and 2 (coil 1) 3 and 4 coil 2). The central motor shaft and rotor appears in the middle as cog. — Figure 1. Wiring for a bipolar stepper motor.

To use a bipolar stepper, you need to know which wire is connected to which coil. You can determine this by measuring the resistance between pairs of wires. When you’ve got the leads of your meter connected to two wires on opposite coils, you should see infinite resistance, or no continuity. When your meter leads are on the same coil, you’ll be able to read the coil’s resistance. The two coils should have the same resistance.

Some bipolar steppers have a center connection on each coil. This allows for finer control over the motor, by treating each half coil as its own coil, as shown in Figure 2. These center connections can be joined to turn a 6-wire bipolar stepper into a unipolar stepper as well. Figure 3 shows the inside of a typical bipolar stepper motor.

Schematic drawing of a six-wire bipolar stepper motor. It has two coils facing each other. The ends of the coils are numbered 1 and 2 (coil 1) 3 and 4 coil 2). The central motor shaft and rotor appears in the middle as cog. The center wires of each coil are marked 5 (for coil 1) and 6 (for coil 2). — Figure 2. a six-wire bipolar stepper

Photo of three stepper motors. The center one is opened up to show the coils inside. — Figure 3. Inside a Stepper motor. In this photograph, you can see the inside of a bipolar stepper. The two coils are actually divided into eight sub-coils for finer control. You can see the cog in the center as well. Each tooth on the cog is a tiny magnet.

Like other motors, stepper motors require more power than a microcontroller can give them, so you’ll need a separate power supply for them. Ideally you’ll know the voltage and load current from the manufacturer. If not, get a variable DC power supply, apply the minimum voltage (hopefully 3V or so), apply voltage across two wires of one coil (e.g. 1 to 2 or 3 to 4) and slowly raise the voltage until the motor is difficult to turn. It is possible to damage a motor this way, so don’t go too far. Typical voltages for a stepper might be 5V, 9V, 12V, 24V. Higher than 24V is less common for small steppers, and frankly, above that level it’s best not to guess.

Unipolar Stepper Motors

Unipolar steppers motor have five or six wires. The five-wire version has four coils which are all connected on one pole. Six-wire motors are actually bipolar steppers with two coils divided by center connections on each coil, as described above. The center connections of the coils are tied together as shown in Figure 4 and sometimes used as the power connection.

Common Stepper Motor Types

There are two common families of stepper motor that you’ll encounter: NEMA motors and can-stack or tin-can steppers. The labs on this site can work with either. NEMA motors are designed according to a standard set by the US National Electrical Manufacturers Association. These are high-quality motors, and usually the more expensive that you’ll find. The number in a NEMA motor’s designation indicates the motor’s size. A NEMA-11 motor, for example, has a mounting face that’s 1.1 inches square; NEMA-23 is 23 step motor is 2.3 inches square and so forth. Electromate.com has a detailed explanation of NEMA motors if you ‘d like more detail.

Can-stack steppers are typically smaller and more cheaply made, mounted in a simple can, often with gears on top to increase torque and steps per revolution, and decrease speed. They’re often used in disk drives, motorized lens optics, and other industrial applications. The first number in the spec for these indicates the can’s diameter in millimeters. A 28BYJ-48 motor has a 28mm diameter can. A 24BYJ-48 has a 24mm can size, and so forth. Melissa Zheng has a good explanation of can-stack stepper motor specs.

Figure 5 shows a variety of NEMA-style steppers. Figure 6 shows a 28BYJ-48 can-stack stepper.

Photo of several NEMA-style stepper motors. These motors all share s solid metal casing and mounting holes on the top by their shafts. They come in various sizes. — Figure 5. A range of NEMA stepper motors. Image from Pololu.com

Photo of a stepper motor. This motor is approximately 2 inches (5cm) on diameter, with an off-center shaft at the top, and wires protruding from the bottom. You can tell a stepper motor from a DC motor because steppers have at least four wires, while regular DC motors have two. — Figure 6. a can-stack stepper motor

Control of Stepper Motors

To control the stepper, apply voltage to each of the coils in a specific sequence. Both types of stepper motor can be controlled with a motor driver (related video). The sequence would go like this:

Step	Wire 1	Wire 2	Wire 3	Wire 4
1	high	low	high	low
2	low	high	high	low
3	low	high	low	high
4	high	low	low	high

Table 1. Sequential states of the voltage on the four control pins of a stepper motor.

To step the motor, you change the pins in the order shown in Table 1. With each step, the motor will move forward or backward one increment. Once you have the motor stepping in one direction, stepping in the other direction is a matter of doing the steps in reverse order.

It’s good practice when you wire a stepper up for the first time to write a program to step it slowly, one step at a time, using the steps above. That way you can see if you got the wiring right. If you did, the stepper should turn step by step in one direction. If you didn’t, it may step in unpredictable ways.

A stepper motor’s position is not absolute. You have to know where the motor started (usually measured with an external sensor) and how many degrees per step. Then you count the steps and multiply by that many degrees. So for examples, if you have a 1.8-degree stepper, and it’s turned 200 steps, then it’s turned 1.8 x 200 degrees, or 360 degrees, or one full revolution.

The circuits for controlling a unipolar stepper or a bipolar stepper are very similar. In both cases, you have four ends of coils that go to the four outputs of the driver. The difference is that for the unipolar, you also have a common center wire. That wire can be attached to the same motor voltage supply that feeds the driver, or it can be left disconnected. If you do the latter, you’re treating the unipolar motor as if it had two separate coils — in other words, as if it were a bipolar stepper.

H-bridge Stepper Drivers

There are a couple of different types of stepper motor drivers. The oldest use four transistors, treating each wire as if it were a motor itself. If you take wire 1 high and wire 2 low, coil turns one direction. Take wire 1 low, and wire 2 high, and the coil turns the other direction. The same principle applies to the other coil. This can be done with individual Darlington transistors or MOSFETs, or it can be done with a transistor array like the ULN2004.

The four-transistor approach is essentially an H-bridge, and you could use two H-bridges to control a stepper. The TB6612FNG dual motor driver that you saw in the H-bridge lab is a dual H-bridge designed for this purpose. You’ll see it in action in the H-bridge stepper motor lab. There is an older H-bridge that only operates on 5V, the L293D, which you will encounter from time to time. This driver does not work with the Arduino Nano 33 IoT and other 3.3V boards, but it’s common enough that it’s useful to know that it can be replaced with a TB6612FNG.

With an H-bridge style driver, you know what you’re getting: take the input 1 HIGH and input 2 LOW, and you create a voltage difference between outputs 1 and 2. It’s conceptually easy, but requires more thinking and planning when you are programming the stepper. Fortunately, there is a Stepper library for Arduino that simplifies this somewhat.

Step & Direction Stepper Drivers

More modern stepper drivers have just two control pins, one for step and one for direction. They also feature configuration pins that let you set the step pin to move the motor a full step, a half step, or less. This is called microstepping, and you can find stepper drivers that will work as low as 1/256th of a step. This allows finer control over the stepper motor.

Step & direction drivers simplify control of a stepper because they only require two signals from a microcontroller: take the direction pin high or low to turn the motor’s direction one way or the other. Then pulse the step pin. With each pulse, the motor should step in the direction set by the direction pin. You can run these kinds of steppers without a library. You’ll see these drivers in the step & direction stepper driver lab.

There are a number of step & direction motor drivers available. For example, ther STSPIN220 from ST microelectronics works in the 1.8-10V range. the A4988 handles motors in the 8-35V range. Trinamic’s drivers, also sold on breakout boards by Watterott as SilentStepStick boards, control a wide range of voltages and are designed to reduce noise. Allegro’s A4988 and Monolithic’s MP6500 and Texas Instruments’ DRV88xx line are also good driver lines to look at. Here’s a comparison chart for many of these lines, on breakout boards from Pololu. Table 2 is a summary of a few other step & direction drivers.

In picking a step & direction driver, the first questions to ask are:

Is my motor’s rated voltage in the driver’s Motor Voltage range?
Is my motor’s rated current less than the driver’s Max. Motor Current range?
Is my microcontroller’s operating voltage in the driver’s Control Voltage range?

Driver	Type	Motor Voltage	Max. Motor Current	Control Voltage	Microsteps	Price (as of Jun. 2022)
A4988 Black Edition	Step & direction	8-35V	1.1A	3-5.5V	1/16	$13.95
STSPIN220	Step & direction	1.8-10V	1.1A	1.8-5.5V	1/256	$7.45
TMC2130	Step & direction, SPI	5.5-45V	1.2A	3.3-5V	1/256	$10.68
TMC2209	Step & Direction, UART	4.75-28V	1.4A	3.3-5V	1/256	$16.03
TMC2208	Step & Direction, UART	4.75-36V	1.2A	4.6-5.25V	1/256	$9.58
TMC2100	Step & Direction	5.5-45V	1.2A	3.3-5V	1/256	$9.28
TB6612FNG	Dual H-Bridge	15V	1.2A	2.7–5.5V	–	$5.50
EasyDriver	Step & Direction	6-30V	700mA	3-5.5V	1/8	$16.95

Table 2. Step & Direction drivers compared

Lab: Tone Output Using An Arduino

In this tutorial you’ll learn how to generate simple tones on an Arduino

Introduction

This lab is an introduction to generating simple tones on an Arduino. In order to make the most of this lab, you should understand the basics of how to program digital input and output on an Arduino, and how to read a simple circuit diagram.

Video of this lab

What You’ll Need

Photo of flexible jumper wires — Arduino Nano 33 IoT

Making Sound Electronically

The following is adapted from SoundExamples.

Sound is created by vibrations in air. When those vibrations get fast enough, above about 20 times a second, you hear them as an audible pitch. The number of vibrations per second is called the frequency and frequency is measured in Hertz (Hz). So 20 times a second is 20Hz. Humans can hear pitches from about 20Hz to about 20,000Hz, or 20 kiloHertz (kHz).

What vibrations are we talking about? A speaker can vibrate. The paper cone of the speaker moves forward, then backward, then back to its resting place many times a second. The length of time it takes to move from rest through one back-and-forth motion, is called the period of the vibration. For example, if a speaker is vibrating at 20Hz, then it moves forward, backward, and back to rest 2in 1/20 of a second, or 0.05 seconds. 0.05 seconds is the period of the sound. Period and frequency are related inversely: frequency = 1/period.

A microcontroller makes sound by sending pulses of electrical energy from an output pin through a wire that’s connected to the paper cone of a speaker. That wire is wrapped in a coil, and mounted inside a magnet. The electrical energy generates a magnetic field, and that field is either attracted to the magnet or repelled by it, depending on which direction the electrical energy is flowing. The magnetic energy moves the coil, and since the coil is attached to the cone, the speaker moves.

So in summary: how do you make sound from an Arduino? Attach a speaker to an output pin and turn it on and off at a set frequency. You can write this code yourself, or you can use the tone() command.

Pulsewidth Modulation vs. Frequency Modulation

When you use analogWrite() to create pulsewidth modulation (PWM) on an output pin, you’re also turning the pin on and off, so you might think, “why not use analogWrite() to make tones?” That command can change the on-off ratio of the output (also known as the duty cycle) but not the frequency. If you have a speaker connected to an output pin running analogWrite(), you’ll get a changing loudness, but a constant tone. To change the tone, you need to change the frequency. The tone() command does this for you.

Prepare the breadboard

Connect power and ground on the breadboard to the microcontroller. On the Arduino module, use the 5V or 3.3V (depending on your model) and any of the ground connections. Figures 8 and 9 show connections for an Arduino Uno and a Nano, respectively.

The Uno’s 5V output hole is connected to the red column of holes on the far left side of the breadboard (Figure 8). The Uno’s ground hole is connected to the blue column on the left of the board. The red and blue columns on the left of the breadboard are connected to the red and blue columns on the right side of the breadboard with red and black wires, respectively. These columns on the side of a breadboard are commonly called the buses. The red line is the voltage bus, and the black or blue line is the ground bus.

In Figure 9, the Nano is mounted at the top of the breadboard, straddling the center divide, with its USB connector facing up. The top pins of the Nano are in row 1 of the breadboard.

The Nano, like all Dual-Inline Package (DIP) modules, has its physical pins numbered in a U shape, from top left to bottom left, to bottom right to top right. The Nano’s 3.3V pin (physical pin 2) is connected to the left side red column of the breadboard. The Nano’s GND pin (physical pin 14) is connected to the left side black column. These columns on the side of a breadboard are commonly called the buses. The red line is the voltage bus, and the black or blue line is the ground bus. The blue columns (ground buses) are connected together at the bottom of the breadboard with a black wire. The red columns (voltage buses) are connected together at the bottom of the breadboard with a red wire.

Images made with Fritzing

Connect the Sensors and the Speaker

Connect a variable resistor such as a force-sensing resistor or photosensor to analog pin 0 in a voltage divider circuit as shown below. The 8-ohm speaker connects to pin 8 of the Arduino. You can use any digital I/O pin if you don’t like 8. The other end of the speaker connects to ground. Figures 10 through 12 show the schematic drawing and the breadboard layouts for an Uno and a Nano, respectively.

Note: Although the circuit shown in Figures 10-12 has a 100-ohm resistor with the speaker, you can use a larger resistor. The larger the resistor, the quieter the speaker. A 220-ohm resistor works reasonably well if you don’t have a 100-ohm resistor.

Figure 10. Schematic view of an Arduino connected to a force sensing resistor (FSR), a 10-kilohm resistor, and a speaker. One leg of the FSR is connected to voltage. The other leg is connected simultaneously to the first leg of a 10-kilohm resistor and the Arduino’s analog input pin A0. The second leg of the 10-kilohm resistor is connected to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the resistor connects to ground.

Figure 11. Breadboard view of an Arduino connected to a force-sensing resistor, a fixed resistor, and a speaker. The Arduino’s voltage out and ground pins are connected to the voltage and ground buses of the breadboard as usual. The FSR is mounted in the left center section of the breadboard. One leg of the FSR is connected to 5 volts. The other leg is connected simultaneously to the first leg of a 10-kilohm resistor and the Arduino’s analog input pin A0. The second leg of the 10-kilohm resistor is connected to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the resistor connects to ground.

Figure 12. Breadboard view of an Arduino Nano connected to two force sensing resistors (FSRs) and a speaker. The Nano’s 3.3 Volts (physical pin 2) and ground (physical pin 14) are connected to the voltage and ground buses of the breadboard as usual. The FSR is mounted below the Nano in the left center section of the breadboard. One leg of the FSR is connected to voltage. The other leg is connected simultaneously to the first leg of a 10-kilohm resistor and the Arduino’s analog input pin A0. The second leg of the 10-kilohm resistor is connected to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the resistor connects to ground.

Check the sensor input range

Once you’ve got the circuit connected, check the range of the analog input and note the highest and lowest values you can reach.

void setup() {
  Serial.begin(9600);       // initialize serial communications
}
 
void loop() {
  int analogValue = analogRead(A0); // read the analog input
  Serial.println(analogValue);      // print it
}

Check that the Speaker Works

You can check that the speaker works by playing a single tone over and over. Here’s a short sketch to play middle A, 440Hz:

void setup() {
  // nothing to do here
}
 
void loop() {
  // play the tone for 1 second:
  tone(8, 440,1000);
  // do nothing else for the one second you're playing:
  delay(1000);
}

When you run this sketch, you should hear a tone of 44oHz, or middle A, continually. If you don’t, check to see that your speaker wiring is as shown above. If it’s too soft, try changing the 100 Ohm resistor to a smaller resistor.

Play Tones

Write a sketch to read the analog input and map the result to a range from 100 to 1000. The example below assumes your analog input circuit ranges from 200 to 900, so adjuct for your actual values. Store the result in a local variable called frequency. This will be the frequency you play on the speaker Then use the tone() command to set the frequency of the speaker on pin 8.

void setup() {
  // nothing to do here
}
 
void loop() {
  // get a sensor reading:
  int sensorReading = analogRead(A0);
  // map the results from the sensor reading's range
  // to the desired pitch range:
  float frequency = map(sensorReading, 200, 900, 100, 1000);
  // change the pitch, play for 10 ms:
  tone(8, frequency, 10);
  delay(10);
}

Once you’ve uploaded this, move your hands over the photocells, and listen to the frequency change. It will change from 100 Hz to 1000 HZ, because that’s what you set in the map() command. If you want to change the frequency range, change those two numbers. See if you can get it to play a little tune.

If you want to know how to generate a tone without the tone() command, here’s the basic algorithm to play one wavelength:

void makeTone(float frequency) {
  // set the period in microseconds:
  int period = (1 / frequency) * 1000000;  
  // turn the speaker on:
  digitalWrite(speakerPin, HIGH);
  // delay half the period:
  delayMicroseconds(period / 2);
  // turn the speaker off:
  digitalWrite(speakerPin, LOW);
  // delay half the period:
  delayMicroseconds(period / 2);
}

Play it Loud

If you’d like to amplify the speaker, modify the speaker circuit by adding a transistor. Most any NPN transistor circuit or N-channel MOSFET will do. Figure 13 shows a speaker getting power from a transistor. This example uses a TIP120 transistor, but an NPN transistor or N-channel MOSFET should work. When using a transistor to amplify the power going to the speaker, you should definitely use a resistor to limit the current. A 100-ohm resistor is shown in this example.

Figure 13. Schematic view of a speaker connected to a transistor. The first leg of the speaker connects to the Arduino’s voltage supply (3.3V). The second leg of the speaker connects to a10-0-ohm resistor. The other side leg of the resistor connects to the collector pin of an NPN transistor (for a TIP120 transistor, this is the middle pin). The transistor’s base pin (the pin to the left when the transistor’s body is facing you) connects to the Arduino’s tone output pin (pin 8 in the examples above). The transistor’s collector pin (on the right when the transistor is facing you) connects to ground.

*Figure 14. Breadboard view of a speaker connected to a transistor. The speaker and transistor are connected exactly as described in the schematic view caption in Figure 13.*

Use Headphones

You can also connect the tone output of an Arduino to headphones. Using a standard 3.5mm audio jack, connect the center pin of the jack to ground through a 10-kilohm resistor. Then connect the two sides to each other and to your tone output pin. The 10-kilohm resistor here is important, because without it the audio signal will be too strong for your headphones, and could cause you ear damage. Figure 15 shows an audio jack connected to an Arduino Nano 33 IoT for the examples shown here.

Figure 15. Breadboard view of a 3.5mm Audio jack connected to an Arduino Nano 33 IoT. The center pin of the audio jack is connected to ground through a 10-kilohm resistor. The two sides are connected to the Nano 33’s tone output pin, which is pin 8 in this example.

A more complex example

There’s an example in the Arduino IDE examples that can play a melody for you. Look in the File Menu under Examples -> Digital -> ToneMelody. You can find the code online at this link. In this example, you’ll see a second tab of text called pitches.h. This file includes constants that give you the pitches for a standard western scale.

You can add your own extra tabs using the new Tab menu to the right of the IDE window. Figure 16 shows the new Tab dropdown menu. Tabs make it easier to separate frequently copied code from custom code for a sketch, as you see in this example.

You’ll notice that pitches.h lists a number of note names and numbers. Those numbers are the frequency of each note. For example:

/*************************************************
* Public Constants
*************************************************/
 
#define NOTE_B0  31
#define NOTE_C1  33
#define NOTE_CS1 35
#define NOTE_D1  37
#define NOTE_DS1 39
#define NOTE_E1  41
#define NOTE_F1  44
#define NOTE_FS1 46
#define NOTE_G1  49
#define NOTE_GS1 52
#define NOTE_A1  55
#define NOTE_AS1 58
#define NOTE_B1  62
#define NOTE_C2  65
#define NOTE_CS2 69
#define NOTE_D2  73

This tells you that that first note in the list, B0 (which is the second lowest note on a piano keyboard, 4 octaves below middle A) has a frequency of 31 Hz. The values listed in pitches.h allow you to play notes from B0 to D#8.

For this sketch, you’ll play a simple melody. A melody consists of notes played in a sequence, and rests between the note. Each note and rest has its own particular duration. You’re going to play a seven note sequence, as shown in Figure 17 (in C Major):

Two measures of a musical notation in 4 / 4 time. The notes are C4, G3, G3, G#3, G3,rest, B3, C4 the respective durations are: quarter note, eighth note, eighth note, quarter note, quarter note, quarter rest, quarter note, quarter note — *Figure 17. Two measures of a musical notation. The melody is “Shave and a haircut, two bits”*

image from seventhstring.com

The sequence is: C4, G3, G3, G#3, G3, rest, B3, C4

the durations are:

quarter note, eighth note, eighth note, quarter note, quarter note, quarter rest, quarter note, quarter note.

The sketch starts with two global variables. Using pitches.h, make an array variable holding those notes. Make a second array to hold the note durations, marking quarter notes as 4 and eighth notes as 8.

// notes in the melody:
int melody[] = {
NOTE_C4, NOTE_G3,NOTE_G3, NOTE_GS3, NOTE_G3,0, NOTE_B3, NOTE_C4};
 
// note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
4, 8, 8, 4,4,4,4,4 };

How can you use the durations to play notes? Well, imagine that a quarter note is one quarter of a second, and eighth note is one eighth of a second, and so forth. In that case, the actual duration for each note is 1000 milliseconds divided by the value for it in the durations array. For example, the first note is 1000/4, the second is 1000/8, and so forth.

Now, you only want to play the song once, so everything will happen in the setup(). You’ll make a for loop in the setup to iterate over the seven notes. For each time through the loop, use tone() to play the next note in the array. Use the formula in the last paragraph to determine how long each note should play for. After you start the note, delay for as long as the note plays, plus 30 milliseconds or so, to separate each note.

#include "pitches.h"
 
// notes in the melody:
int melody[] = {
NOTE_C4, NOTE_G3,NOTE_G3, NOTE_GS3, NOTE_G3,0, NOTE_B3, NOTE_C4};
 
// note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {4,8,8,4,4,4,4,4 };
 
void setup() {
  // iterate over the notes of the melody:
  for (int thisNote = 0; thisNote < 8; thisNote++) {
    // to calculate the note duration, take one second
    // divided by the note type.
    //e.g. quarter note = 1000 / 4, eighth note = 1000/8, etc.
    int noteDuration = 1000/noteDurations[thisNote];
    tone(8, melody[thisNote],noteDuration);
 
    //pause for the note's duration plus 30 ms:
    delay(noteDuration +30);
  }
}
 
void loop() {
  // no need to repeat the melody.
}

That’s the whole tune!

The Relation Between Pitches

For those interested in a little music theory, here’s where those frequency values in pitches.h came from. If you’re not interested in the details, feel free to skip to the next section.

You may have noticed in pitches.h that the value of B1 was twice that of B0, and that C1 is twice C0, and so forth. In European classical music tradition, the most common tuning system in the last few hundred years has been the 12-tone equal temperament system. This system divides an octave into twelve pitches, in which the frequency interval between every pair of adjacent notes has the same ratio. The pitches are arranged on a logarithmic scale, and the ratio between pitches is equal to to the 12th root of 2, or 2^1/12, or approximately 1.05946. The whole tuning system is based off a reference frequency, 440 Hz, or middle A (a in the 4th octave, or A4). The step between each adjacent note is called a semitone. Wikipedia’s page on equal temperament gives a longer explanation if you want to know more. Musictheory.net is also a great source of information.

You can use this information to dynamically generate notes in this scale:

frequency = 440 * 2^((noteValue - 69) / 12.0));

This formula, taken from the MIDI tuning standard, works for a range of notes. Using this formula, note 27 is A0, the lowest note on a piano, and note 108 is C8, the highest note on a piano. 440 is the reference frequency, middle A, and 69 is the note number of middle A in MIDI. With this formula, you can cover a wide range of human hearing with note values 0 to 127. And you could generate note frequencies without needing pitches.h. This formula can be handy if you decide to dive into building MIDI devices later on as well. The Arduino API includes a function called the pow() function that raises a number to a power. So that formula, expressed as a line of Arduino programming code, would look like this:

float frequency =  440 * pow(2, ((noteValue - 69) / 12.0));

And the “shave and a haircut” tune from above, would be:

int melody[] = {40, 35,35, 36, 35, 0, 39, 40};

Expressed in note values like this, it would be simple to convert a musical sketch from playing using tone() to playing using a MIDI synthesizer.

Next, try making a musical instrument.

A Musical Instrument

Playing a tune like you just doesn’t allow for much user interaction, so you might want to build more of a musical instrument.

Here’s an example of how to use the note constants to make a simple keyboard. Figures 18-20 show the circuit.

Schematic view of an Arduino connected to three force sensing resistors (FSR) and a speaker. Each of the three FSRs have one of their respective legs connected to +5 volts. Each of the other legs connect to one leg of a 10-kilohm resistor and simultaneously connect to one of the Arduino's analog input pins. In this case the pin connections are A0, A1, and A2. Each of the respective 10-kilohm resistors then connect to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the 100-ohm resistor connects to ground. — *Figure 18. Schematic view of an Arduino connected to three force sensing resistors and a speaker.*

Breadboard view of an Arduino connected to three force sensing resistors (FSR) and a speaker. Each of the three FSRs have one of their respective legs connected to +5 volts. Each of the other legs connect to one leg of a 10-kilohm resistor and simultaneously connect to one of the Arduino's analog input pins. In this case the pin connections are A0, A1, and A2. Each of the respective 10-kilohm resistors then connect to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the 100 ohm resistor then connects to ground. — Figure 19. Breadboard view of an Arduino connected to three force sensing resistors (FSR) and a speaker. Each of the three FSRs have one of their respective legs connected to +5 volts. Each of the other legs connect to one leg of a 10-kilohm resistor and simultaneously connect to one of the Arduino’s analog input pins. In this case the pin connections are A0, A1, and A2. Each of the respective 10-kilohm resistors then connect to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the 100 ohm resistor then connects to ground.

Figure 20. Breadboard view of an Arduino Nano connected to three force sensing resistors (FSR) and a speaker. Each of the three FSRs have one of their respective legs connected to the voltage bus of the breadboard. Each of the other legs connect to one leg of a 10-kilohm resistor and simultaneously connect to one of the Arduino’s analog input pins. In this case the pin connections are A0, A1, and A2. Each of the respective 10-kilohm resistors then connect to ground. The red positive wire of the speaker is connected to digital pin 8 of the Arduino. The black ground wire of the speaker is connected to one leg of a 100 ohm resistor. The other leg of the 100 ohm resistor then connects to ground.

Program it

Make a sketch that plays a note on each sensor when the sensor is above a given threshold.

Start with a few constants: one for the threshold, one for the speaker pin number, and one for the duration of each tone. To make this instrument work, you need to know what note corresponds to each sensor. Include pitches.h as you did above, then make an array that contains three notes, A4, B4, and C3 as well. Set all of this up at the beginning of your sketch, before setup().

#include "pitches.h"
 
const int threshold = 10;      // minimum reading of the sensors that generates a note
const int speakerPin = 8;      // pin number for the speaker
const int noteDuration = 20;   // play notes for 20 ms
 
// notes to play, corresponding to the 3 sensors:
int notes[] = {
NOTE_A4, NOTE_B4,NOTE_C3 };

You don’t need anything in your setup(), but in your loop, you need a for loop that iterates over the first three analog inputs, 0, 1, and 2. For each one, read the sensor, and if it’s above a threshold, play the corresponding note in the notes array for the note duration.

#include "pitches.h"
 
const int threshold = 10;      // minimum reading of the sensors that generates a note
const int speakerPin = 8;      // pin number for the speaker
const int noteDuration = 20;   // play notes for 20 ms
 
// notes to play, corresponding to the 3 sensors:
int notes[] = {
NOTE_A4, NOTE_B4,NOTE_C3 };
 
void setup() {
 
}
 
void loop() {
  for (int thisSensor = 0; thisSensor < 3; thisSensor++) {
    // get a sensor reading:
    int sensorReading = analogRead(thisSensor);
 
    // if the sensor is pressed hard enough:
    if (sensorReading > threshold) {
      // play the note corresponding to this sensor:
      tone(speakerPin, notes[thisSensor], noteDuration);
    }
  }
}

When you upload this sketch, you should have a three-key keyboard.

Get Creative

Now that you’ve got the basics, think about making an instrument for one of your projects. For more background on musical structure, see these notes on tone and generating a melody.

Doing More with Sound Output

If you’re interested going deeper into using sound outputs using speakers, take a look at the Mozzi Libary to produce more complex sound. In a future session, you’ll learn to play and control .wav files from Arduino, which is based on the I2S Library that connect digital audio devices together.

Analog Output

Introduction

This is an introduction to basic analog output on a microcontroller. In order to get the most out of it, you should know something about the following concepts. You can check how to do so in the links below:

The following video links will help in understanding analog output:

Analog Output

Just as with input, there are times when you want greater control over a microcontroller’s output than a digital output affords. You might want to control the brightness of a lamp, for example, or the turn of a pointer on a dial, or the speed of a motor. In these cases, you need an analog output. The most likely things that you might want to vary directly from a microcontroller are lights, sound devices, or things controlled by motors. For many of these, there will be some other controller in between your microcontroller and the final output device. There are lighting dimmers, motor controllers, and so forth, most of which can be controlled using some form of serial digital communication. What’s covered here are simple electrical devices that can be controlled by a changing voltage. The Arduino and other digital microcontrollers generally can’t produce a varying voltage, they can only produce a high voltage or low voltage. Instead, you “fake” an analog voltage by producing a series of voltage pulses at regular intervals, and varying the width of the pulses. This is called pulse width modulation (PWM). The resulting average voltage is sometimes called a pseudo-analog voltage. The graph in Figure 1 shows how PWM works. You pulse the pin high for the same length of time that you pulse it low. The time the pin is high (called the pulsewidth) is about half the total time it takes to go from low to high to low again. This ratio is called the duty cycle and the total time from off through on to off again is the period. The duty cycle in this case 50%, and the effective voltage is half the total voltage.

Applications of Pulse Width Modulation

LED dimming

The simplest application of analogWrite() is to change the brightness of an LED. Connect the LED as you did for a digital output, as shown in Figure 3, then use analogWrite() to change its brightness. You’ll notice that it doesn’t change on a linear scale, however.

Related video: See the effect of PWM on the LED

Digital output schematic. A 220-ohm resistor is connected to an output from a microcontroller. The other end of the resistor is connected in series with the anode of an LED. The cathode of the LED is connected to ground. — Figure 3. You can dim an LED with the same circuit as you used for digital output. Just use `analogWrite()` on the pin to which the LED is connected.

DC Motor Speed Control

You can vary the speed of a DC motor using the analogWrite() command as well. The schematic is in Figure 4. You use the same transistor circuit as you would to turn on and off the motor, shown in Figure 4, but instead of setting the output pin of the microcontroller high or low, you use the analogWrite() on it. The transistor turns on and off at a rate faster than the motor can stop and start, so the result is that the motor appears to smoothly speed up and slow down.

For more on DC motor control, see the following links:

DC motor control notes
Related video: Why use PWM on DC Motors?

Schematic of motor control with an Arduino, using a MOSFET. One terminal of the motor is connected to +5 volts. The other side is connected to the source pin of a MOSFET transistor. The gate of the transistor is connected to a microcontroller's output pin. The drain pin of the MOSFEt is connected to ground. There is a diode connected in parallel with the transistor. its anode is connected to the drain, and its cathode is connected to the source. — Figure 4. Schematic of motor control with an Arduino, using a MOSFET. One terminal of the motor is connected to a high-current power supply and the other is connected to the MOSFET’s drain pin. The MOSFET’s source pin is connected to ground and its gate is connected to a microcontroller output pin. A protection diode’s cathode is attached to the source of the MOSFET, and the anode is connected to the drain.

Note: Filter circuits

Filter circuits are circuits which allow voltage changes of only a certain frequency range to pass. For example, a low-pass filter would block frequencies above a certain range. This means that if the voltage is changing more than a certain number of times per second, these changes would not make it past the filter, and only an average voltage would be seen. Imagine, for example, that your PWM is operating at 1000 cycles per second, or 1000 Hertz (Hz). If you had a filter circuit that blocked frequencies above 1000 Hz, you would see only an average voltage on the other side of the filter, instead of the pulses. A basic low-pass filter consists of a resistor and a capacitor, connected as shown in Figure 5:

Schematic drawing of a low-pass filter for an LED. The LED's anode is connected to +5 volts. Its cathode connects to a resistor. The resistor's other end connects to the PWM output of a microcontroller. The junction where the cathode of the LED and the resistor meet is also connected to a capacitor. The other terminal of the capacitor is connected to ground. — Figure 5. Schematic: A basic low-pass filter. An LED’s anode is connected to voltage and its cathode is attached to one terminal of a capacitor. The capacitor’s other terminal is connected to ground. A resistor connects to the junction where the the LED and the capacitor meet. The other end of the resistor is connected to a microcontroller’s output pin.

The relationship between frequency blocked and the values of the capacitor and resistor is as follows:

frequency = 1/ (2π *resistance * capacitance)

A 1.5-kilohm resistor and a 0.1-microfarad capacitor will cut off frequencies above around 1061 Hz. If you’re interested in filters, experiment with different values from there to see what works best.

Servomotors

Perhaps the most exciting thing you can do as analog output is to control the movement of something. One simple way to do this is to use a servomotor. Servomotors are motors with a combination of gears and an embedded potentiometer (variable resistor) that allows you to set their position fairly precisely within a 180-degree range. They’re very common in toys and other small mechanical devices. They have three wires:

power (usually +5V)
ground
control

Connect the +5V directly to a 5V power source (the Arduino’s 5V or 3.3V output will work for one servo, but not for multiple servos). Ground it to the same ground as the microcontroller. Attach the control pin to any output pin on the microcontroller. Then you need to send a series of pulses to the control pin to set the angle. The longer the pulse, the greater the angle.

To pulse the servo, you generally give it a 5-volt, positive pulse between 1 and 2 milliseconds (ms) long, repeated about 50 times per second (i.e. 20 milliseconds between pulses). The width of the pulse determines the position of the servo. Since servos’ travel can vary, there isn’t a definite correspondence between a given pulse width and a particular servo angle, but most servos will move to the center of their travel when receiving 1.5-ms pulses. This is a special case of pulse width modulation, in that you’re modifying the pulse, but the period remains fixed at 20 milliseconds. You could write your own program to do this, but Arduino has a library for controlling servos. See the Servo lab for more on this.

Changing Frequency

Pulse width modulation can generate a pseudo-analog voltage for dimming and motor control, but can you use it to generate pitches on a speaker? Remember that you’re changing the duty cycle but not the period of the signal, so the frequency doesn’t change. If you were to connect a speaker to a pin that’s generating a PWM signal, you’d hear one steady pitch.

If you want to generate a changing tone on an Arduino microcontroller, however, there is a tone() command that will do this for you:

1	`tone(pin, frequency);`

This command turns the selected pin on and off at a frequency that you set. With this command, you can generate tones reasonably well. For more on this, see the Tone Output lab.

Ranges of Values

As a summary, Table 1 below shows the ranges of values for digital input/output and analog input/output, which have been discussed in Digital Input & Output, Analog Input, and this page.

Digital	Input (Digital Pins)	0 [LOW] or 1 [HIGH] (2^0)	0V or 3.3V (newer microcontrollers) 0V or 5V (older microcontrollers)
	Output (Digital Pins)	0 [LOW] or 1 [HIGH] (2^0)	0V or 3.3V (newer microcontrollers) 0V or 5V (older microcontrollers)
Analog	Input (Analog Input Pins)	0 ~ 1023 (<2¹⁰)	3.3 / 2¹⁰
	Output (Digital PWM Pins)	0 ~ 255 (<2⁸)	3.3 / 2⁸

Table 1. The Ranges of Values for Digital/Analog Input/Output

Lab: Using a Transistor to Control High Current Loads with an Arduino

In this tutorial, you’ll learn how to control a high-current DC load such as a DC motor or an incandescent light from a microcontroller.

Introduction

In this tutorial, you’ll learn how to control a high-current DC load such as a DC motor or an incandescent light from a microcontroller. Microcontrollers can only output a very small amount of current from their output pins. These pins are meant to send control signals, not to act as power supplies. The most common way to control another direct current device from a microcontroller is to use a transistor. Transistors allow you to control the flow of a high-current circuit from a low-current source.

Video: Transistor Schematics
Video: Meet the motors
Video: Pulse-width modulating a transistor to to control a fan motor
Video: NPN Transistors
Video: Darlingtons and MOSFETs

What You’ll Need to Know

To get the most out of this Lab you should be familiar with the following concepts beforehand. If you’re not, review the links below:

What is a microcontroller
Beginning programming terms
What is a solderless breadboard and how to use one
Digital Input and output
Analog Output
Basic Electronics
Safety Warning: This tutorial shows you how to control high-current loads. This comes with a higher danger of injury from electricity than the earlier tutorials. Please be careful and double-check your wiring before plugging anything in, and never change your wiring while your circuit is powered.

Things You’ll Need

Prepare the breadboard

Connect power and ground on the breadboard to power and ground from the microcontroller. On the Arduino module, use the 5V or 3.3V (depending on your model) and any of the ground connections, as shown in Figures 11 and 12.

Figure 11 shows an Arduino Uno on the left connected to a solderless breadboard, right. The Uno’s 5V output hole is connected to the red column of holes on the far left side of the breadboard. The Uno’s ground hole is connected to the blue column on the left of the board. The red and blue columns on the left of the breadboard are connected to the red and blue columns on the right side of the breadboard with red and black wires, respectively. These columns on the side of a breadboard are commonly called the buses. The red line is the voltage bus, and the black or blue line is the ground bus.

As shown in Figure 12, the Nano is mounted at the top of the breadboard, straddling the center divide, with its USB connector facing up. The top pins of the Nano are in row 1 of the breadboard.

Images made with Fritzing

Add a potentiometer

Connect a potentiometer to analog in pin 0 of the module as shown in Figure 13 through Figure 15:

Schematic view of a potentiometer. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground. — Figure 13. Schematic view of a potentiometer connected to analog in 0 of the Arduino

Breadboard view of a potentiometer. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground. — Figure 14. Breadboard view of a potentiometer connected to analog in 0 of an Arduino Uno. The potentiometer is mounted in three rows of the left center section of the breadboard. The two outside pins of the potentiometer are connected to the voltage and ground bus rows, respectively. The center pin is connected to analog in 0 of the Uno.

Figure 15. Breadboard view of a potentiometer connected to analog in 0 of an Arduino Nano. The potentiometer is mounted in three rows of the left center section of the breadboard below the Nano. The two outside pins of the potentiometer are connected to the voltage and ground bus rows, respectively. The center pin is connected to analog in 0 (physical pin 4) of the Nano.

Connect a Transistor to the Microcontroller

The transistor allows you to control a circuit that’s carrying higher current and voltage from the microcontroller. It acts as an electronic switch. You can use a bipolar Darlington transistor like the TIP120, or you can use a MOSFET like the IRF520 or FQP30N06L for this lab. All three will work the same way and use the same circuit. See Figures 16 through Figure 19 for the drawings and schematic symbols of the transistors.

Pinout drawing of a TIP-120 transistor. It is facing forward with the heat sink tab at the top and the bulging side of the component facing you. From left to right the legs are labelled 1. base, 2. collector, 3. emitter. — Figure 16. Pinout drawing of a TIP-120 transistor. From left to right the legs are labelled 1. base, 2. collector, 3. emitter.

The schematic symbol of an NPN transistor where B is the base, C is the collector, and E is the emitter. — Figure 17. The schematic symbol of an NPN transistor. B is the base, C is the collector, and E is the emitter.

NPN Transistor and N-Channel MOSFET side by side. The physical packages of the transistor and MOSFET are nearly identical. The pin out of the N-channel MOSFET is comparable to the transistor, where G of the MOSFET is the gate (equivalent of base of the transistor), D is the drain (equivalent of the collector) and S is the source (equivalent of the emitter). — Figure 18. NPN Transistor and N-Channel MOSFET side by side with a schematic diagram of the MOSFET. G is the gate (equivalent of base), D is the drain (collector) and S is the source (emitter).

Another version of the schematic symbol of an N-channel MOSFET, where G is the gate (equivalent of base), D is the drain (collector) and S is the source (emitter). — Figure 19. Schematic symbol of an N-channel MOSFET, where G is the gate (equivalent of base), D is the drain (collector) and S is the source (emitter).

The IRF520 MOSFET has the same pin configuration as the TIP120, and performs similarly with a 5V gate voltage. The FQP30N06L MOSFET has the same pin configuration, and operates on as low as 1.0V, and works well for 3.3V applications. MOSFETs can generally handle more amperage and voltage, and switch a little faster (the difference is in microseconds, so you won’t notice), but they are more sensitive to static electricity damage. They are grouped into N-Channel and P-Channel, which are equivalent to NPN and PNP bipolar transistors.

All three transistors mentioned here are designed for switching high-current loads. All of them have built-in protection diodes. Each has three connections Table 1 below details their connections.

Bipolar Transistor	MOSFET	Connection
Base	Gate	Connects to microcontroller output
Collector	Drain	Connects to power through load
Emitter	Source	Connects to ground

Table 1. Names of the pins on the bipolar transistor and the equivalent names on the MOSFETs

The datasheets for each of the recommended transistors can be found below:

TIP120 Bipolar Darlington Transistor
IRF520 MOSFET – good for 5V control
FQP30N06L MOSFET – good for 3.3V control

Here’s the main operating principle of using a transistor as a switch: When a small voltage and current is applied between the base (or gate) and the emitter (or source), the transistor allows a larger current to flow between the collector (or drain) and emitter (or source).

Figures 20 through 22 show how to connect the transistor.

Figure 20. Schematic view of a potentiometer and transistor connected to an Arduino. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground. The base (or gate) of the transistor is connected to digital pin 9 of the Arduino through a 1-kilohm resistor. The emitter (or source) is connected to ground.

Figure 21. Breadboard view of a potentiometer and transistor connected to an Arduino. First leg of the potentiometer is connected to +5 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground. The base (or gate) of the transistor is connected to digital pin 9 of the Arduino through a 1-kilohm resistor. The emitter (or drain) is connected to ground.

Figure 22. Breadboard view of a potentiometer and transistor connected to an Arduino Nano. First leg of the potentiometer is connected to +3.3 volts. The second leg connected to analog in 0 of the Arduino. The third leg is connected to ground. The base (or gate) of the transistor is connected to digital pin 9 of the Arduino through a 1-kilohm resistor. The emitter (or drain) is connected to ground.

Connect a Motor and Power Supply

Attach a DC motor to the collector (or drain) of the transistor as shown in Figures 23 through 25. Most motors will require more current than the microcontroller can supply, so you will need to add a separate power supply as well. If your motor runs on around 9V, you could use a 9V battery. A 5V motor might run on 4 AA batteries (6V). You could also use a 12-volt DC wall adapter and a 5-volt regulator. A 12V battery may need a 12V DC wall adapter, or a 12V battery. The ground of the motor power supply should connect to the ground of the microcontroller on the breadboard.

Add a 1N400x power diode in parallel with the collector and emitter of the transistor, pointing away from ground. The diode protects the transistor from back voltage generated when the motor shuts off, or if the motor is turned in the reverse direction. Used this way, the diode is called a protection diode or a snubber diode. You can omit the diode if you don’t have one, as the transistors recommended here all have a built-in protection diode

Figure 23. Schematic view of a potentiometer connected to analog in 0 of the Arduino. A transistor is connected to Digital Pin 9. A DC motor connects to the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the DC motor. The negative wire of the DC jack connects to ground. The second wire of the DC motor connects to the collector (or drain) of the transistor. A 1N400x diode’s anode is connected to the collector (or drain), and its anode is connected to ground.

Figure 24. Breadboard view of an Arduino connected to a potentiometer, a transistor, a DC motor, and a DC jack. A transistor is connected to Digital Pin 9. A DC motor connects to the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the DC motor. The negative wire of the DC jack connects to ground. The second wire of the DC motor connects to the collector (or drain) of the transistor. A 1N400x diode’s anode is connected to the collector (or drain), and its anode is connected to ground.

Figure 25. Breadboard view of an Arduino Nano connected to a potentiometer, a transistor, a DC motor, and a DC jack. A transistor is connected to Digital Pin 9 through a 1-kilohm resistor. A DC motor connects to the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the DC motor. The negative wire of the DC jack connects to ground. The second wire of the DC motor connects to the collector (or drain) of the transistor. A 1N400x diode’s anode is connected to the collector (or drain), and its anode is connected to ground.

Be sure to add the diode to your circuit correctly. The silver band on the diode denotes the cathode which is the tip of the arrow in the schematic, like so in Figure 26:

Schematic representation and physical representation of a diode. The schematic form shows an equilateral triangle with a line bisecting the triangle equally from one point to and through the middle of the opposing flat side. There is also a line perpendicular to the other line that also intersects the triangle at its bisected point. The cathode is represented by the side of the schematic with the line. The drawing of the physical form of the diode looks like a black resistor with only a single grey stripe on one side. The side with the stripe represents the cathode — Figure 26. Schematic representation and physical representation of a diode. The silver band on the diode indicates the anode end.

Connect a Lamp Instead of a Motor

You could also attach a lamp using a transistor. There are many 12V incandescent lamps, designed for use in track lighting, gallery lighting, and so forth. Nowadays, there are many 12V DC LED equivalents of the 12V AC lamps as well. Here are a few examples:

Bi-Pin Socket for GU5.3/G4/GX5.3/GY6.35/GZ4 Base Bulbs – This socket works with the lamps below, and many others.
GY6.35 LED Landscape Light Bulb – 40 Watt Equivalent – Bi-Pin LED Bulb – 450 Lumens
GY6.35 LED Landscape Light Bulb – 40 Watt Equivalent – Bi-Pin LED Bulb – 275 Lumens
MR16 LED Single Color Landscape Light Bulb – 30 Degree – 35W Equivalent
12V LED strip light, 19 in.

The lamp circuit in Figures 27 through 29 assumes a 12V lamp. MOSFETs are generally best for switching incandescent and LED lamps, so the circuit below uses a MOSFET. In the lamp circuit, the protection diode is not needed, since there’s no way for the polarity to get reversed in this circuit.

Figure 27. Schematic view of a potentiometer, MOSFET, and lamp connected to an Arduino. The gate of a MOSFET transistor is connected to Digital Pin 9 of the Arduino. A 12V lamp connects to the drain of the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the lamp. The negative wire of the DC jack connects to ground. The second wire of the lamp connects to the drain of the transistor. The source of the transistor connects to ground.

Figure 28. Breadboard view of a potentiometer, MOSFET, and lamp connected to an Arduino. The gate of a MOSFET transistor is connected to Digital Pin 9 of the Arduino. A 12V lamp connects to the drain of the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the lamp. The negative wire of the DC jack connects to ground. The second wire of the lamp connects to the drain of the transistor. The source of the transistor connects to ground.

Figure 29. Breadboard view of a potentiometer, MOSFET, and lamp connected to an Nano. The gate of a MOSFET transistor is connected to Digital Pin 9 of the Nano. A 12V lamp connects to the drain of the transistor and a DC jack. The DC jack connects its positive wire to the first wire of the lamp. The negative wire of the DC jack connects to ground. The second wire of the lamp connects to the drain of the transistor. The source of the transistor connects to ground.

Program the microcontroller

Write a program to test the circuit, whether it’s a motor or a lamp. Your program should make the transistor pin an output in the setup method. Then in the loop, it should turn the motor on and off every second, just like the blink sketch does.

const int transistorPin = 9;    // connected to the base of the transistor
 
 void setup() {
   // set  the transistor pin as output:
   pinMode(transistorPin, OUTPUT);
 }
 
 void loop() {
   digitalWrite(transistorPin, HIGH);
   delay(1000);
   digitalWrite(transistorPin, LOW);
   delay(1000);
 }

Now that you see it working, try changing the speed of the motor or the intensity of the lamp using the potentiometer.

To do that, read the voltage of the potentiometer using analogRead(). Then map the result to a range from 0 to 255 and save it in a new variable. Use that variable to set the speed of the motor or the brightness of the lamp using analogWrite().

const int transistorPin = 9;    // connected to the base of the transistor
 
 void setup() {
   // set  the transistor pin as output:
   pinMode(transistorPin, OUTPUT);
 }
 
 void loop() {
   // read the potentiometer:
   int sensorValue = analogRead(A0);
   // map the sensor value to a range from 0 - 255:
   int outputValue = map(sensorValue, 0, 1023, 0, 255);
   // use that to control the transistor:
   analogWrite(transistorPin, outputValue);
 }

For the motor users: A motor controlled like this can only be turned in one direction. To be able to reverse the direction of the motor, an H-bridge circuit is required. For more on controlling DC motors with H-bridges, see the DC Motor Control lab.

Come Up with an Application

Now that you’ve got motor or lamp control, come up with an application.

If you used a motor in this lab, consider any toys you have that have a motor you could take control over. Charley Chimp™ has a motor that’s easy to control from an Arduino, for example.

Photo of a toy monkey. The back has been removed to reveal the inner gear mechanism that plays the cymbals. At the center of a mechanism is a DC motor. Wires have been attached to it to run the motor from an H-bridge. — The guts of a Charley Chimp™ cymbal-playing monkey.

You could also consider simple movements in the work of artists like Jennifer Townley, Johannes Langenkamp (instagram), Nick Yulman, or Lu Lyu.

You’ve got the beginnings of a good desk lamp or table lamp, if you chose to use a light bulb in this lab. How will you control it? How will you mount the switchor the dimmer knob? You might also want to consider a gooseneck pipe to mount your socket on, and a socket that goes with it. Here are a few inspirations:

Heng Balance Lamp
LZF Swirl
Rux Designs Stickbulb
Lyn Godley’s Crinkle Lamp and wineglass chandeliers
Julio Leparc

Overview

Things You’ll Need

Prepare the breadboard

Add an LED

Program the Microcontroller

Only one port at a time can access a serial port.

The P5.js WebSerial Library

The P5.js Sketch

Sending ASCII-Encoded Serial Data

Program the Microcontroller Again

Program P5.js To Control the LED

Processing ASCII-Encoded Strings With Arduino

Program p5.js To Send a String

Conclusion

Overview

Things You’ll Need

Prepare the breadboard

Add an LED

Program the Microcontroller

The P5.js serialport library

Install the P5.serialcontrol App

Only one port at a time can access a serial port.

The P5.js Sketch

Program P5.js For Serial Communication

Sending ASCII-Encoded Serial Data

Program the Microcontroller Again

Program P5.js To Control the LED

Processing ASCII-Encoded Strings With Arduino

Program P5.js To Send a String With a Newline Character

Conclusion

Introduction

Related Videos

Bipolar stepper motors

Unipolar Stepper Motors

Common Stepper Motor Types

Control of Stepper Motors

H-bridge Stepper Drivers

Step & Direction Stepper Drivers

Introduction

What You’ll Need

Making Sound Electronically

Pulsewidth Modulation vs. Frequency Modulation

Prepare the breadboard

Connect the Sensors and the Speaker

Check the sensor input range

Check that the Speaker Works

Play Tones

Play it Loud

Use Headphones

A more complex example

The Relation Between Pitches

A Musical Instrument

Program it

Get Creative

Doing More with Sound Output

Introduction

Analog Output

Applications of Pulse Width Modulation

LED dimming

DC Motor Speed Control

Note: Filter circuits

Servomotors

Changing Frequency

Ranges of Values

Introduction

What You’ll Need to Know

Things You’ll Need

Prepare the breadboard

Add a potentiometer

Connect a Transistor to the Microcontroller

Connect a Motor and Power Supply

Connect a Lamp Instead of a Motor

Program the microcontroller

Come Up with an Application