This example was uploaded to Youtube last year.
It is based in the code at http://arduino.cc/en/Tutorial/Graph
The Processing code was modified as is explained in the comments.
// Pro_Graph2.pde /* Used in the Youtube video "Arduino and Processing ( Graph Example )" Based in the Tom Igoe example. Mofified by Arduining 17 Mar 2012: -A wider line was used. strokeWeight(4); -Continuous line instead of vertical lines. -Bigger Window size 600x400. ------------------------------------------------------------------------------- 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 //Variables to draw a continuous line. int lastxPos=1; int lastheight=0; void setup () { // set the window size: size(600, 400); // List all the available serial ports println(Serial.list()); // Check the listed serial ports in your machine // and use the correct index number in Serial.list()[]. myPort = new Serial(this, Serial.list()[0], 9600); // // A serialEvent() is generated when a newline character is received : myPort.bufferUntil('\n'); background(0); // set inital background: } void draw () { // everything happens in the serialEvent() } void serialEvent (Serial myPort) { // get the ASCII string: String inString = myPort.readStringUntil('\n'); if (inString != null) { inString = trim(inString); // trim off whitespaces. float inByte = float(inString); // convert to a number. inByte = map(inByte, 0, 1023, 0, height); //map to the screen height. //Drawing a line from Last inByte to the new one. stroke(127,34,255); //stroke color strokeWeight(4); //stroke wider line(lastxPos, lastheight, xPos, height - inByte); lastxPos= xPos; lastheight= int(height-inByte); // at the edge of the window, go back to the beginning: if (xPos >= width) { xPos = 0; lastxPos= 0; background(0); //Clear the screen. } else { // increment the horizontal position: xPos++; } } }
Important Note:
Remember to replace the index in Serial.list()[0] to open the Serial Port where the Arduino is connected.
Run the program in Processing and check the Console window to see the available ports.
Arduining 
Hello. Is it possible to use two potentiometers to make two different curves? Thanks!
Had to change the line:
myPort = new Serial(this, Serial.list()[0], 9600); //
to:
myPort = new Serial(this, “COM4” , 9600); //
Otherwise I got an arrayindexoutofboundsexception 4
Tried this but didn’t work using:
myPort = new Serial(this, Serial.list()[4], 9600); //
Check the number associated to the COM port you are trying to use.
Usually the index[4] not necessarily point to COM4, it points to the fitth port listed in your computer..
question :
Do I have to separate codes?
One on the IDE and the second on processing?
i have this error:
sketch_jul15a:20: error: ‘import’ does not name a type
is the first line of code
i use arduino 1.6.5 and linux
help me please!
Thanks for the code. I had tried the processing code given in arduino example to plot the data. It did not work. Then I tried your code. Both are similar in principle barring the graph type(perhaps). But, I could not plot in your code too. What I get is just a black screen. Kindly suggest any debugging steps i need to follow.
So I got it to work by doing this (well my wife did at the end). You want to define the inbyte as global variable, put float inbyte at the very top right after int xPos. Then move the line(lastxPos, lastheight, xPos, height – inByte); into the draw() block. E.g., draw() { line(lastxPos, lastheight, xPos, height – inByte); };
Now we are not sure if that’s the proper way to get it to work, but after looking at 3 difference processing code this was the only way we can get it to work.
The line() function in the serialEvent block is causing a blank screen. It has to be in the draw{} block.
I just obtain a black screen and an error that says:
map(NaN, 0, 1023, 0, 400) called, which returns NaN (not a number)
I dont understand why appears this error.
Can someone help me.
Thanks in advance
help me…every time i got black screen….pls provide correct code
Verify the Arduino is connected and the index was replaced to point to the Arduino COM Port..(A comment was added at the end of the Post.)
Hello, i did the same with processing 3.0 but there was error like this map(NaN, 0, 1023, 0, 300) called, which returns NaN (not a number) and the graph appear is a black screen
I also obtain a blackscreen with the error:
map(NaN, 0, 1023, 0, 400) called, which returns NaN (not a number)
The arduino is connected to com3, and I put in
myPort = new Serial(this, “COM3”, 9600);
Do you have any idea what is wrong?
Thank you
i am getting a small line at the bottom of my processing window any suggestions
Hi there. I have an issue with graphing, but I think it is something stupid I am doing – especially seeing as I’m (ha, or think I am…) an old hand at Arduino, but very new to processing. This example should be a piece of cake, but its just not doing it for me.
I have a similar issue with every single graphing program I seem to find on the internets, and it goes like this:
Arduino is happily pumping out serial data, its all displaying in the Processing monitor bar, the baud rates all match, COM4 is set up fine in the processing code….then I run the code, the window displays, but there is… fig all.
No graphing going on.
However, after a while, some single line appears at the lower seventh of the screen, and maybe after a while, another, and another, all spaced apart.
So it wants to be a graph, but fragmented.
What do you think I am doing wrong? Any ideas?
Its frustrating, because I can see the serial data at the bottom of the screen, enticingly close teasing me, but just out of reach….
**By the time I finished writing this text, there are ten or so of these lonely-looking, single pixel lines on the screen, that’s how sluggish it is.
Thanks all comments. Besides have the variable as Global, I need to have the Draw function as bellow to have the Sketch working properly
void draw ()
{
stroke (127,34,255);
strokeWeight(4);
line(lastxPos, lastHeight, xPos, height – inByte);
if (xPos >= width)
{
xPos = 0;
lastxPos= 0;
background(0);
}
else
{
xPos++;
}
}
I am developing a arduino-processing course in youtube, using libraries like ketai and controlP5, some basic image processing… the link is:
https://www.youtube.com/channel/UCyWRJgfJMu3fiW4xO0FmB1w/videos?sort=dd&shelf_id=0&view=0
hey, i’ve try your new processing codes. and it nothing happens there. can you help me?
You need to move the draw code from the serial event function.
The serial event function is executing on another thread and from that one you can’t call draw functions( this is rule for draw calls in general). I recommend using noLoop() in Setup, move all drawing code in the Draw function, in the Serial event function just read the information and set the value in a global variable and call redraw() in the end in the Draw function use the global variable to draw what you want.
You can inspire from this( it expects int values and \n from the serial port)
import processing.serial.*;
Serial myPort; // The serial port
int currentxPos = 0; // horizontal position of the graph
//Variables to draw a continuous line.
int lastxPos=0;
int lastyPos=0;
int zeroyPos = 0;
int frame = 0;
float currentVal = 0;
void setup () {
// set the window size:
size(600, 400);
// List all the available serial ports
println(Serial.list());
// Check the listed serial ports in your machine
// and use the correct index number in Serial.list()[].
myPort = new Serial(this, Serial.list()[0], 9600); //
// A serialEvent() is generated when a newline character is received :
myPort.bufferUntil(‘\n’);
// frameRate(10);
noLoop();
background(0); // set inital background:
textSize(16);
textAlign(LEFT,TOP);
lastxPos = 1;
zeroyPos = height/2;
lastyPos = height/2;
currentxPos =0;
currentVal=0;
}
void draw () {
noStroke();
fill(0);
rect(0,0,200,20);
fill(127);
frame+=1;
text(frame,0,0);
int val = (int)map(currentVal, -1024, 1024, -height/2, height/2);
int currentyPos = zeroyPos – val;
stroke(255,0,0); //stroke color
strokeWeight(4); //stroke wider
line(lastxPos, lastyPos, currentxPos, currentyPos);
currentxPos+=1;
// println(” Val ” + val + ” xpos ” + currentxPos);
lastxPos= currentxPos;
lastyPos= currentyPos;
// at the edge of the window, go back to the beginning:
if (currentxPos >= width) {
lastxPos = 0;
currentxPos = 0;
background(0); //Clear the screen.
}
}
void serialEvent (Serial myPort) {
// get the ASCII string:
String inString = myPort.readStringUntil(‘\n’);
if (inString != null)
{
inString = trim(inString); // trim off whitespaces.
currentVal = float(inString); // convert to a number.
}
redraw();
}
Cristian’s code mods work well.
I did need to change the bufferUntil(‘\n’) & readStringUntil(‘\n’) statements both to (‘\r’) for it to work on a PC and the single quotes have a tendency to become garbled in the translation, so check that those are OK too.
Finally, a code that worked! Multumesc!
Its really nice. Thanks for sharing.