Please help me to run graph pointer from left to right

anbuchelvansci

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

anbuchelvansci

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

quark

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.

TfGuy44

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

anbuchelvansci

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 ?

TfGuy44

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.

anbuchelvansci

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 ?

anbuchelvansci

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

TfGuy44

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