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

Sewing Bee for the Digital Age

Materials:

  • Processing (free download from processing.org)
  • Instruction sheet (pdf)
  • Code (see below)

As part of Dundee Science Festival 2013, I was involved in a sewing bee with a difference, an idea developed by Dr Karen Petrie. Participants were invited to create a computational image using Processing in a morning, before spending the afternoon embroidering their image. 16 participants attended, aged from 6 to 67 years old.

Processing is an open source language based on Java and is free to download. A massive online community means that this development environment is perfect for beginners and more advanced programmers alike. The visual nature of the program means that beginners can see their programs take shape very quickly, making it perfect for an event such as this, where many participants may have never coded before.

The shift from the digital image creation to the tactile embroidery phase of the workshop feeds into the Maker community, allowing people to use technology to create lots of things that are engaging and creative.

In the instruction sheet, you are told to open ‘Digital_Sewing_Bee.pde’. The code for this file is shown below:

PImage img; // declaration of image to be used

void setup(){
size(400, 400); // size(width, height) – use these later to determine lengths of shapes
// image is saved to be 800 x 800 pixels in size

background(255); // start background as white
stroke(0);
strokeWeight(10);

myPicture();

save(“img.png”); // save the created image
//mirrorImage(); // flip the image
save(“mirrorImg.png”); // save the mirrored image

}

void mirrorImage(){
img = loadImage(“img.png”); // load the image
imageFlip(img,300,600); // rearrange the pixels to flip image
image(img,0,0,width,height); // display the new image
}

void imageFlip(PImage image, int xPos, int yPos){
image.loadPixels(); // array of pixels in the image

// width * height is total no of pixels
int tempImage[] = new int[image.width*image.height];

// temp array to hold the image, pixel by pixel
for(int i = 0; i < image.width*image.height; i++){ tempImage[i] = image.pixels[i]; } // rearrange the pixels back into the original array for(int i = 0; i < image.height; i++){ for(int j = 1; j < image.width; j++){ image.pixels[(i+1)*(image.width) - j] = tempImage[i*image.width + j]; } } // update the pixels using the image array image.updatePixels(); }


The image below shows an example of an embroidered image, created using processing.

Tree created using processingEmbroidered tree