Weird random data being sent from Arduino to Processing

Question

I'm trying to read data from a photocell resistor and my Arduino Decimila and then graph it in real-time with Processing.

Should be painfully simple; but its growing into a little bit of a nightmare for me.

code I'm running on my Arduino:

int photoPin;

void setup(){

  photoPin = 0;
  Serial.begin( 9600 );

}

void loop(){

  int val = int( map( analogRead( photoPin ), 0, 1023, 0, 254 ) );
  Serial.println( val ); //sending data over Serial

}

code I'm running in Processing:

import processing.serial.*;

Serial photocell;

int[] yvals;

void setup(){

  size( 300, 150 );
  photocell = new Serial( this, Serial.list()[0], 9600 );
  photocell.bufferUntil( 10 );
  yvals = new int[width];

}

void draw(){

  background( 0 );
  for( int i = 1; i < width; i++ ){
    yvals[i - 1] = yvals[i];
  }

  if( photocell.available() > 0 ){
    yvals[width - 1] = photocell.read();
  }

  for( int i = 1; i < width; i++ ){
    stroke( #ff0000 );
    line( i, yvals[i], i, height );
  }
  println( photocell.read() ); // for debugging
}

I've tested both bits of code separately and I know that they work. It's only when I try to have the input from the Arduino going to Processing that the problems start.

When I view the data in Arduino's "Serial Monitor", I get a nice constant flow of data that seems to look valid.

But when I read that same data through Processing, I get a repeating pattern of random values.

Halp?

Answer 1

You could transmit that data with the Plotly Arduino API, which along with the documentation and setup is available here. Basic idea: you can continuously stream data from your Arduino, or transmit a single chunk.

Then, if you want to embed it into a site, you'll want to grab the URL and use this snippet:

<iframe id="igraph" src="https://plot.ly/~abhishek.mitra.963/1/400/250/" width="400" height="250" seamless="seamless" scrolling="no"></iframe>

You can change the width/height dimensions in that snippet. Note: you need to swap in your own URL there to get it stream through.

Here's an example of how it looks to stream Arduino data

Full disclosure: I work for Plotly.

Answer 2

After a closer look at the resources at hand, I realized that the problem had already been solved for me by the folks over at http://arduino.cc

http://arduino.cc/en/Tutorial/Graph

Oh how much time I could have saved if I had seen that earlier.