Responsive Drawing (Lab 4)


Placing an FSR on a charcoal pencil, so that when I draw, the pressure I use in gripping the pencil maps to the color of a brush stroke on a processing visualization. The intention is to create a physical drawing, but also create a completly different digital drawing that reflects my process and maps to the same intensities I was using throughout the drawing. The next iteration will have an FSR on my eraser, also mapping to a specific color on the Processing image. This will show when I erase or backtrack in my work.

The Processing image is a spiral, meant to reflect the iterative and never finished aspects of drawing. Multiple slightly curved marks are used side by side to look like a brush stroke. Slight +/- randomness is put into the mark size to give a more organic effect. There is also a +/- randomness to the angle of each mark, so as the spiral is painted, it gives the effect of a brush moving along as some marks appear to be following other marks.


  • 1 Arduino Uno
  • 1 Breadboard
  • 1 10k ohm resistor
  • 1 FSR
  • Drawing pad
  • Charcoal pencil
  • Next iteration: 1 more 10k ohm resistor
  • Next iteration: 1 more FSR
  • Next iteration: eraser


//Variables for serial port set up
import processing.serial.*;
// Change this to the portname your Arduino board
String portname = "/dev/cu.usbmodem1411"; // or "COM5"
Serial port;
String buf="";
int cr = 13; // ASCII return == 13
int lf = 10; // ASCII linefeed == 10

int serialVal = 0;

//Variables for image
float c = .1; //any constant. higher = radius gets larger faster.
int canvas_w = 600;
int canvas_h = 600;
int origin_w = canvas_w/2;
int origin_h = canvas_h/2;
float r_x = 0.0;
float r_y = 0.0;
float r = 0.0; //changes the trailing effect with the radians randomly going plus or minus. 
int i = 1;
float angle = 0.0;
float radius = 0.0;
int lineLength = 60;
void settings() {
 size(canvas_w, canvas_h);

void setup() {
 //other setup things here? 
 port = new Serial(this, portname, 9600); 

void draw() {
 stroke(0, serialVal/2, serialVal/2);
 translate(canvas_w/2, canvas_h/2); 
 r_x = random(-1.0, 1.0);
 r_y = random(-1.0, 1.0);
 r = random(-.25, .25);
 radius = c*(i^(1/2)); //fibonacci
 angle += 1/radius; //as circle gets larger, we want the angle to be smaller to maintain same rate on circumference of spiral
 rotate(angle + r);
 translate(0, radius);
 curve(-r_x, -r_y, r_x, lineLength + r_y, 5, 20, 10, 30);
 i += 1;

void serialEvent(Serial p) {
 int c =;
 if (c != lf &amp;&amp; c != cr) {
 buf += char(c);
 if (c == lf) {
 serialVal = int(buf);
 buf = ""; 

//Use this for debugging
//void mousePressed() {
// loop(); 
<img class="alignnone size-medium wp-image-1108" src="" alt="screen-shot-2016-09-23-at-2-17-30-pm" width="287" height="300" /><img class="alignnone size-medium wp-image-1109" src="" alt="img_7360" width="300" height="225" /></strong>

Leave a Reply