Tutorial: Create “clown barf” with Arduino and p5

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.

Supplies

Hardware

Arduino Uno
Pushbutton
Potentiometer
Small breadboard
Jumper wires

Software

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

Instructions

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.

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 the Tools menu. (More instructions from Arduino.)
Write down the port your board is using; you may need it later.

Get p5.js and p5.bots

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

Code

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Clown Barf</title>
</head>
<body>
    <!-- p5bots uses socket.io to communicate between the board and browser -->
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></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>
</body>
</html>

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 = b.pin(9, 'DIGITAL', 'INPUT');
  button.read();

  // 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 = b.pin(0, 'VRES');  
  potent.read();

  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>';

  createDiv(innerStr);
}

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);
  }
}