For the Physical Computing midterm, Rune Madsen, Benji Canning Pereira, and myself  decided to focus on a whimsical, fun project. Using Arduino and Processing, Etch Yo Sketch is a digital twist on the nostalgic kid’s toy, Etch-a-Sketch. Rather then focusing solely on software, we wanted to mimic the tactile feel and imaginative play in an old-school format – so we constructed “Etch Yo Sketch” within an arcade-machine setup. Underneath the arcade machine is a Mac Book Pro reading the serial communication between our sensors and an Arduino which is displayed on screen.

Play Interaction:

Twirl the 360-degree Potentiometers to draw lines along the screen canvas. Twist the regular potentiometers to select your choice of color for the lines. Hit the reset button to restart from scratch. Hit the upload button to see your work saved and presented on our Etch Yo Sketch gallery. Watch the Making of Etch Yo Sketch, below.

Physical Setup + Troubleshooting:

We knew right off that we wanted to mimic a physical interface similar to the Etch A Sketch. At first, we thought to make a wood box. However, after testing a cardboard box as an initial prototype,  we discovered that the Mac Book Pro was a perfect fit for this design. We nestled insulating foam to provide cushion and prevent shifting. We outlined the box to conform to an arcade machine, sculpted it out, and made room for the computer screen. Felt is used for exterior decoration and controller display.

With five Potentiometers, two buttons, we found wiring the breadboard to be nightmarish. Certain wires wouldn’t stay plugged to the breadboard and would come undone easily. Plus, it was visually confusing with wires for Analog In, Ground, Power mixing around.

Solution: To ensure security and organization to the breadboard, we soldered the wires to a row of headers so they would stick. One row was dedicated to inputs (buttons, potentiometers), two other rows were dedicated to Power Source (ground, power).  Don’t forget to snick off the headers not being used so you don’t get confused.

Software Setup + Troubleshooting

The hardware of the Etch Yo Sketch was designed to mimic the actual Etch A Sketch. Therefore, we needed our Processing software to interpret readings from the 360-degree pots we used for the drawing knobs. Regular potentiometers go in value from 0 to 1023 bytes and crank to about 300 degrees. How do we take into account a Potentiometer that can whirl around 360 degrees? Twirled continuously, the 360-degree pots repeated the values 0-1023 bytes over and over.

How could Processing interpret those values? How would it affect our Processing sketch? Left alone, on the Processing Sketch, a plotted line would appear glitchy, repeating and skitting across the screen as certain values were repeating.

Solution: We wanted the lines to move steadily in the same direction without glitches. In Processing, you would save the last value of the 360-degree potentiometer sensor, read the new value from the pot sensor, and subtract  the new value from the previous value (Old value – New value = Difference in values). By taking the difference in values, you can use that measurement to move the line in a continuously smooth fashion. What happens if you go from a value of 1023 back to 0? In Processing, an IF statement would be triggered: if the difference in values (from the old pot reading – new pot reading), was greater then 500, that difference would be subtracted from 1023 (1023-difference in value readings).

Another dilemma: When drawing with potentiometers, keep this in mind. Sometimes, the numbers generated will flicker if you check them in Serial Monitor or in Processing. To eliminate the glitchy numbers, in Processing, we only used the differences if the value was greater then 1 or lower than 1).

Etch Yo Sketch Processing Sketch

Arduino Setup:

/*************** VARIABLES **************/

int leftRightPot = 0;
int upDownPot = 1;
int rPot = 2;
int gPot = 3;
int bPot = 4;

int resetButton = 2;
int uploadButton = 3;

int theValue = 0; 

/*************** SETUP **************/

void setup()
{
     Serial.begin (9600); // set up the communication between Arduino + PC
     pinMode(resetButton, INPUT); // define button for INPUT
     pinMode(uploadButton, INPUT); // define button for INPUT

}

/*************** CODE IN ACTION **************/

void loop()
{
    theValue = analogRead(leftRightPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = analogRead(upDownPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = analogRead(rPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = analogRead(rPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = analogRead(gPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = analogRead(bPot); // puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

    theValue = digitalRead(resetButton); // DIGITAL button: puts the values within the variable
    Serial.print(theValue, DEC); // print the values in DEC format (#s)
    Serial.print(","); // adds a comma to separate series of number readings

   theValue = digitalRead(uploadButton); // DIGITAL BUTTON: puts the values within the variable
    Serial.println(theValue, DEC); // print line: last line of code should end the code so it can restart a new set of values.

}

Recommendations:

1) TEST ALL YOUR WIRES/SETUP initially before you get fully invested in your idea. That helps you head off bad wiring issues that may crop up later i you don’t carefully think of how to organize your breadboard setup.

2) Experiment with new sensors before diving into a project – that’ll let you know right away whether an idea is executable. We almost went without the 360-degree pots because of the values they generated — which Rune was able to troubleshoot.

3) Test first with a rough prototype before cutting precious supplies. Make a paper pattern or prototype if possible. We found we were able to see ideas quickly and execute them by testing with cardboard rather then using the woodshop supplies.

4) Fabric Glue + Duct Tape = No fuss mockups. Felt covered alot of our pComp sins.