Hack-a-Sketch

Difficulty Level = 5 [What’s this?]

Here is a device I call the Hack-a-Sketch. The screen is a normal laptop (an old one), but it has real knobs which control the stylus on the screen.

The Hack-a-Sketch

The Hack-a-Sketch

An Arduino board reads the inputs from two potentiometers (the knobs), and sends the information via USB to a Processing sketch which displays the path of the stylus on the screen. This was extremely easy to build because the Arduino is just running the StandardFirmata firmware. No custom code on the board. The Processing sketch was surprisingly easy to write. Using this really did feel like using an Etch-a-Sketch.

Here’s the Hack-a-Sketch in action. Wait for the big finish where I erase the image…

How did I erase the drawing by shaking the computer? There’s a mercury switch hidden behind the panel holding the knobs. When the code senses shaking, the image is slowly erased. More shaking = more erasure.

Disassembled Hack-a-Sketch exposing mercury switch to sense movement.

Disassembled Hack-a-Sketch exposing mercury switch to sense movement.

Finally, here’s the Processing code that does all the work:

import processing.serial.*;

import processing.core.*;
import cc.arduino.Arduino;

PImage backgroundImage;
Arduino arduino;
int STYLUS_X_PIN = 0;
int STYLUS_Y_PIN = 1;
int MERCURY_SWITCH_LEFT_PIN = 8;
int MERCURY_SWITCH_RIGHT_PIN = 9;
// Origin is lower left corner of screen.
int originX = 146;
int originY = 673;
int width = 740;
int height = 530;
int PEN_COLOR = 50;
int GRAY = 217;
int GRAY_ALPHA = 80;
int lastX, lastY;
int SMOOTH_BUFFER_SIZE = 2;
int[] smoothBufferX = new int[SMOOTH_BUFFER_SIZE];
int[] smoothBufferY = new int[SMOOTH_BUFFER_SIZE];
int smoothBufferXSum = 0;
int smoothBufferYSum = 0;
int LEFT = 0;
int RIGHT = 1;
int SHAKE_SPEED_THRESHOLD = 300;
int lastSwitchPosition;
int lastSwitchPositionChange;

void setup() {
    size(1024, 768);
    frameRate(24);
    backgroundImage = loadImage("hackasketch-cropped.jpg");
    background(backgroundImage);

    String[] ports = Arduino.list();
    println(ports[0]);
    println(ports[1]);
    String port = ports[1];
    try {
        arduino = new Arduino(this, port, 115200);
        arduino.pinMode(MERCURY_SWITCH_LEFT_PIN, Arduino.INPUT);
        arduino.pinMode(MERCURY_SWITCH_RIGHT_PIN, Arduino.INPUT);
    } catch (Exception e) {
        println("Failed to find Arduino board");
    }
    stroke(PEN_COLOR);
}

void draw() {
    smooth();
    int x, y;
    if (frameCount == 1) {
        // Give the Arduino some time to initialize so we can get a good first
        // reading from the potentiometers.
        delay(2000);
        lastX = readStylusX();
        lastY = readStylusY();
        for(int i=0;i < SMOOTH_BUFFER_SIZE;i++) {
            smoothBufferX[i] = lastX;
            smoothBufferXSum += lastX;
            smoothBufferY[i] = lastY;
            smoothBufferYSum += lastY;
        }
        point(originX+lastX, originY-lastY);
    }

    x = smoothX(readStylusX());
    y = smoothY(readStylusY());
    if ((x != lastX) || (y != lastY)) {
        line(originX+lastX, originY-lastY, originX+x, originY-y);
    }
    lastX = x;
    lastY = y;

    if (shake()) {
        erase();
    }
}

boolean shake() {
    boolean left = (arduino.digitalRead(MERCURY_SWITCH_LEFT_PIN) == Arduino.HIGH);
    if (left && (lastSwitchPosition != LEFT)) {
        lastSwitchPosition = LEFT;
        if ((millis() - lastSwitchPositionChange) < SHAKE_SPEED_THRESHOLD) {
            lastSwitchPositionChange = millis();
            return true;
        }
        lastSwitchPositionChange = millis();
    }
    boolean right = (arduino.digitalRead(MERCURY_SWITCH_RIGHT_PIN) == Arduino.HIGH);
    if (right && (lastSwitchPosition != RIGHT)) {
        lastSwitchPosition = RIGHT;
        if ((millis() - lastSwitchPositionChange) < SHAKE_SPEED_THRESHOLD) {
            lastSwitchPositionChange = millis();
            return true;
        }
        lastSwitchPositionChange = millis();
    }
    return false;
}

void keyPressed() {
    if (key == ' ') {
        erase();
    }
}

void erase() {
    fill(GRAY, GRAY_ALPHA);
    noStroke();
    rect(originX, originY-height, width+1, height+1);
    stroke(PEN_COLOR);
}

// Read current stylus X position relative to the origin.
int readStylusX() {
    int reading = arduino.analogRead(STYLUS_X_PIN);
    return (int)map((float)reading, 0f, 1023f, 0f, (float)width);
}

int smoothX(int v) {
    int index = frameCount % SMOOTH_BUFFER_SIZE;
    smoothBufferXSum -= smoothBufferX[index];
    smoothBufferXSum += v;
    smoothBufferX[index] = v;
    return (int)(smoothBufferXSum / SMOOTH_BUFFER_SIZE);
}

// Read current stylus Y position relative to the origin.
int readStylusY() {
    int reading = arduino.analogRead(STYLUS_Y_PIN);
    return (int)map((float)reading, 0f, 1023f, 0f, (float)height);
}

int smoothY(int v) {
    int index = frameCount % SMOOTH_BUFFER_SIZE;
    smoothBufferYSum -= smoothBufferY[index];
    smoothBufferYSum += v;
    smoothBufferY[index] = v;
    return (int)(smoothBufferYSum / SMOOTH_BUFFER_SIZE);
}



Published by Michael, on October 31st, 2009 at 7:45 am. Filed under: Arduino,Level 5,Processing. | 19 Comments |





19 Responses to “Hack-a-Sketch”

  1. […] you don't really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | Products & Tech News on November 23, 2009 at 11:57 PM



  2. […] really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | CHARGED's Digital Lifestyle at Work or Play on November 24, 2009 at 12:47 AM



  3. […] A Sketch Posted 24 Nov. 2009 8:40 AM in Gadgets, Mods by Roland Hutchinson The guys over at Nootropic Design have created a cool version of the Etch A Sketch, the Hack A […]

    Pingback by The Hack A Sketch | Geeky Gadgets on November 24, 2009 at 2:41 AM



  4. […] really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | BestGadget.Info on November 24, 2009 at 2:46 AM



  5. […] created the Hack-a-Sketch – An Arduino board reads the inputs from two potentiometers (the knobs), and sends the information […]

    Pingback by Laptop Etch-a-Sketch via Arduino & Processing | SquareCows on November 24, 2009 at 8:20 AM



  6. […] and frustrating at the same time. This project lets us recreate this interface on our computer. The Hack a Sketch is a combination of an Etch a Sketch style input and a processing sketch to recreate the […]

    Pingback by Hack a Sketch - Hack a Day on November 24, 2009 at 9:18 AM



  7. To quote Weird Al, “Got a flat-screen monitor forty inches wide wide / I believe that your says ‘Etch-A-Sketch’ on the side.”

    Comment by Alastair on November 24, 2009 at 9:35 AM



  8. […] This post was mentioned on Twitter by gumbercules, Nadia. Nadia said: Am re-living my childhood right now: laptop etch-a-sketch – http://bit.ly/6YsZVc […]

    Pingback by Tweets that mention Project Lab -- Topsy.com on November 24, 2009 at 9:40 AM



  9. Social comments and analytics for this post…

    This post was mentioned on Digg by mishabear: Cool. But why?

    Trackback by uberVU - social comments on November 24, 2009 at 10:37 AM



  10. […] guys over at the Project Lab have made a cool Computer based Etch a Sketch project called Hack a Sketch. Looks like it works just like a real one. This project is basically the reverse of this Etch a […]

    Pingback by Hack a Sketch – Computer based Etch a Sketch | L&C Tech Talk on November 24, 2009 at 10:48 AM



  11. […] and frustrating at the same time. This project lets us recreate this interface on our computer. The Hack a Sketch is a combination of an Etch a Sketch style input and a processing sketch to recreate the […]

    Pingback by Hack a Sketch on November 24, 2009 at 11:30 AM



  12. that’d be kinda neat if you integrated it into a thinkpad’s active hard drive protection, that way you wouldn’t need the mercury switch AND it’d stop the hard drive when you started to shake it, which would negate all those complaining about destroying it.

    Comment by Amy on November 24, 2009 at 11:55 AM



  13. […] [Hack-A-Sketch via Gizmodo] […]

    Pingback by Laptop Too High-Tech For Your Needs? Turn It Into An Etch-A-Sketch | CoolThings.com | Anything and Everything Cool on November 26, 2009 at 9:36 AM



  14. […] really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | Techno Portal on November 27, 2009 at 8:55 AM



  15. Listen guys over at the Project Lab have made a cool Computer based Etch a Sketch project called Hack a Sketch. Looks like it works just like a real one.This project lets us recreate this interface on our computer. The Hack a Sketch is a combination of an Etch a Sketch style input

    Comment by insulated copper wire on January 6, 2010 at 1:46 PM



  16. […] really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | FocuSoft Tech Blog on January 18, 2010 at 5:53 PM



  17. […] knobs with physical resistance and a proper shake-to-clear integrated into such a project. ┬áThe Hack-a-Sketch takes a Lenovo ThinkPad laptop and adds the usual two Etch-a-Sketch rotary knobs; this time, […]

    Pingback by Hack-a-Sketch takes classic toy digital [Video] | FocuSoft Tech Blog on January 18, 2010 at 6:06 PM



  18. […] really need to worry about the hard drive since this project kinda destroys your screen. [Project Lab via […]

    Pingback by DIY Laptop Etch-A-Sketch is Almost Worth Destroying a Hard Drive [DIY] | Technology Magazine on January 19, 2010 at 1:01 PM



  19. I came across this blog a few days back but completely did not remember to bookmark it – I wont make the same mistake just as before – it goes right in my favourites.

    Comment by Jana Myers on December 31, 2010 at 4:54 PM



Leave a Reply

*