Hello World is the traditional first program to be written when one is beginning a new language. In software, this means printing the string "Hello, World". In hardware, this means blinking an LED. Since p5.bots bridges the line, we'll do both!
Note: This tutorial assumes you are working on a Mac, have administrator rights on your machine.
- Node 0.12.x+
- NPM 2.0.x+
- Arduino Uno
- 1 LED
- 220 Ohm resistor
- Breadboard, wire
If you need help with node or NPM, check out the guide at Treehouse.
To use p5.bots, our Arduino needs to have the Standard Firmata sketch uploaded to it. This sketch tells our Arduino how to interpret the commands p5bots sends.
- Download the Arduino IDE.
- Upload
File > Examples > Firmata > StandardFirmata
to your board. To do this, you'll have to select your board and serial port from theTools
menu. (More instructions from Arduino.) - Write down the port your board is using; you may need it later.
- Open Terminal.
- Install p5bots-server by running:
npm install -g p5bots-server
Next, we need to create a place to put our project.
- Create a new folder for the project:
helloWorld
. - Add two files in this folder:
index.html
andsketch.js
. - Inside
helloWorld
create another folder calledscripts
. Move the copies ofp5.js
andp5.bots.js
into it.
Now that we have all the parts we need, we can start writing our code. Let's open index.html
and add in the boilerplate we need for all HTML files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELLO!</title>
</head>
<body>
</body>
</html>
Then we need to tell this file about all the screipt files we need: p5.js
and p5.bots.js
, plus a pointer to the socket.io CDN. Socket.io is how we send messages between the two parts of p5.bots. A CDN is location on the internet where this is kept. Since so many people use it, it can make more sense to point people to this one instead of having our own copy.
We will also tell it about our sketch file.
<body>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="scripts/p5.min.js"></script>
<script src="scripts/p5bots.js"></script>
<script src="sketch.js"></script>
</body>
That's all the code we need in index.html
. The rest will be in sketch.js
. Let's open that and add the first Javascript: the p5 setup
and function:
function setup(){
}
We will want tell p5 about the board and the board about p5. We should also mention that we will be creating an LED pin. Let's put these before setup, since both functions need to know about them. You will want the first argument, where it says '/dev/cu.usbmodem1421'
to match the port you write down in the Arduino setup.
var b = p5.board('/dev/cu.usbmodem1421', 'arduino');
var led;
function setup(){
}
The LED will be controlled by sending electricity through a pin to our hardware setup. (We'll do that next.) We can declare the pin in setup, noting that it will be plugged into pin 9 and will be an LED.
function setup(){
led = b.pin(9, 'LED');
}
Finally, once the sketch is running, we will use key presses to the arrow keys to trigger functionality. To do so, we will use p5's keyPressed()
method.
function keyPressed() {
if (keyCode === LEFT_ARROW){
led.on();
} else if (keyCode === RIGHT_ARROW) {
led.off();
} else if (keyCode === UP_ARROW){
led.blink();
} else if (keyCode === DOWN_ARROW) {
led.noBlink();
}
}
Let's also be sure it says "Hello, Wold!" when we call led.blink
.
function keyPressed() {
if (keyCode === LEFT_ARROW){
led.on();
} else if (keyCode === RIGHT_ARROW) {
led.off();
} else if (keyCode === UP_ARROW){
led.blink();
console.log('Hello, World!'); // <- here!
} else if (keyCode === DOWN_ARROW) {
led.noBlink();
}
}
Bam! That's all the Javascript. Your complete file should look like this:
var b = p5.board('/dev/cu.usbmodem1421', 'arduino');
var led;
function setup() {
led = b.pin(9, 'LED');
}
function keyPressed() {
if (keyCode === LEFT_ARROW){
led.on();
} else if (keyCode === RIGHT_ARROW) {
led.off();
} else if (keyCode === UP_ARROW){
led.blink();
console.log('Hello, World!');
} else if (keyCode === DOWN_ARROW) {
led.noBlink();
}
}
Whew! We're halfway there. Now we can put the computer aside for a moment and build our circuit:
The short leg of the LED will be wired to GND, ground. Wires going to ground are often indicated with black wires on diagrams.
The other leg will be connected to a resistor (they will be plugged in to the same row). The resistor protects the LED from getting too much power at once.
Finally, the LED will be connected to pin 9 on the Arduino board. Becuase we will send information over this wire, it is yellow. In this case, the information is just a signal as to whether to let power run into the circuit or not.
You can test that your setup is working by plugging the Arduino into the computer and taking the wire that is in pin 9 and putting it into 3.3V. If the LED lights, the citcuit is okay. Now, move the wire back to 9 and keep the Arduino plugged in.
Now we need to open the gates and let the two talk.
- Return to the Terminal.
- Type
bots-go -d
, then drag thehelloWorld
folder into the terminal window. You should end up with something like this:
bots-go -d /Users/computer/sites/p5bots/helloWord/
Hit enter and you should something like this:
server starting
Yay! Everything is running. Open a web browser to localhost:8000
. Hit the left arrow to turn the LED on; right to turn it off. Hit up and get it blinking.
Now open the console, probably by hitting: command+option+I
. There should be note for you in the log: the LED is saying hello!