Tutorial.Graph History

Show minor edits - Show changes to markup

May 02, 2012, at 04:09 PM by Scott Fitzgerald -
Changed line 35 from:
to:
November 16, 2011, at 04:13 AM by Scott Fitzgerald -
Changed line 35 from:
to:
September 30, 2011, at 03:13 AM by Scott Fitzgerald -
Changed line 35 from:
to:
September 23, 2010, at 10:35 PM by Christian Cerrito -
Changed lines 3-4 from:

Graph

to:

Graph

September 23, 2010, at 09:48 PM by Christian Cerrito -
Changed lines 30-32 from:

to:
September 17, 2010, at 08:59 PM by Tom Igoe -
Changed lines 49-50 from:
to:
September 17, 2010, at 08:59 PM by Tom Igoe -
Changed lines 49-50 from:
to:
September 17, 2010, at 08:58 PM by Tom Igoe -
September 17, 2010, at 08:58 PM by Tom Igoe -
Changed lines 49-50 from:
to:
September 17, 2010, at 08:57 PM by Tom Igoe -
Changed lines 5-7 from:

A simple example of communication from the Arduino board to the computer: the value of an analog input is printed. We call this "serial" communication because the connection appears to both the Arduino and the computer as an old-fashioned serial port, even though it may actually use a USB cable.

to:

This example shows you how to send a byte of data from the Arduino to a personal computer and graph the result. This is called serial communication because the connection appears to both the Arduino and the computer as a serial port, even though it may actually use a USB cable.

Changed lines 19-20 from:

An analog input connected to analog input pin 0.

to:

Connect a potentiometer or other analog sensor to analog input 0.

Changed lines 27-30 from:

Schematic

to:

Schematic

Changed lines 39-111 from:

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


Output

As you change the value of the analog sensor, you'll get a graph something like this:

to:

Processing Sketch

Using the Processing sketch in the code sample above, you'll get a graph of the sensor's value. As you change the value of the analog sensor, you'll get a graph something like this:

Changed lines 47-50 from:

The max patch looks like this. The text of the patch is linked behind the image.

to:

The max patch looks like this. The text of the patch is in the code sample above. Copy the text and paste it into a new Max window to see the sketch.

Attach:max-graph.png

September 16, 2010, at 10:11 PM by Tom Igoe -
Changed line 39 from:
to:
August 27, 2010, at 07:47 AM by Christian Cerrito -
Added lines 123-124:

See Also:

August 27, 2010, at 07:46 AM by Christian Cerrito -
Added lines 122-138:

August 27, 2010, at 07:35 AM by Christian Cerrito -
Added lines 20-21:

An analog input connected to analog input pin 0.

Changed lines 27-29 from:

An analog input connected to analog input pin 0.

to:

August 27, 2010, at 07:34 AM by Christian Cerrito -
Changed lines 19-20 from:

An analog input connected to analog input pin 0.

to:
Changed lines 25-27 from:
to:

An analog input connected to analog input pin 0.

August 27, 2010, at 07:33 AM by Christian Cerrito -
Added lines 10-17:

Hardware Required

  • Arduino Board
  • Analog Sensor (potentiometer, photocell, FSR, etc.)

Software Required

  • Processing or
  • Max/MSP version 5
August 27, 2010, at 07:31 AM by Christian Cerrito -
Changed line 28 from:
to:
February 23, 2010, at 08:12 PM by Tom Igoe -
Changed lines 28-52 from:
 /*
   Graph
  
  A simple example of communication from the Arduino board to the computer:
  the value of analog input 0 is sent out the serial port.  We call this "serial"
  communication because the connection appears to both the Arduino and the
  computer as a serial port, even though it may actually use
  a USB cable. Bytes are sent one after another (serially) from the Arduino
  to the computer.
  
  You can use the Arduino serial monitor to view the sent data, or it can
  be read by Processing, PD, Max/MSP, or any other program capable of reading 
  data from a serial port.  The Processing code below graphs the data received 
  so you can see the value of the analog input changing over time.
  
  The circuit:
  Any analog input sensor is attached to analog in pin 0.
  
  created 2006
  by David A. Mellis
  modified 14 Apr 2009
  by Tom Igoe and Scott Fitzgerald
  
  http://www.arduino.cc/en/Tutorial/Graph
  */
to:
Deleted lines 29-41:
 void setup() {
   // initialize the serial communication:
   Serial.begin(9600);
 }

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

// This example code is in the public domain.

August 27, 2009, at 08:56 PM by Tom Igoe -
Added lines 16-18:

image developed using Fritzing. For more circuit examples, see the Fritzing project page

Changed lines 24-26 from:

image developed using Fritzing. For more circuit examples, see the Fritzing project page

to:
August 27, 2009, at 08:55 PM by Tom Igoe -
Changed lines 21-23 from:
to:

image developed using Fritzing. For more circuit examples, see the Fritzing project page

July 05, 2009, at 07:35 PM by Tom Igoe -
Deleted lines 42-43:
  http://www.arduino.cc/en/Tutorial/Graph
  
July 05, 2009, at 07:35 PM by Tom Igoe -
Changed lines 23-68 from:
to:
Changed lines 70-87 from:

void setup() { // initialize the serial communication:

  Serial.begin(9600);

}

void loop() {

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

} @]

Processing Code

[@

to:
June 25, 2009, at 11:26 PM by Tom Igoe -
June 25, 2009, at 11:10 PM by Tom Igoe -
Changed line 13 from:

[-click the image to enlarge-]

to:

click the image to enlarge

Changed lines 16-21 from:
to:

Schematic

click the image to enlarge

April 16, 2009, at 07:56 PM by Tom Igoe -
Deleted lines 10-12:
Added lines 13-16:

[-click the image to enlarge-]

April 15, 2009, at 11:51 PM by Tom Igoe -
Changed line 111 from:
to:
April 15, 2009, at 11:50 PM by Tom Igoe -
Changed line 111 from:
to:
April 15, 2009, at 11:49 PM by Tom Igoe -
April 15, 2009, at 11:47 PM by Tom Igoe -
Added lines 12-13:
Changed lines 19-20 from:

void setup() {

to:

void setup() { // initialize the serial communication:

Changed lines 24-25 from:

void loop() {

to:

void loop() {

  // send the value of analog input 0:
Changed lines 27-29 from:
  delay(20);
to:
  // wait a bit for the analog-to-digital converter 
  // to stabilize after the last reading:
  delay(10);
Changed lines 36-44 from:

// Graph // by David A. Mellis // // Demonstrates reading data from the Arduino board by graphing the // values received. // // based on Analog In // by <a href="http://itp.jtnimoy.com">Josh Nimoy</a>.

to:

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

Changed lines 50-61 from:

Serial port; String buff = ""; int NEWLINE = 10;

// Store the last 64 values received so we can graph them. int[] values = new int[64];

void setup() {

  size(512, 256);

  println("Available serial ports:");
to:

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
Changed lines 59-69 from:
  // Uses the first port in this list (number 0).  Change this to
  // select the port corresponding to your Arduino board.  The last
  // parameter (e.g. 9600) is the speed of the communication.  It
  // has to correspond to the value passed to Serial.begin() in your
  // Arduino sketch.
  port = new Serial(this, Serial.list()[0], 9600);  

  // If you know the name of the port used by the Arduino board, you
  // can specify it directly like this.
  //port = new Serial(this, "COM1", 9600);
to:
  // 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);
Changed lines 68-79 from:

void draw() {

  background(53);
  stroke(255);

  // Graph the stored values by drawing a lines between them.
  for (int i = 0; i < 63; i++)
    line(i * 8, 255 - values[i], (i + 1) * 8, 255 - values[i + 1]);

  while (port.available() > 0)
    serialEvent(port.read());
to:

void draw () {

  // everything happens in the serialEvent()
Changed lines 72-96 from:

void serialEvent(int serial) {

  if (serial != NEWLINE) {
    // Store all the characters on the line.
    buff += char(serial);
  } else {
    // The end of each line is marked by two characters, a carriage
    // return and a newline.  We're here because we've gotten a newline,
    // but we still need to strip off the carriage return.
    buff = buff.substring(0, buff.length()-1);

    // Parse the String into an integer.  We divide by 4 because
    // analog inputs go from 0 to 1023 while colors in Processing
    // only go from 0 to 255.
    int val = Integer.parseInt(buff)/4;

    // Clear the value of "buff"
    buff = "";

    // Shift over the existing values to make room for the new one.
    for (int i = 0; i < 63; i++)
      values[i] = values[i + 1];

    // Add the received value to the array.
    values[63] = val;
to:

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++;
    }
Changed lines 98-111 from:

@]

to:

@]

Output

As you change the value of the analog sensor, you'll get a graph something like this:

Max Code

The max patch looks like this. The text of the patch is linked behind the image.

March 25, 2007, at 01:14 PM by David A. Mellis -
Added lines 1-15:

Examples > Communication

Graph

A simple example of communication from the Arduino board to the computer: the value of an analog input is printed. We call this "serial" communication because the connection appears to both the Arduino and the computer as an old-fashioned serial port, even though it may actually use a USB cable.

You can use the Arduino serial monitor to view the sent data, or it can be read by Processing (see code below), Flash, PD, Max/MSP, etc.

Circuit

An analog input connected to analog input pin 0.

Code

Changed line 24 from:
  Serial.print(analogRead(0) / 4, BYTE);
to:
  Serial.println(analogRead(0));
Changed lines 27-28 from:

/*

to:

@]

Processing Code

[@ // Graph // by David A. Mellis // // Demonstrates reading data from the Arduino board by graphing the // values received. // // based on Analog In // by <a href="http://itp.jtnimoy.com">Josh Nimoy</a>.

Added lines 44-47:

String buff = ""; int NEWLINE = 10;

// Store the last 64 values received so we can graph them.

Changed lines 54-56 from:
  // Print a list in case COM1 doesn't work out
  //println("Available serial ports:");
  //printarr(PSerial.list());
to:
  println("Available serial ports:");
  println(Serial.list());
Changed lines 57-58 from:
  //port = new Serial(this, "COM1", 9600);
  // Uses the first available port
to:
  // Uses the first port in this list (number 0).  Change this to
  // select the port corresponding to your Arduino board.  The last
  // parameter (e.g. 9600) is the speed of the communication.  It
  // has to correspond to the value passed to Serial.begin() in your
  // Arduino sketch.
Added lines 63-66:
  // If you know the name of the port used by the Arduino board, you
  // can specify it directly like this.
  //port = new Serial(this, "COM1", 9600);
Added line 74:
  // Graph the stored values by drawing a lines between them.
Changed lines 84-87 from:
  println(serial);

  for (int i = 0; i < 63; i++)
    values[i] = values[i + 1];
to:
  if (serial != NEWLINE) {
    // Store all the characters on the line.
    buff += char(serial);
  } else {
    // The end of each line is marked by two characters, a carriage
    // return and a newline.  We're here because we've gotten a newline,
    // but we still need to strip off the carriage return.
    buff = buff.substring(0, buff.length()-1);
Changed lines 93-107 from:
  values[63] = serial;
to:
    // Parse the String into an integer.  We divide by 4 because
    // analog inputs go from 0 to 1023 while colors in Processing
    // only go from 0 to 255.
    int val = Integer.parseInt(buff)/4;

    // Clear the value of "buff"
    buff = "";

    // Shift over the existing values to make room for the new one.
    for (int i = 0; i < 63; i++)
      values[i] = values[i + 1];

    // Add the received value to the array.
    values[63] = val;
  }
Deleted line 108:
  • /
January 14, 2007, at 03:38 PM by David A. Mellis -
Added lines 1-54:
void setup()
{
  Serial.begin(9600);
}

void loop()
{
  Serial.print(analogRead(0) / 4, BYTE);
  delay(20);
}

/*
import processing.serial.*;

Serial port;
int[] values = new int[64];

void setup()
{
  size(512, 256);

  // Print a list in case COM1 doesn't work out
  //println("Available serial ports:");
  //printarr(PSerial.list());

  //port = new Serial(this, "COM1", 9600);
  // Uses the first available port
  port = new Serial(this, Serial.list()[0], 9600);  
}

void draw()
{
  background(53);
  stroke(255);

  for (int i = 0; i < 63; i++)
    line(i * 8, 255 - values[i], (i + 1) * 8, 255 - values[i + 1]);

  while (port.available() > 0)
    serialEvent(port.read());
}

void serialEvent(int serial)
{
  println(serial);

  for (int i = 0; i < 63; i++)
    values[i] = values[i + 1];

  values[63] = serial;
}
*/

Share