We are about to switch to a new forum software. Until then we have removed the registration on this forum.
// 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.
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 .
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 ?
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!
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
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!
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