Home > Made using Processing > Arduino and Processing ( Graph Example )

Arduino and Processing ( Graph Example )

Graph_Example

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.

insertPort


Advertisements
Categories: Made using Processing
  1. September 23, 2013 at 1:27 PM

    Hello. Is it possible to use two potentiometers to make two different curves? Thanks!

  2. Terry Best
    November 11, 2014 at 8:20 PM

    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); //

    • November 26, 2014 at 7:01 PM

      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..

  3. Yacov
    January 24, 2015 at 2:18 PM

    question :
    Do I have to separate codes?
    One on the IDE and the second on processing?

  4. Renzo
    July 15, 2015 at 10:18 AM

    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!

  5. September 14, 2015 at 11:16 AM

    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.

    • James.L
      October 6, 2015 at 8:31 AM

      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.

  6. sengerandu
    September 14, 2015 at 12:23 PM

    The line() function in the serialEvent block is causing a blank screen. It has to be in the draw{} block.

  7. September 16, 2015 at 5:35 PM

    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

  8. pankaj yadav
    September 18, 2015 at 5:11 PM

    help me…every time i got black screen….pls provide correct code

    • September 19, 2015 at 11:46 AM

      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.)

  9. NguyenVo
    October 13, 2015 at 9:25 AM

    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

  10. Mathijs
    October 22, 2015 at 4:23 PM

    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

  11. John
    November 14, 2015 at 11:54 AM

    i am getting a small line at the bottom of my processing window any suggestions

  12. November 17, 2015 at 6:49 AM

    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.

  13. Mjrovai
    November 22, 2015 at 6:29 PM

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

  14. June 9, 2016 at 9:49 PM

    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

  15. Rebecca
    June 10, 2016 at 11:57 AM

    hey, i’ve try your new processing codes. and it nothing happens there. can you help me?

    • Cristian Dragus
      June 11, 2016 at 1:34 PM

      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();
      }

  16. April 15, 2017 at 2:30 AM

    Its really nice. Thanks for sharing.

  1. January 25, 2015 at 2:15 AM
  2. January 18, 2016 at 6:39 PM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: