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