Please help me to run graph pointer from left to right

// This program creates a graph and plot chart according to mouse y axis movement 
// Processing Graph  point move from right to left
// Mohamed Ferose


// Declaring Variables 
import processing.serial.*;
Serial myPort;
int x = 50 ;   // number of lines in x axis
int y = 20 ;  // number of lines in y axis 
float[] vals;  // array store moving point value of moving point


void setup()
{
  // List all the available serial ports
  println(Serial.list());
  // Open the port you are using at the rate you want:
  myPort = new Serial(this, Serial.list()[2], 9600);
  size(600, 200);  // size of the window
  frameRate(25);  // update interval
  noSmooth();
  vals = new float[width]; // pointer start position
}


void draw()
{
  graphSheet();
  pointer();
  reading();
}


void graphSheet()    // input graph size in scale value
{  
  int scale = 10;                // how many pixel is equal to one box
  int gw = x*scale+100;
  int gh = y*scale;
  size(gw, gh);
  noSmooth();
  background(8, 29, 44);       //dark blue background
  stroke(49, 74, 92);          //graph line color 

  for (int k = scale; k<gw; k=k+scale)  // variable "i" is pixel number 
  {
    line(0, k, gw, k);       // lines for x axis
    line(k, 0, k, gh);      // lines for y axis
  }
}


void pointer()
{
  // Draw lines connecting all points
  for (int i = 0; i < vals.length-1; i++)
  {
    stroke(105, 229, 250); // pointer colour
    strokeWeight(1); // pointer thickness
    line(i, vals[i], i+1, vals[i+1]); //draw pointer as lines
  }

// Slide everything down in the array
  for (int i = 0; i < vals.length-1; i++)
  {
    vals[i]  = vals[i+1]; // Transfer old Value
    vals[i+1] = mouseY; //Update new Value
  }  
}


//display reading text
void reading()
{
  textSize(20);
  text(mouseY, 550,mouseY+10); 
  fill(240);
}

Answers

  • I CREATE THIS FROM MULTIPLE SOURCES BUT . I DONT UNDERSTAND Y THIS PROGRAM RUN THE POINTER FROM RIGHT TO LEFT . I TRIED MANY TIMES BUT I CANNOT ABLE TO MAKE THIS POINTER FROM LEFT TO RINGHT ANYONE PLESE HELP ME

  • I have correctly formatted your code so it is viewable in this forum. Please learn how to do this yourself next time. How to format code and text

    Also do NOT use all capitals in this forum. It is the equivalent of shouting and is bad forum etiquette.

  • edited June 2015

    IT IS SIMPLE IF YOU UNDERSTAND TRANSLATIONS AND SCALING . SEE IN THE EXAMPLE BELOW I HAVE USED PUSHMATRIX() , POPMATRIX() , TRANSLATE() , AND SCALE() TO ACCOMPLISH THIS WITHOUT HAVING TO CHANGE ANYTHING ELSE ! I ALSO RELOCATED THE NUMBER FROM THE RIGHT SIDE TO THE LEFT .

    // Declaring Variables 
    //import processing.serial.*;
    //Serial myPort;
    int x = 50 ;   // number of lines in x axis
    int y = 20 ;  // number of lines in y axis 
    float[] vals;  // array store moving point value of moving point
    
    
    void setup() {
      // List all the available serial ports
      //println(Serial.list());
      // Open the port you are using at the rate you want:
      //myPort = new Serial(this, Serial.list()[2], 9600);
      size(600, 200);  // size of the window
      frameRate(25);  // update interval
      noSmooth();
      vals = new float[width]; // pointer start position
    }
    
    
    void draw() {
      graphSheet();
      pointer();
      reading();
    }
    
    
    void graphSheet() {    // input graph size in scale value  
      int scale = 10;                // how many pixel is equal to one box
      int gw = x*scale+100;
      int gh = y*scale;
      size(gw, gh);
      noSmooth();
      background(8, 29, 44);       //dark blue background
      stroke(49, 74, 92);          //graph line color 
    
      for (int k = scale; k<gw; k=k+scale) { // variable "i" is pixel number   
        line(0, k, gw, k);       // lines for x axis
        line(k, 0, k, gh);      // lines for y axis
      }
    }
    
    
    void pointer() {
      // Draw lines connecting all points
      pushMatrix();
      translate(width,0);
      scale(-1,1);
      for (int i = 0; i < vals.length-1; i++) {
        stroke(105, 229, 250); // pointer colour
        strokeWeight(1); // pointer thickness
        line(i, vals[i], i+1, vals[i+1]); //draw pointer as lines
      }
      popMatrix();
    
      // Slide everything down in the array
      for (int i = 0; i < vals.length-1; i++) {
        vals[i]  = vals[i+1]; // Transfer old Value
        vals[i+1] = mouseY; //Update new Value
      }
    }
    
    
    //display reading text
    void reading() {
      textSize(20);
      text(mouseY, 10, mouseY+10); 
      fill(240);
    }
    

    OK LET'S STOP SHOUTING NOW ! Whew, my throat hurts...

  • Thank you so much for your help Mr TfGuy44 and quark . Previously i don't know capitalisation Means Shouting . now i correct my mistake.

    The Correction you made in my code is just run the pointer from left to right and previous value move towards right. but what i expect to do is ploting the value in its place and move the pointer itself to right. after end of the screen it come back to left and plot again new value and vanish the old value as it passes .

    is that possible ?

  • edited June 2015 Answer ✓

    Yeah. And it's actually a cool effect. Each frame I store the mouse position into vals[at], where "at" is an index that ranges from 0 to width-1. I also increment "at" so the next time I store a value it is in the next position, and make sure that it never take a value of width or greater using the mod function.

    Drawing everything remains exactly the same, as drawing was based on the contents of vals[] anyway!

    // Declaring Variables 
    //import processing.serial.*;
    //Serial myPort;
    int x = 50 ;   // number of lines in x axis
    int y = 20 ;  // number of lines in y axis 
    int at = 0;
    float[] vals;  // array store moving point value of moving point
    
    
    void setup() {
      // List all the available serial ports
      //println(Serial.list());
      // Open the port you are using at the rate you want:
      //myPort = new Serial(this, Serial.list()[2], 9600);
      size(600, 200);  // size of the window
      frameRate(25);  // update interval
      noSmooth();
      vals = new float[width]; // pointer start position
    }
    
    
    void draw() {
      graphSheet();
      pointer();
      reading();
    }
    
    
    void graphSheet() {    // input graph size in scale value  
      int scale = 10;                // how many pixel is equal to one box
      int gw = x*scale+100;
      int gh = y*scale;
      size(gw, gh);
      noSmooth();
      background(8, 29, 44);       //dark blue background
      stroke(49, 74, 92);          //graph line color 
      for (int k = scale; k<gw; k=k+scale) { // variable "i" is pixel number   
        line(0, k, gw, k);       // lines for x axis
        line(k, 0, k, gh);      // lines for y axis
      }
    }
    
    
    void pointer() {
      // Save new value
      vals[at++] = mouseY;
      at%=width;
      // Draw lines connecting all points
      for (int i = 0; i < vals.length-1; i++) {
        stroke(105, 229, 250); // pointer colour
        strokeWeight(1); // pointer thickness
        line(i, vals[i], i+1, vals[i+1]); //draw pointer as lines
      }
    }
    
    
    //display reading text
    void reading() {
      textSize(20);
      text(mouseY, 10, mouseY+10); 
      fill(240);
    }
    

    The need to "shift" values over a position also goes away; that code is removed.

  • now one more problem . instead of mouseY i assign an "int mouse = myPort.read()" but it keep on fluctuating from 10 to 54 whats wrong with my code ?

  • but serial port send value in serial monitor is 657 to 667

  • edited June 2015

    What's wrong is that your serial port is probably sending you its data as a String, but you've told your sketch to treat like a number!

    println( int('6') );
    println( int('\n') );
    

    I think you should see what the data you get from your serial port is when you get a string. Try running something like this example:

    https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html

Sign In or Register to comment.