#ardui

[jaminpie]

Arduino Day 2014 @ Malaysia

Thanks to all helpful hands and all the support for coming this event. Will be more events and activities with arduino. 

[melodymakes]

Serial Communication: Etch-a-Sketch

This week our task was to construct one example of communicating between the Arduino and Processing environments. Amy, Michie and I put our heads together and set out to simulate the experience of an Etch A Sketch toy using two potentiometers as knobs and a Processing sketch as the interface. Here's a peek behind our approach and a summary of our successes and failures. 

Setting up the breadboard and Arduino shield

We essentially used the same circuit that's featured in this virtual color mixer tutorial. Two potentiometers are connected to analog pins A0 and A1 in the Arduino board. Here's a snapshot of our setup:

Coding in Arduino

This code reads two analog sensors (the potentiometers) and sends their values serially:

Coding in Processing

I've pasted our Processing below, but here is a summary in humanspeak. First we:

import our serial data

declare our variables

Then in setup, we:

draw the background and border

open our port

In the draw loop, we:

make a line whose x and y coordinates are based on the potentiometers' values

And in a separate serial event, we:

get the ACII string

trim off any white space

split the string on the commas and convert the resulting substrings into an integer array

put the numbers in color variables

CODE

import processing.serial.*; float x0; float y0; float leftPotPin; float rightPotPin; Serial myPort; void setup() { size(350,500); background(#FC0A0A); fill(175); rect(30,30,290,440);

ellipse(26,275,30,30);

ellipse(374,275,30,30);

println(Serial.list()); myPort = new Serial(this, Serial.list()[8], 9600); myPort.bufferUntil('\n'); } void draw() {

println("leftPotPin=" + leftPotPin); line(x0,y0,leftPotPin,rightPotPin); x0=leftPotPin; y0=rightPotPin;

} void serialEvent(Serial myPort) { // get the ASCII string: String inString = myPort.readStringUntil('\n'); if (inString != null) { // trim off any whitespace: inString = trim(inString); float[] colors = float(split(inString, ","));

if (colors.length >=2) { leftPotPin = map(colors[0], 0, 1023, 0, 255); rightPotPin = map(colors[1], 0, 1023, 0, 255); } } }

Finished product

Here's an example sketch we made using the potentiometers to draw horizontal and vertical lines. It's supposed to represent a cityscape!

Things we didn't figure out

Because we worked off the virtual color mixer tutorial's source code, the analog values were already set to map to the RGB color range (0-255). We tried to change this range so that instead of only going from 0-255, the line coordinates would map from 0-width and 0-height. However, simply changing this value in the map function that was unsuccessful and caused the drawing app to stop working. Therefore, this drawing app oddly only works within an x/y coordinate range of 0-255.

We didn't figure out a way to constrain it so that the line would only draw within the gray area the sketch and not spill into the red border.

Sometimes the line doesn't draw clearly and there are jumps in its behavior. This may be a result of not making good enough connections between the wires themselves (perhaps soldering would help).

The drawing starts at whatever values the potentiometers happen to be set on, which can look pretty quirky if both potentiometer values are not set to 0 before you run the app.