THIS IS GAME MAN 🎮 — A digital drawing game that prompts you with sketches to finish
GAME MAN, our prototype ready for action. An iPad sits as a screen that displays a drawing made in p5 through serial data created from components on an Arduino micro-controller
Similarly to an analog etch-a-sketch, with the two dials controls one can draw on the screen. The benefit of GAME MAN working digitally is that gives the artist using it more choice in movement without having to suffer drawing over their lines. With the slider, the artist can cycle through a choice of 8 colors. The red button lets stop drawing as to not ruin their vision and lines, and the yellow button randomizes and new prompt to finish. Below is a video of it in action in video 0.
VIDEO 0 : A man uses GAME MAN to finish a sketch of Gary the Snail from SpongeBob.
VIDEO 0 : A man uses GAME MAN to finish a sketch of Gary the Snail from SpongeBob.
Our project was based on one of my first sketches in p5: a simple drawing program. You can see that here, with mouse position, the program allows for a one to draw on a white background with either randomized colored circle or a smaller black dot, which I intended as a cursor of sorts if one wished to stop drawing.
We thought it would be very fun to take this out of the p5 editor and give us a controller to draw with. I started building that, our minimum viable product, and our project's first name came about ... Tech-a-sketch. A quick google revealed that had been taken :( we knew it would have to change.
I wrote up the Arduino sketch below, and then worked on communicating serially through the p5 web socket into another p5 sketch.
I gave each sensor a value and printed them all together in one string, which made sense give that I wanted readings to be constant and simultaneous.
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
}
function draw() {
fill ('black');
noStroke();
circle(mouseX,mouseY,2,25);
// cursorBall();
if (mouseIsPressed) {
r = random (0,255);
g = random (0,255);
b = random (0,255);
a = random (0,255);
noStroke();
fill (r,g,b,a);
circle(mouseX,mouseY,2);}
if (mouseIsPressed) {
d = random (0,50);
noStroke();
fill (r,g,b,a);
circle(mouseX,mouseY,d,25);}
}
void setup() {
Serial.begin(9600); // initialize serial communications
pinMode(10,INPUT_PULLUP);
Serial.setTimeout(20); // set the timeout for parseInt
}
void loop() {
int sensorValuex = analogRead(A0);
int sensorValuey = analogRead(A1);
Serial.println((String)sensorValuex + "," + sensorValuey + "," + digitalRead(10));
}
VIDEO 1
Above, in video 1, is my first solo play-test.
In the p5 sketch, under serialEvent(), I split the three string and assigned them each to their own variable, whic would later be read in the draw() function, and mapped the values coming in (0-1023 for the potentiometers for example) to values of the canvas.
This code would later have to expand to include a color slider, and a button that activated a DC motor and our erase/reset button.
let serial; // variable to hold an instance of the serialport library
let portName = '/dev/tty.usbmodem141101'; // fill in your serial port name here
//let inData; // for incoming serial data
let xpos;
let ypos;
let buttonPress = false;
let toggle = false;
function setup() {
createCanvas(windowWidth, windowHeight);
background('white');
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on('list', printList); // set a callback function for the serialport list event
serial.on('connected', serverConnected); // callback for connecting to the server
serial.on('open', portOpen); // callback for the port opening
serial.on('data', serialEvent); // callback for when new data arrives
serial.on('error', serialError); // callback for errors
serial.on('close', portClose); // callback for the port closing
serial.list(); // list the serial ports
serial.open(portName); // open a serial port
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (var i = 0; i < portList.length; i++) {
// Display the list the console:
console.log(i + portList[i]);
}
}
function serialEvent() {
// read a string from the serial port:
var inString = serial.readLine();
// check to see that there's actually a string there:
if (inString.length > 0 ) {
// console.log(inString);
// Split it
// convert it to a number:
// inDataX = Number(inString);
// inDataY = Number(inString);
let sensors = split(inString, ','); // split the string on the commas
if (sensors.length > 2) {
xpos = map(sensors[0], 0, 1023, (0), width);
ypos = map(sensors[1], 0, 1023, (0), height);
buttonPress = sensors[2];
console.log(buttonPress)
}
}
}
function serverConnected() {
console.log('connected to server.');
}
function portOpen() {
console.log('the serial port opened.')
}
function serialError(err) {
console.log('Something went wrong with the serial port. ' + err);
}
function portClose() {
console.log('The serial port closed.');
}
function draw() {
fill ('black');
noStroke();
// circle(xpos,ypos,25);
// cursorBall();
if (buttonPress == 0) {
toggle = !toggle
}
if (toggle) {
d = random (0,50);
r = random (0,255);
g = random (0,255);
b = random (0,255);
a = random (0,255);
noStroke();
fill (r,g,b,a);
smooth();
circle(xpos,ypos,d);
} else {
noStroke();
fill ("black");
smooth();
circle(xpos,ypos,1);
}
}
Our first play test was successful. It was an open trial. The only instructions we gave our artists (what we call our users) was that they were to use two potentiometers control knobs to control what happened on the screen. We let them press buttons to realize they could draw.
This free test showed us that our hypotheses that users would like to erase and have more control over how their drawings looked were true. They were not so frustrated by our lack of instruction, rather curious. We also learned that it would be a good idea to move away from connecting this project to a real, classic, analog etch-a-sketch, as it created expectations for the functioning, intention and result that came from our build. This is why, for example, the background in the video to the right is a sandy color.
This idea that we should move past relating to the real etch-a-sketch was vindicated by our class which is mostly international. The majority of just the people in the room has never used one, so not only was the name etch-a-sketch creating expectation for our work, it was not helping instruct potential users.
This also informed our later decision to have unfinished drawings as prompts for our 'artists'.
To the right in video 3, you can see Stela - who, to our pleasure has masterfully steady hands - using what I had originally intended to be nothing but a locator, a cursor, as her drawing too. She found that she could get more detail out of the small black dots than what I thought were amusing randomized ellipses. She chose to draw a face.
From them we knew we could move forward.
We kept building. Once we knew our ideas could work, we split up our responsibilities. I made the basic function and worried about materials, Martha had to get the slider working (which she learned was just a different looking potentiometer) and Jinny worked on the erase feature to which she added a vibrating DC motor.
VIDEO 3: Stela drawing a face with our early version of GAME MAN.
VIDEO 3: Stela drawing a face with our early version of GAME MAN.
Below is a screenshot of our Figma sketch [private link] where we planned and shared information.
I built out the final board for the project and documented it in Fritzing. The sketch is below.