Spiro-Sketch

Manipulation of simple rules and mathematics can be used to create infinitely scalable and beautifully abstract imagery. However, without a background or an affinity towards that kind of vector math, there is a disconnect when introducing these ideas. Combining the playful interaction of an etch-a-sketch with the computing power of a Raspberry Pi, the Spiro—Sketch introduces these concepts in a fun engaging way.

The Case

The interface for the Spiro-Sketch was designed to mimic the experience of playing on an arcade machine, with minimal controls to encourage experimentation and play.

The natural quality of the wood contrasts the crisp acrylic. I leaned towards clear acrylic so the users see the guts of the machine.

The Internal Electronics

The Spiro Sketch consists of a Raspberry Pi, an Arduino Nano, and a 7” HDMI display. The code can be found below but the gist is that the Arduino reads the inputs coming off of the potentiometers on the front panel, sends that input to the Pi via serial communication, and the Pi takes that data and runs it through a Processing Sketch to generate different vector graphics based on the input.

Further Application

In the demo version that can be seen in the video at the top, the graphics aren’t particularly complex. The dials on the front panel affect the height, width, fill value (from black to white), and the stroke weight of the ellipse. In theory, any number of forms could be programed and mapped to the dials, the entire system could be scaled up to fit just as well in museum or a pop up, and new components could be added to allow for printing or different interactions. At the end of the day, its intention is to provide a more concrete understanding of the relationship between a vector image and the parameters given through play and exploration.

 The Code

ARDUINO CODE:

bool flag = false;
// the setup routine runs once when you press reset:
void setup() {
// initialize serial communication at 9600 bits per second:
delay(2000);
}
// the loop routine runs over and over again forever:
void loop() {
    Serial.begin(9600);
    // read the input on analog pin 0:
    int sensorValue0 = analogRead(A0);
    int sensorValue1 = analogRead(A1);
    int sensorValue2 = analogRead(A2);
    int sensorValue3 = analogRead(A3);
  // print out the value you read:
    Serial.println(sensorValue0);
    delay(50);        // delay in between reads for stability
    Serial.println(sensorValue1);
    delay(50);        // delay in between reads for stability
    Serial.println(sensorValue2);
    delay(50);        // delay in between reads for stability
    Serial.println(sensorValue3);
    delay(50);        // delay in between reads for stability
    Serial.flush();
  Serial.end();
}

PROCESSING CODE:

import processing.serial.*;
Serial myPort;
int xPos=1;
float data0;
float data1;
float data2;
float data3;
int dataStep = 0;

void setup() {
fullScreen();
noCursor();
println(Serial.list());
myPort=new Serial(this, Serial.list()[4], 9600);
myPort.bufferUntil(10);
myPort.clear();
background(255);
}

void draw() {
background(255);
//println(data0);
ellipse(width/2, height/2, data3, data3);
strokeWeight(data0);
fill(data1);
}

void serialEvent(Serial myPort) {
String inString = myPort.readStringUntil(10);
if (inString != null) {
switch(dataStep) {
case 0:
inString = trim(inString);
data0 = float(inString);
data0 = map(data0, 0, 1023, 0, width);
println(data0+" x");
dataStep++;
break;
case 1:
inString = trim(inString);
data1 = float(inString);
data1 = map(data1, 0, 1023, 0, height);
println(data1+" y");
dataStep++;
break;
case 2:
inString = trim(inString);
data2 = float(inString);
data2 = map(data2, 0, 1023, .25, 5);
println(data2+" thickness");
dataStep++;
break;
case 3:
inString = trim(inString);
data3 = float(inString);
data3 = map(data3, 0, 1023, 0, 255);
println(data3+" fill");
dataStep=0;
break;
}
}
}

MODIFICATIONS TO THE PI:

In addition to downloading Processing 3 and Arduino onto the Pi, a script that automatically runs a processing sketch was written and added to the autostart file using the shell command sudo nano ~/.config/lxsession/LXDE-pi/autostart. VNC was also used to establish a remote connection for additional control of the Pi.