Plotting a graph using Processing & Arduino

Hi,

I am trying to plot the changes in resistance values from a potentiometer as a graph using Processing. My graph shows up as a band rather than a single line and I can’t figure out whats wrong. This is the code I’m using.

 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 {
  xPos++;
 }
 }
 }

This is how the output graph shows up. Please let me know if you have any idea why it doesn’t show up as a line.

Thanks!

processing graph.PNG

I'm not good with processing but I think the problem is line(xPos, height, xPos, height - inByte); as it's drawing a line vertical line from height to height-inbyte. Does line(xPos, height - inByte -1 , xPos, height - inByte); look better?

My problem is that it shows up as block or a band rather than a single line. I need to plot it as a single lin

What about point(xPos, height - inByte);

Just for giggles, stop drawing one pixel wide lines one pixel apart. Increment xPos by more than one.

Riva:
What about point(xPos, height - inByte);

Thanks! This worked :smiley: