Connie Wan (cwan), Angela Dai (adai), Kiran Vodrahalli (knv), Edward Zhang (edwardz)
Group 13 (aka CAKE)
We built a pseudo Etch-A-Sketch emulator that modifies its appearance based on the user’s environment – the temperature and light conditions. Instead of only drawing horizontal and vertical lines, we can draw curved lines by changing the slope of the current line to be drawn. We use two potentiometers to serve as the knobs of this “Curve-A-Sketch” and use Processing to display the user’s drawing. The ambient light level controls the color of the drawing, while the temperature controls the width of the stroke. This project was a lot of fun to play with because of the nostalgia of playing with a childhood toy, enhanced with the novel control of changing its color and stroke width – for example, we could change colors simply by touching the temperature sensor, and width by moving our head over the photoresistor. We also wanted to blow on the temperature sensor to change color, but it didn’t quite work out because of some bugs with a clear button. The clear button only worked sometimes, because the circuit was a bit buggy– quick changes in resistance messed up the data we sent from the Arduino to processing.
Sketches
Ambient Etch-A-Sketch: Remember the Etch-a-Sketch? This lets you do everything the Etch-a-Sketch did, and more! The features of your cursor , such as color and pen width, change based on your ambient environment conditions (temperature and light).
The upper half of this image shows an LED light array that lights up in concert with the location of your finger. With an added control for color, you can create a mini light show using just your hands.
The lower half shows our Smart Nightlight. As its basic function, the tricolor LED will be brighter if the room is darker (we put a screen between the LED and the photoresistor to eliminate feedback). The user can change the color and the overall brightness of the nightlight.
Storyboard
Ambient Etch-A-Sketch Storyboard
Final System
This video demonstrates the features of our Ambient Etch-a-Sketch. It shows the user controlling the color and pen width with the photoresistor and thermistor, respectively.
List of parts
- 2x Potentiometer (rotary)
- 1x Arduino Uno
- 1x Push Button
- 1x Photoresistor
- 1x Thermistor
- 3x 10KΩ Resistor
- 1x Breadboard
- Wires
- Computer
Instructions
- Plug the two potentiometers into opposite sides of the breadboard. Fix an orientation – the one on the left controls the horizontal coordinate, and the one on the right controls the vertical coordinate. Attach the middle pin of the right potentiometer to A0 and the middle pin of the left potentiometer to A1. Attach the side pins of both potentiometers to 5V and ground.
- Connect one side of the thermistor to 5V, and the other side to A2 and ground through a 10KΩ pull-down resistor.
- Connect one side of the photoresistor to 5V, and the other side to A2 and ground through a 10KΩ pull-down resistor.
- Connect one side of the push button through a 10KΩ resistor to 5V and the other side to D2 and ground.
- Run the Arduino code, and then start the Processing application
- Draw! The extreme settings of the knobs correspond to the sides of the Processing window. You can adjust the color by shadowing the photoresistor (e.g. leaning over so your head blocks some light), and change the stroke width by changing the temperature (the easiest way is by pressing the thermistor between your fingers).
Source Code
Arduino Code
/*
Ambient Etch-a-Sketch!
Lab 1
COS 436: Human-Computer Interfaces
February 20, 2013
*/
//variables
int y; //y coordinate of etch-a-sketch
int x; //x coordinate of etch-a-sketch
int temperature; //temperature of the room
int light; //light ambience of the room
int clearButton; //clear Button
//pins
int pinY = 0;
int pinX = 1;
int pinTemperature = A2;
int pinLight = 3;
int pinClearButton = 7;
void setup()
{
// initialize the serial communication:
Serial.begin(9600);
// initialize the clear button as an input
pinMode(pinClearButton, INPUT);
}
void loop() {
// read data on every loop
x = analogRead(pinX);
y = analogRead(pinY);
light = analogRead(pinLight);
temperature = analogRead(pinTemperature);
clearButton = digitalRead(pinClearButton);
//test it works
//Serial.println("Scaled x: \n");
if((x < 1024) && (y < 1024) && (light < 1024) && (temperature < 1024) && (clearButton <= 1)) {
Serial.println(x);
Serial.println(y);
Serial.println(light);
Serial.println(temperature);
Serial.println(clearButton);
}
delay(100);
}
Processing Code
//Lab 1: Resistance
//Connie Wan, Angela Dai, Kiran Vodrahalli, Edward Zhang
//Feb 27, 2013
import processing.serial.*;
Serial myPort;
float dx; //change from controls
float dy; //change from controls
float old_dx; //check prev
float old_dy; //check prev
float x; //curent position
float y; //current position
float light; //current lighting
float temperature; //current temperature
int clearButton; //clearButton
String input; //get data from Arduino
static final int X_WIDTH = 400;
static final int Y_HEIGHT = 400;
static final int UNIT_DRAW = 20;
void setup() {
//init
myPort = new Serial(this, Serial.list()[4], 9600);
println(Serial.list());
x = 200;
y = 200;
size(X_WIDTH, Y_HEIGHT);
colorMode(HSB, 255, 255, 255);
background(0, 0, 255);
stroke(0);
myPort.clear();
if(myPort.available() > 0) {
input = myPort.readStringUntil('\n');
if(input != null){
String xval = trim(input);
old_dx = Integer.parseInt(xval);
println(dx);
}
input = myPort.readStringUntil('\n');
if(input != null) {
String yval = trim(input);
old_dy = Integer.parseInt(yval);
println(dy);
}
input = myPort.readStringUntil('\n');
if(input != null) {
String lval = trim(input);
light = Integer.parseInt(lval);
println(light);
}
input = myPort.readStringUntil('\n');
if(input != null) {
String tval = trim(input);
temperature = Integer.parseInt(tval);
println(temperature);
}
input = myPort.readStringUntil('\n');
if(input != null) {
String cval = trim(input);
clearButton = Integer.parseInt(cval);
println(clearButton);
}
}
myPort.clear();
}
void draw() {
while(myPort.available() > 0) {
input = myPort.readStringUntil('\n');
if(input != null){
String xval = trim(input);
dx = Integer.parseInt(xval);
//println(dx);
}
else {
return;
}
input = myPort.readStringUntil('\n');
if(input != null) {
String yval = trim(input);
dy = Integer.parseInt(yval);
//println(dy);
}
else {
return;
}
input = myPort.readStringUntil('\n');
if(input != null) {
String lval = trim(input);
light = Integer.parseInt(lval);
//println(light);
}
else {
return;
}
input = myPort.readStringUntil('\n');
if(input != null) {
String tval = trim(input);
temperature = Integer.parseInt(tval);
//println(temperature);
}
else {
return;
}
input = myPort.readStringUntil('\n');
if(input != null) {
String cval = trim(input);
clearButton = Integer.parseInt(cval);
println(clearButton);
}
else {
return;
}
myPort.clear();
if(clearButton == 1) {
background(0, 0, 255);
}
//scaling
dx = UNIT_DRAW*((dx/1023.0) -0.5);
dy = UNIT_DRAW*((dy/1023.0) - 0.5);
light = light/1023.0;
temperature = (temperature - 500) *(255.0/100.0);
if(temperature 255) {
temperature = 255;
}
println(temperature);
//change color
stroke(temperature, 255, 255);
//change thickness
strokeWeight(10*light);
if(x >= X_WIDTH) {
x = X_WIDTH;
}
if(y >= Y_HEIGHT) {
y = Y_HEIGHT;
}
print("x: " + x + "\n");
print("y: " + y + "\n");
if(((dx old_dx -.01))){
dx = old_dx;
}
if(((dy old_dy -.01))){
dy = old_dy;
}
if((dx != old_dx) || (dy != old_dy)){
line(x, y, x + dx, y + dy);
x = x + dx;
y = y + dy;
old_dx = dx;
old_dy = dy;
}
}
}