Etch-a-sketch using Arduino & Processing

Did you spend hours carefully creating your own work of art on Etch-a-sketch as a child? Or maybe you still do as an adult? Read on to see how you can create your own etch a sketch controller using Arduino and create images using Processing.

You will need:

ARDUINO
To create the controller, wire up the components as per the wiring diagram below.

wiring

This sketch has two potentiometers, one to move up and down and one to move left and right, plus three buttons which will be used to change the colour of the lines being drawn. The main sections of code are:

1.Read in values for left and right potentiometer

// left and right values
left = analogRead(leftPot);
right = analogRead(rightPot);


2. Check if the buttons have been pressed. Do this for red, then green, then blue. If the button has been pressed change the colour code. 0 = red, 1 = blue, 2 = green.

// check if the “red” button has been pressed
// if yes, then set the colour code to “0”
red_prev = red_current; red_current = digitalRead(redButton);
if(red_prev == LOW && red_current == HIGH){changeRedButtonState();}
if(redState==true){
colourCode = 0;
redState=false;
}


3.Output three values to the serial port, which can then be picked up by Processing. These are left potentiometer, right potentiometer and current colour selected.

// Output the values to the serial port
Serial.print(left, DEC);
Serial.print(“,”);
Serial.print(right, DEC);
Serial.print(“,”);
Serial.print(colourCode,DEC);
Serial.println();


PROCESSING
The processing file receives the three values from the serial port.

1.Map the values from the potentiometer to the width and height of the screen. In this example, the width and height is 600 x 600.

xCurrent = float(a[0]);
xCurrent = map(xCurrent,0,1023,0,600);


2. Set the colour as red, green or blue using the setColour function.

void setColour(String temp){
if(temp == “red”){
col = color(240,85,85);
}
if(temp == “green”){
col = color(60,237,99);
}
if(temp == “blue”){
col = color(56,104,198);
}
}


3.Use the previous x and y values, along with the current x and y values to draw a line

line(xPrev,yPrev,xCurrent,yCurrent);


FEATURES TO ADD
Like all projects, time run out, and I have other ideas that I haven’t had time to implement. Some things I still have to add are:

  • A clear button or add an accelerometer for “shake to clear”
  • An option to save your creation
  • A colour mixer so that you can create using any colours