Etch-A-Sketch 2000

Published on October 14, 2008 in ITP. 0 Comments Tags: .

I did not have an accelerometer for the Multiple Serial Output lab, so I used two potentiometers instead. The result reminded me of an Etch-A-Sketch. I wanted to push this idea further so I built an interface that is exactly the same as an Etch-A-Sketch, but which draws a digital picture on screen.

DSC00110

The left and right knobs control the horizontal and vertical position of the cursor respectively. If you shake the controller, the image gradually fades away.

Picture 1 

I didn’t want to make the same mistake as with Grade My Kiss, which had wires all over the place and didn’t stand up straight, so I made sure that everything fit nicely in the container and that the wires I used were the right length.

DSC00113 

I found a post online about a mock¬†Etch-A-Sketch USB adapter. I think it’s a great idea and I would like to extend this project to use a real Etch-A-Sketch as the controller in the near future.

The Arduino code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//-------------------------------
// Etch-a-sketch 2000
// by Elie Zananiri
// http://www.silentlycrashing.net
 
//-------------------------------
int shakeSwitchPin = 2;
int xPotPin = 0;
int yPotPin = 1;
 
//-------------------------------
void setup() {
  Serial.begin(9600);
}
 
//-------------------------------
void loop() {
  int s = digitalRead(shakeSwitchPin);
  int x = analogRead(xPotPin);
  int y = analogRead(yPotPin);
 
  Serial.print(x, DEC);
  Serial.print(",");
  Serial.print(y, DEC);
  Serial.print(",");
  Serial.println(s, DEC);
 
  delay(25);
}

The Processing code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

import processing.serial.*;
 
//-------------------------------
// Etch-a-sketch 2000
// by Elie Zananiri
// http://www.silentlycrashing.net
 
//----------------------------
Serial port;
 
int margin = 70;
int radius = 20;
int threshold = 3;
boolean firstRun = true;
 
float currX = 0;
float currY = 0;
float lastX = 0;
float lastY = 0;
float potX = 0;
float potY = 0;
boolean drawIt = false;
 
int currShake = 0;
int lastShake = 0;
boolean shakeIt = false;
 
//----------------------------
void setup() {
  size(800, 600);
  smooth();
 
  // draw the background
  background(#af100c);
  strokeWeight(10);
  stroke(#5A0403);
  fill(#d5d5d5);
  erase();
  noStroke();
  strokeWeight(1);
  erase();
 
  // open and set up the serial port
  port = new Serial(this, Serial.list()[2], 9600);  
  port.bufferUntil('\n');
}
 
//----------------------------
void draw() {
  if (shakeIt) {
    noStroke();
    fill(#d5d5d5, 20);
    erase();
    shakeIt = false;
 
  } else if (drawIt) {
    stroke(#141414);
    noFill();
    line(lastX, lastY, currX, currY);
    drawIt = false;
  }
}
 
//----------------------------
void serialEvent(Serial p) {
  String inputString = p.readStringUntil('\n');
  if (inputString != null) {
    // get the input values
    inputString = trim(inputString);
    int[] values = int(split(inputString, ","));
 
    // make sure we have the right data before assigning values
    if (values.length == 3) {
      // get the new coords
      potX = map(values[0], 0, 1023, margin, width - margin);
      potY = map(values[1], 0, 1023, height - margin, margin);
 
      // make sure the new values are a big enough change
      if (abs(potX - currX) > threshold || abs(potY - currY) > threshold) {
        // store the previous coords
        if (firstRun) {
          lastX = potX;
          lastY = potY;
          firstRun = false;
 
        } else {
          lastX = currX;
          lastY = currY;
        }
 
        // store the current coords
        currX = potX;
        currY = potY; 
 
        drawIt = true;
      }
 
      // get the shake status
      currShake = values[2];
      // if it's different...
      if (currShake == 1 && currShake != lastShake) {
        shakeIt = true;
      }
      // store the previous shake status
      lastShake = currShake;
    }
  }
}
 
//----------------------------
void erase() {
  // draw a rounded rectangle
  rect(margin + radius, margin, width - margin*2 - radius*2, height - margin*2);
  rect(margin, margin + radius, width - margin*2, height - margin*2 - radius*2);
  ellipse(margin + radius, margin + radius, radius*2, radius*2);
  ellipse(margin + radius, height - margin - radius, radius*2, radius*2);
  ellipse(width - margin - radius, height - margin - radius, radius*2, radius*2);
  ellipse(width - margin - radius, margin + radius, radius*2, radius*2);
}

0 Responses to “Etch-A-Sketch 2000”

Feed for this Entry Trackback Address
  • No Comments

Leave a Reply