2019Banners-08.png
 

How can we teach the relationship between math and images in an engaging way?

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 natural quality of the wood contrasts the crisp acrylic. I leaned towards clean acrylic so let the users see the guts of the machine.

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

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.

IMG_2710.jpg

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.

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.