Build this project at our next weekend-long Arduino workshop!

Electronic Etch-a-Sketch™

The Electronic Etch-a-Sketch™ uses two rotary potentiometers as inputs, and a Processing sketch as an output. The Arduino coninunously sends an X and a Y coordinate over the Serial interface. The Processing sketch uses these coordinates to move a draw pointer around a window, tracing as it does so, just like an Etch-a-Sketch™.

Hardware

Wiring

Wire up your Arduino as shown in the image below:

Two potentiometers, connected to analog pins A0 and A1

The colors of the wires are purely cosmetic; you don’t need to match the colors shown in the diagram.

Software

  1. Download Processing, an easy-to-use graphics programming development environment.

  2. Upload the following code to your Arduino:

    int x;
    int y;
    
    void setup()
    {
      Serial.begin(9600);
    }
    
    void loop()
    {
      x = analogRead(A0);
      y = analogRead(A1);
      Serial.print(x);
      Serial.print(" ");
      Serial.println(y);
      delay(50);
    }
    
  3. Verify that your Arduino is sending frequent X and Y coordinates by clicking on the Serial Monitor button in the Arduino window.

  4. Close the Serial Monitor and open Processing.

  5. Copy the following code into a new Processing sketch:

    // Etch-a-Sketch
    // based on a sketch by Trevor Shannon
    
    import processing.serial.*;
    
    Serial port;
    String serialInterface = "/dev/cu.usbmodem-blah";
    int lastX = -1;
    int lastY = -1;
    int x;
    int y;
    String nextXY;
    
    void setup() {
      size(512, 512);
      background(255);
      port = new Serial(this, serialInterface, 9600);  
      port.bufferUntil('\n');
    }
    
    void draw() {
      String[] parts = splitTokens(nextXY);
    
      if (parts.length >= 2) {
        x = int(parts[0])/2;
        y = int(parts[1])/2;
    
        if (lastX >= 0 && lastY >= 0) {
          line(x, y, lastX, lastY);
        }
        lastX = x;
        lastY = y;
      }
    }
    
    void mouseClicked() {
      background(255);
    }
    
    void serialEvent(Serial p) {
      nextXY = p.readString();
    }
    
  6. Replace the string: /dev/cu.usbmodem-blah with the serial port that appears in the lower-right of your Arduino window.

  7. Run the Processing sketch, and rotate the potentiometers!

Variations