Virtural “Etch a Sketch” – Making Things Interactive

For this assignment, I used two potentiometers to simulate the “Etch A Sketch” (Wikipedia_”Etch A Sketch”). Using two potentiometer, one controls left and right movement, and the other controls the up and down movement, the browser window is going to serve as a canvas for the “Etch A Sketch” board.

Parts list:
- Potentiometer (10K) x2
- Adafruit M0 Metro Express
- Bunch of jumper wires

Fritzing Sketch:

Code (Arduino Part):

const int leftRightPot = A4; //with green LED
const int upDownPot = A5; // with blue LED

const int tol = 100;

int leftRightVal = 0;
int upDownVal = 0;

int valHi = 1024;
int valLo = 0;

//******************************
//Setup for Arduino to run
void setup() {
// put your setup code here, to run once:
pinMode(leftRightPot , INPUT);
pinMode(upDownPot, OUTPUT);

Serial.begin(9600);
}

//******************************
//The operating loop
void loop() {
// put your main code here, to run repeatedly:
leftRightVal = reMapped(analogRead(leftRightPot));
upDownVal = reMapped(analogRead(upDownPot));

// Serial.print("leftRightVal = ");
// Serial.println(leftRightVal);

//Modified from class Note 5
Serial.print("leftRightVal,");
Serial.print(leftRightVal);
Serial.print(",upDownVal,");
Serial.println(upDownVal);
}

//***********************************
//function used to remap input value into one
int reMapped(int input){
int output = map(input,0,1023,0,255);
return output;
}

Code (js part):

var cnv;
var serial;
var portName = 'COM4';
var dataRead;
//@TODO : find out what port name it is

//***************
//Here are some global variables:
//@TODO: Figure out how to make them function in OOP
var curPosX = 0;
var curPosY = 0;
var leftRightVal = 255/2;
var upDownVal = 255/2;

const rightUpThresh = 150;
const leftDownThresh = 100;

var xPoint=[];
var yPoint=[];

// ****************
//Basic setup for serial port and canvas
//******************
function setup(){

serial = new p5.SerialPort();
// now set a number of callback functions for SerialPort
serial.on('list', printList);
serial.on('connected', serverConnected);
serial.on('open', portOpen);
serial.on('data', serialEvent);
serial.on('error', serialError);
serial.on('close', portClose);

serial.list();
serial.open(portName);

//Here is canvas setup
createCanvas(windowWidth, windowHeight);

var x = (windowWidth - width)/2;
var y = (windowHeight - height)/2 ;
cnv.position(x,y);

background ("white");
}

//**********************
//Put drawing functions in here
function draw() {
// put drawing code here
mouseSetPt();
drawWithPot();
drawPts();

}

//**************************
//click mouse and reset the drawing point
function mouseSetPt(){
//get the point where the mouse clicks
var mouseClickX = mouseX;
var mouseClickY = mouseY;

//update the point in the array
xPoint = xPoint + [mouseClickX];
yPoint = yPoint + [mouseClickY];

//update the current/new position to start
curPosX = xPoint[xPoint.length-1];
curPosY = yPoint[yPoint.length-1];

}

//****************************
//use potentiometer to draw (only moving left/right and up/down)
function drawWithPot(){
//@TODO: find a better way to store tese values, like tuples?

//check right and left
if (leftRightVal >= rightUpThresh){
curPosX = curPosX + 1;
}
else if (leftRightVal <= leftDownThresh){
curPosX = curPosX - 1;
}

//check up and down
if (upDownVal >= rightUpThresh){
curPosY = curPosY + 1;
}
else if (upDownVal <= leftDownThresh){
curPosY = curPosY - 1;
}

//update the position list
var prePosX = xPoint[xPoint.length-1];
var prePosY = yPoint[yPoint.length-1];

if (curPosX != prePosX || curPosY != prePosY){
xPoint = xPoint + [curPosX]
yPoint = yPoint + [curPosY]
}

}

//************************
//Draw all the points that is saved in the array
function drawPts(){
for ( i = 0; i < xPoint.length ; i++){
var xPointPos = xPoint[i];
var yPointPos = yPoint[i];
point(xPointPos, yPointPos);
}
}

//*****************************
//All server related
function printList(portList) {
// for (var i = 0; i < portList.length; i++) {
// print(i + " " + portList[i]);
// }
}

function serverConnected()
{
print('serverConnected');
}

function portOpen()
{
print('portOpen');
}

function serialEvent(){

var strRead = serial.readStringUnil('\r\n');

if (strRead.length > 0 ) {
var potStr = split(strRead, ',');

if (potStr.length == 4) { // ignore any tiny strings
leftRightVal = potStr[1];
upDownVal = potStr[3];
}
}

}

function serialError(err)
{
print('serialError ' + err);
}

function portClose()
{
print('portClose');
}

Zip -Etch A Sketch

Leave a Reply Cancel reply