I am pleased that you took the path of exploration! 
Try the example provided on the Processing site:
The only thing I did was remove the font since I did not wish to create one.
// Example by Tom Igoe
import processing.serial.*;
Serial myPort; // The serial port
PFont myFont; // The display font
String inString; // Input string from serial port
int lf = 10; // ASCII linefeedvoid setup() {
size(400,200);
// You’ll need to make this font with the Create Font Tool
//myFont = loadFont(“ArialMS-18.vlw”);
//textFont(myFont, 18);
// List all the available serial ports:
printArray(Serial.list());
// I know that the first port in the serial list on my mac
// is always my Keyspan adaptor, so I open Serial.list()[0].
// Open whatever port is the one you’re using.
//myPort = new Serial(this, Serial.list()[0], 9600);
myPort = new Serial(this, “COM7”, 9600);
myPort.bufferUntil(lf);
}void draw()
{
background(0);
text("received: " + inString, 10,50);
}void serialEvent(Serial p)
{
inString = p.readString();
}
On the Arduno side you are going back to sending ASCII characters:
val++;
Serial.println(val);
You are now sending ASCII characters along with a LF (Line Feed) and CR (Carriage Return) and Processing is receiving these into a string; you will have to “trim” and convert the received string to an int if you want to use an int variable.
Consider:
This is a simple example without extra characters in string to “trim”:
String p = “1023”;
print (int ( p));
Also consider:
Still counting:
