arduino graph using Processing

Hi guys, I'm working on the graph example from arduino website (http://arduino.cc/en/Tutorial/Graph). I tried uploads the codes to arduino and Processing, but when I run the applet on Processing the graphing window is blackscreen. But the arduino serial monitor is working fine. What's the problem? Thanks.

Here's my arduino code

void setup() {
  // initialize the serial communication:
  Serial.begin(9600);
}

void loop() {
  // send the value of analog input 0:
  Serial.println(analogRead(A0));
  // wait a bit for the analog-to-digital converter 
  // to stabilize after the last reading:
  delay(10);
}

and here's my Processing code:

// Graphing sketch


 // This program takes ASCII-encoded strings
 // from the serial port at 9600 baud and graphs them. It expects values in the
 // range 0 to 1023, followed by a newline, or newline and carriage return

 // Created 20 Apr 2005
 // Updated 18 Jan 2008
 // by Tom Igoe
 // This example code is in the public domain.

 import processing.serial.*;

 Serial myPort;        // The serial port
 int xPos = 1;         // horizontal position of the graph

 void setup () {
 // set the window size:
 size(400, 300);        

 // List all the available serial ports
 println(Serial.list());
 // I know that the first port in the serial list on my mac
 // is always my  Arduino, so I open Serial.list()[0].
 // Open whatever port is the one you're using.
 myPort = new Serial(this, Serial.list()[0], 9600);
 // don't generate a serialEvent() unless you get a newline character:
 myPort.bufferUntil('\n');
 // set inital background:
 background(0);
 }
 void draw () {
 // everything happens in the serialEvent()
 }

 void serialEvent (Serial myPort) {
 // get the ASCII string:
 String inString = myPort.readStringUntil('\n');

 if (inString != null) {
 // trim off any whitespace:
 inString = trim(inString);
 // convert to an int and map to the screen height:
 float inByte = float(inString); 
 inByte = map(inByte, 0, 1023, 0, height);

 // draw the line:
 stroke(127,34,255);
 line(xPos, height, xPos, height - inByte);

 // at the edge of the screen, go back to the beginning:
 if (xPos >= width) {
 xPos = 0;
 background(0); 
 } 
 else {
 // increment the horizontal position:
 xPos++;
 }
 }
 }

Try to read the value in processing correctly before processing it. Step by step.

But the arduino serial monitor is working fine.

While the Processing app is running?

// everything happens in the serialEvent()

How does processing knows that it should use serialEvent(); ? (disclaimer, no processing expert)

In the code the function is nowhere referenced… and somehow the platform should know what to call or …?

How does processing knows that it should use serialEvent(); ? (disclaimer, no processing expert)

The serialEvent callback is one that Processing knows to call when serial data is received. There is a default function provided that simply ignores serial data. To actually do something with the data, the Processing sketch needs to override the default serialEvent function, as OP did.

Thanks, again learned something today :)