Hello,
I need to make a graph like this:
But I need on both axis 0 to 1000.
I get from the arduino random digits that I need to implemend in the graph, this needs to be in real time, so the graphs needs to update it’s self. So there always need to be one point on the graph.
I need this as soon as possible, but I’m stuck and I don’t know how to go further on this point.
I hope some one can help me!
Greetings!
Maybe if you provide what you have done so far someone will help you
And the type of Data you get… Or what exactly you need to represent. What i understood is that you either have to represent 2D data, like vectors you receive from the Arduino, or you want it to represent one dimensional data over a period of time.
import processing.serial.*;
Serial myPort; // maakt een object van seriele poort
String val; //ontvangt de data van de seriele poort
void setup ()
{
size (1000,1000); // maak het canvas
String portName = Serial.list() [0]; // de 0 moet worden veranderd in de poort
myPort= new Serial(this, portName, 9600);
float y =0;
float x=0;
float space = 25; //grote hokjes
float len1 = 400; // aantal hokjes y- as
float stopX = 5.960296; // Maximum x-as
float len2 = stopX-x; // aantal hokjes x-as
float stopY = 50.882125; // Maximum Y-as
for (float xx=75; xx<=stopX; xx+=space) // x-as
{
line(xx, y, xx, y+len1);
}
for (float yy=125; yy<=stopY; yy+=space) //y-as
{
line(x, yy, x+len2, yy);
}
}
void draw ()
{
if (myPort.available() > 0) //als data beschikbaar is
{
val = myPort.readStringUntil('\n'); // lees het uit en sla het op in val
if (val != null) // Als er waardes worden uitgelezen gaat de hier in
{
float [] list = float( split (val,",")); // data verkregen van arduino wordt bij de komma gesplitsd.
println(val); // print het uit op het console
float part1 = list[0]; //part1 wordt de de eerst afkoppeling opgeslagen
float part2 = list[1]; // part2 wordt de tweede afkoppeling opgeslagen
float X= part1; // part1 wordt opgeslagen als X
float Y= part2; // part2 wordt opgeslagen als Y
}
}
background(255);
fill(205,61,62); //Rood vierkant gemaakt
rect(100, 250, 800, 500);
fill(150,255,0);
rect(125,275,750,450); // groen vierkant wordt gemaakt
fill(0);
textSize(40);
text("GPS Tracker", 350, 220); //Tekst wordt geschreven
fill(0, 0, 255);
point (X,Y); // de variabelen uit part1 en part2 worden gebruikt voor de coördinaten
}
This is the code I have right know, but it doesn’t what I want like I explained above here!
What I need is to represent 2D data, if I’m right. Every second I get “cordinates” from the arduino. These are randoms numbers between 0 and 1000.
In processing I need to make a graph like the picture above. So if I get for the cordinates (500,750) then there needs to be a point in de graph that represents the cordinates. But the next second I get another cordinate en the point needs to move to the other location.
I hope you guys know what I mean, because I’m a newbie in processing.
So you don’t need a graph, but a coordinate system. And that is actually very easy to do.
If you need both axis to be 1000, you can have the window size be 100 and then scale it. Inside a “for i < 10” loop just call text with the right number(in this case i * 100) and i*100 depending on the axis, for both sides. Then just do point(x, y) like you did… And that should be it… If you want the previous points to disappear, use background(255) and if not, don’t use it.
I’m sorry but, I don’t get what you exactly mean. all the coordinate systems that I found on the web this week, weren’t the ones I was looking for
I need to make a x and y axis both until the number 1000. And the numbers I get from the arduino need to go in the graph.
And every second I get a new set of numbers, so the point in the graph need also to change to the other place where x and y axis cross eachother.
I hope you can help me with this, because this is what the assignment says
hm not entirely sure what you’re doing with your code, especially the for loops in setup().
for (float xx=75; xx<=stopX; xx+=space) // x-as
{
line(xx, y, xx, y+len1);
}
for (float yy=125; yy<=stopY; yy+=space) //y-as
{
line(x, yy, x+len2, yy);
}
those for loops will never loop because the starting value of xx (75) and yy (125) are already larger than what you gave stopX and stopY.
float stopX = 5.960296; // Maximum x-as
float stopY = 50.882125; // Maximum Y-as
Also i’m not quite sure about what stopX and stopY are in the first place? if you want to make a raster of lines like the graph you described, the “maximum x-as” and “maximum Y-as” should both go to 1000 right?
you can create this graph with just a nested for-loop:
fill(0);
textSize(10);
for (float xx=25; xx<=1025-space; xx+=space) { // x-as
for (float yy=25; yy<=1025-space; yy+=space) { // y-as
line(xx, yy, xx, yy+space);
line(xx, yy, xx+space, yy);
if(xx == 25) text((int)(yy-space),xx-space,yy);
else if(yy==25) text((int)(xx-space),xx,yy);
}
line(25,1025, 1025,1025);
line(1025,25,1025,1025);
}
this will create a “graph” in which you can now represent your data.
also note that the Y-axis is top-to-bottom, instead of what is usual with graphs.
This is the total code I made, hopefully something more like you wanted:
import processing.serial.*;
Serial myPort; // maakt een object van seriele poort
String val; //ontvangt de data van de seriele poort
float x=0, y=0;
float space = 25; //grootte hokjes
void setup ()
{
size (1050, 1050); // maak het canvas
background(255);
String portName = Serial.list() [0]; // de 0 moet worden veranderd in de poort
myPort= new Serial(this, portName, 9600);
//float y =0;
//float x=0;
//float len1 = 400; // aantal hokjes y- as (breedte veld/grootte hokjes)
//float stopX = 5.960296; // Maximum x-as
//float len2 = stopX-x; // aantal hokjes x-as
//float stopY = 50.882125; // Maximum Y-as
}
void draw () {
background(255);
fill(0);
textSize(10);
for (float xx=25; xx<=1025-space; xx+=space) { // x-as
for (float yy=25; yy<=1025-space; yy+=space) { // y-as
line(xx, yy, xx, yy+space);
line(xx, yy, xx+space, yy);
if (xx == 25) text((int)(yy-space), xx-space, yy);
else if (yy==25) text((int)(xx-space), xx, yy);
}
line(25, 1025, 1025, 1025);
line(1025, 25, 1025, 1025);
}
if (myPort.available() > 0) //als data beschikbaar is
{
val = myPort.readStringUntil('\n'); // lees het uit en sla het op in val
if (val != null) // Als er waardes worden uitgelezen gaat de hier in
{
float [] list = float( split (val, ",")); // data verkregen van arduino wordt bij de komma gesplitsd.
println(val); // print het uit op het console
x = list[0]; //part1 wordt de de eerst afkoppeling opgeslagen
y = list[1]; // part2 wordt de tweede afkoppeling opgeslagen
//float X1= part1; // part1 wordt opgeslagen als X
//float Y1= part2; // part2 wordt opgeslagen als Y
//were just an extra step that's not neccessary
}
}
//fill(205, 61, 62); //Rood vierkant gemaakt
//rect(100, 250, 800, 500); //for what?
//fill(150, 255, 0);
//rect(125,275,750,450); // groen vierkant wordt gemaakt
fill(0);
textSize(40);
text("GPS Tracker", 350, 220); //Tekst wordt geschreven
fill(0, 0, 255);
point (x, y); // de variabelen uit part1 en part2 worden gebruikt voor de coördinaten
}
ah forgot,
I made the size of the windows larger to make room for the values on the sides.
This however creates a problem when plotting your values, because they will now be shifted 50 to the top left.
this is fixable with
x = map(x,0,1000,25,1025); //and
y = map(y,0,1000,25,1025);
this will make 0, 25,
and 1000 1025.
you could also simply do
x + list[0] + 25;
y + list[1] + 25;
probably even easier…
I’m sorry, i don’t quite get what you want… What you are describing is exactly a coordinate system…
I’ll just make the most basic setup to get what you described.
void setup() {
size(600, 600);
}
void draw() {
int inputX = (int)random(0, 1000);//replace this with the X coordinate you get
int inputY = (int)random(0, 1000);//replace this with the Y coordinate you get
for (int x = 0; x <= 10; x++) {
text(x*100, x*50 + 20, 540);
line(x*50+20, 20, x*50+20, 520);
}
for (int y = 0; y <= 10; y++) {
text((10-y)*100, 0,y*50+30);
line(20, y*50+20,520, y*50+20);
}
point(inputX/2 + 20, inputY/2 + 20);
}
so it will look like this :
import processing.serial.*;
Serial myPort; // maakt een object van seriele poort
String val; //ontvangt de data van de seriele poort
void setup ()
{
size (1000,1000); // maak het canvas
String portName = Serial.list() [0]; // de 0 moet worden veranderd in de poort
myPort= new Serial(this, portName, 9600);
float y =0;
float x=0;
float space = 25; //grote hokjes
float len1 = 400; // aantal hokjes y- as
float stopX = 5.960296; // Maximum x-as
float len2 = stopX-x; // aantal hokjes x-as
float stopY = 50.882125; // Maximum Y-as
for (float xx=75; xx<=stopX; xx+=space) // x-as
{
line(xx, y, xx, y+len1);
}
for (float yy=125; yy<=stopY; yy+=space) //y-as
{
line(x, yy, x+len2, yy);
}
}
void draw ()
{
if (myPort.available() > 0) //als data beschikbaar is
{
val = myPort.readStringUntil('\n'); // lees het uit en sla het op in val
if (val != null) // Als er waardes worden uitgelezen gaat de hier in
{
float [] list = float( split (val,",")); // data verkregen van arduino wordt bij de komma gesplitsd.
println(val); // print het uit op het console
float part1 = list[0]; //part1 wordt de de eerst afkoppeling opgeslagen
float part2 = list[1]; // part2 wordt de tweede afkoppeling opgeslagen
float X= part1; // part1 wordt opgeslagen als X
float Y= part2; // part2 wordt opgeslagen als Y
}
}
background(255);
fill(205,61,62); //Rood vierkant gemaakt
rect(100, 250, 800, 500);
fill(150,255,0);
rect(125,275,750,450); // groen vierkant wordt gemaakt
fill(0);
textSize(40);
text("GPS Tracker", 350, 220); //Tekst wordt geschreven
fill(0, 0, 255);
for (int x = 0; x <= 10; x++) {
text(x*100, x*50 + 20, 540);
line(x*50+20, 20, x*50+20, 520);
}
for (int y = 0; y <= 10; y++) {
text((10-y)*100, 0,y*50+30);
line(20, y*50+20,520, y*50+20);
}
point (X/2 + 20,Y/2 + 20); // need to add 20 as offset and divide by 2 because its scaled to half the size...
}
Obligatory mention: if you can use libraries, you might want to use grafica:
https://jagracar.com/sketches/multiplePlots.php
It has a lot of the things you want – axis labeling, grid lines, scaling, etc – already implemented, you just need to look at the examples and adapt them to your data.
Hello,
The graph you made is perfect, but I implemented the code and I don’t get a point in the graph.
The code on the arduino uno works great and gives out points, but the point don’t come back in the graph.
I have put that last bit of code in there, but it still doesn’t work, so could you please help me this one last time?
import processing.serial.*;
Serial myPort; // maakt een object van seriele poort
String val; //ontvangt de data van de seriele poort
float x=0, y=0;
float space = 25; //grootte hokjes
void setup ()
{
size (1050, 1050); // maak het canvas
background(255);
String portName = Serial.list() [0]; // de 0 moet worden veranderd in de poort
myPort= new Serial(this, portName, 9600);
}
void draw ()
{
background(255);
fill(0);
textSize(10);
for (float xx=25; xx<=1025-space; xx+=space) { // x-as
for (float yy=25; yy<=1025-space; yy+=space) { // y-as
line(xx, yy, xx, yy+space);
line(xx, yy, xx+space, yy);
if (xx == 25) text((int)(yy-space), xx-space, yy);
else if (yy==25) text((int)(xx-space), xx, yy);
}
line(25, 1025, 1025, 1025);
line(1025, 25, 1025, 1025);
}
if (myPort.available() > 0) //als data beschikbaar is
{
val = myPort.readStringUntil('\n'); // lees het uit en sla het op in val
if (val != null) // Als er waardes worden uitgelezen gaat de hier in
{
float [] list = float( split (val, ",")); // data verkregen van arduino wordt bij de komma gesplitsd.
println(val); // print het uit op het console
x = list[0]; //part1 wordt de de eerst afkoppeling opgeslagen
y = list[1]; // part2 wordt de tweede afkoppeling opgeslagen
}
}
x = map(x,0,1000,25,1025); //and
y = map(y,0,1000,25,1025);
point (x, y);
}
I don‘t know about wahahaha‘s code, But did you try out my Version? I tried it and that works for sure, so before i try to Correct the other one, just try that one before 
I tried your code, but that doesn’t work either. The coördinates that the arduino gives, don’t come back in the graph. So the function point doesn’t work or the split function that so the code splits in to a x and y coördinate doesn’t work. I don’t know where it goes wrong, so could someone please help me figure this out? My choice goes to the code from wahahahaha, because the graph is in my opinion better!
Hope some could help me figure this one out.
I don‘t know about wahahas code (will Check it When i get on my pc), But my code should Display the Point correctly (Even if the coordinate System is pretty ugly, it should do what it should), so i assume that there is a Problem When receiving the coordinates from your arduino. Try printing out the coordinates to See if they get updated. You can do that by just printing x and y after you set it to the respective list[].
Ok, i just checked it and it works just fine… the only thing is that the point is drawn way to small and can be hidden behind the lines. So you can just set strokeWeight(0) after background and then strokeWeight(10) just before the point is drawn, or just draw an ellipse…
If this still doesn’t work, then it is pretty much guaranteed that you don’t receive correct coordinates from your arduino. Just add after
x = list[0];
y = list[1];
println(x, y);
But since you already print out the val, i assume that it should really give out a vector, else you’d have noticed, so i’m 99% sure you’re just not seeing the point because its too small.
Yes you where right Lexyth, I didn’t saw the point. But if I implemend the code StrokeWeight the point becomes a little bigger, but the rasters or lines from the graph become also thicker. Isn’t there a way to make the point bigger and maybe a different color?
You‘ll have to set strokeWeight to big before the Point and reset it to 0, or 1 after it, so it doesn‘t affect the lines. And you can just use stroke and fill to change the Color of the point and reset it afterwards.
Thanks Lexyth it works just fine! But the arduino output doesn’t show up in processing and everything seems fine. So I don’t know where to problem is. De arduino code works fine and the processing also, just the data transfer from arduino to processing doesn’t work. If someone could help me figure this out then I’m done!
Arduino code:
void setup()
{
randomSeed(analogRead(0));
Serial.begin(9600);
}
void loop()
{
int x = random(0, 1000);
int y = random(0, 1000);
int MyArray [2] = {x,y};
Serial.print(x);
Serial.print(",");
Serial.print(y);
Serial.println();//('\n');
delay(3000);
}
Processing code:
import processing.serial.*;
Serial myPort; // maakt een object van seriele poort
String val; //ontvangt de data van de seriele poort
float x=0, y=0;
float space = 25; //grootte hokjes
void setup ()
{
size (1050, 1050); // maak het canvas
x = map(x,0,1000,25,1025); //and
y = map(y,0,1000,25,1025);
background(255);
strokeWeight(0);
String portName = Serial.list() [0]; // de 0 moet worden veranderd in de poort
myPort= new Serial(this, portName, 9600);
}
void draw ()
{
background(255);
fill(0);
textSize(10);
for (float xx=25; xx<=1025-space; xx+=space) { // x-as
for (float yy=25; yy<=1025-space; yy+=space) { // y-as
line(xx, yy, xx, yy+space);
line(xx, yy, xx+space, yy);
if (xx == 25) text((int)(yy-space), xx-space, yy);
else if (yy==25) text((int)(xx-space), xx, yy);
}
line(25, 1025, 1025, 1025);
line(1025, 25, 1025, 1025);
}
if (myPort.available() > 0) //als data beschikbaar is
{
val = myPort.readStringUntil('\n'); // lees het uit en sla het op in val
if (val != null) // Als er waardes worden uitgelezen gaat de hier in
{
float [] list = float( split (val, ",")); // data verkregen van arduino wordt bij de komma gesplitsd.
println(val); // print het uit op het console
x = list[0]; //part1 wordt de de eerst afkoppeling opgeslagen
y = list[1]; // part2 wordt de tweede afkoppeling opgeslagen
}
}
strokeWeight(14);
point (x, y); // de variabelen uit part1 en part2 worden gebruikt voor de coördinaten
strokeWeight(0);
}```what does it say when you put
println(val);
behind this?
that will print what processing gets from the arduino, perhaps something wrong happens there.
Nothing happends. I don’t get to see anything so processing doesn’t receive anything from the arduino am I correct?