by Sarah Groff Hennigh-Palermo

This is a companion to Sarah’s article “Hardware for Art, Hardware for All.”

Named after a description of the characteristic color palette generated by using random input colors, Clown Barf will walk through setting up a push button and potentiometer and using them to draw to the screen. From here, you can go anywhere.

Skill Level

Hardware: Novice. As long as you feel comfortable with the Fritzing diagram below, you should be ok.

Software: Intermediate. You should feel comfortable installing packages from npm and starting a server from the command line. You should be comfortable with Javascript.



  • Arduino Uno
  • Pushbutton
  • Potentiometer
  • Small breadboard
  • Jumper wires


  • Your fave computer (tutorial assumes a Mac)
  • With a sweet text editor
  • And Node 4.x+ already installed


Get Your Arduino Ready

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.

  1. Download the Arduino IDE.
  2. Upload File > Examples > Firmata > StandardFirmata to your board. To do this, you’ll have to select your board and serial port from the Tools menu. (More instructions from Arduino.)
  3. Write down the port your board is using; you may need it later.

Get p5.js and p5.bots

  1. Install p5bots-server: npm install -g p5bots-server
  2. Download p5.js.
  3. Download p5.bots client-side script.


In index.html we include all the scripts we need and that’s about it.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Clown Barf</title>
    <!-- p5bots uses to communicate between the board and browser -->
    <script src=""></script>
    <!-- p5.dom includes functions we use to write text to the screen; the rest of the drawing code is in the main file -->
    <script src="/scripts/p5.min.js"></script>
    <script src="/scripts/p5.dom.js"></script>
    <script src="/scripts/p5bots.js"></script>
    <script src=“sketch.js"></script>

In sketch.js we do most of the work.

// Board setup — you may need to change the port
// to the port you noted when uploading Firmata
var b = p5.board('/dev/cu.usbmodem1421', 'arduino');

// Draw ellipses with a button

var w = window.innerWidth,
    h = window.innerHeight - 100,
    button, potent;

function setup() {
  // Initialize button, read pin and start read function, 
  // which will change p.val when the read val changes
  button =, 'DIGITAL', 'INPUT');;

  // Initialize potentiometer here VRES stands for variable
  // resistor, which means you could use this code for all sorts
  // of resistor sensors, like flex or force sensors
  potent =, 'VRES');;

  console.log(button, potent); // check out the console to see what these objects have available

  // Create the base canvas
  createCanvas(w, h);
  noStroke(); // this p5 function keeps our circles from being outlined

  // Add instructions
  var innerStr = '<p style="font-family:Arial;font-size:12px">'
  innerStr += 'Press the button to draw. Turn the knob for size.</p>';


function draw() {
  // Create ellipse and draw it if button.val = 1;
  var frameW = w,
      frameH = h,
      r      = potent.val/2; // using the potentiometer to set the size
  if (button.val) {
    fill(Math.random() * 255, Math.random() * 255, Math.random() * 255); // this is what produces the clown barf effect
    ellipse(Math.random() * frameW, Math.random() * frameH, r, r);


Use the diagram below to set up your circuit.

Bring It All Together

Now we need to open the gates and let the two talk.

  1. Return to the Terminal.
  2. Type bots-go -d, then drag the helloWorld folder into the terminal window. You should end up with something like this:

bash bots-go -d /Users/computer/sites/funExample/

Hit enter and you should something like this:

bash server starting

Hello, World!

Yay! Everything is running. Open a web browser to localhost:8000. Go nuts.