Hi everyone! I am a beginner with Processing and currently trying to use an array filled with data in my sketch.
I would like to iterate through the array so that the objects (circles) are drawn one by one. With my current sketch, I am able to do that, but obviously each object disappears after it has been drawn and shown for a while. Instead, I want to iterate through the array so that the previous circle does not disappear when the new is drawn. (Sorry for my limited English!) Could you help me with editing the current sketch (below)? Thank you so much!
Table table; // table object
TigerGoogle [] tigergoogle; // tiger data array
int counter; // Automatically initialized at 0
int lastTime; // when the current object was last displayed
final int timeUntilNext = 500;
float x = 10; // x location of the shapes
float y= 300; // y location of the shapes
void setup () {
size (600, 600) ;// setting the size
// filling the array with data
Table table = loadTable ("google.csv", "header");
tigergoogle = new TigerGoogle [table.getRowCount ()]; // size of the array of objects is determined by the row count
for (int i = 0; i < table.getRowCount (); i++) { // iterating all the rows
TableRow row = table.getRow (i);
float z = row.getInt ("Interest");
String date = row.getString ("Date");
tigergoogle [i] = new TigerGoogle (x, y, z, date); // make a Tigergoogle object (circle) out of the data from each row. every i in the array can now create an object
}
lastTime = millis(); // time is measured in millis
}
void draw () {
background (200);
if (millis() - lastTime >= timeUntilNext) {
counter = ++counter % tigergoogle.length;
lastTime = millis();
}
tigergoogle [counter].display ();
}
class TigerGoogle {
float x, y;
float diameter;
String date;
// create the bubble
TigerGoogle (float x_, float y_, float diameter_, String d) {
// TigerGoogle (float x_, float y_, float diameter_) {
x= x_;
y= y_;
diameter = diameter_;
date = d;
}
void display () {
stroke (0);
strokeWeight (2);
noFill();
if (diameter> 20) {
fill (255, 0, 0);
}
if (diameter> 30) {
fill (255, 0, 255);
}
ellipse (x, y, diameter, diameter);
println (date);
x++;
}
}
please format your code posting by pasting it into the
</> code button
of the editor header menu ( context name: Preformatted text )
it looks like
```
type or paste code here
```
also can use the ``` manually above and below your code.
thank you.
that might be confusing at first, but lets take it like this:
processing has 2 modes,
paint mode
draw mode
in paint mode you never do a background(…)
so all you draw will be over other drawings.
in draw mode you clean the canvas with background(…) ( 60 times per second )
and draw what you want to show
in that case all the array up to the current point ( by the timer )
so your draw loop should be like (untested)
void draw () {
background (200);
for ( int i = 0; i < counter; i++ ) tigergoogle[i].display ();
if (millis() - lastTime >= timeUntilNext) {
counter = ++counter % tigergoogle.length;
lastTime = millis();
}
}
I just tested it and it does work. Many many thanks for your suggestion and explanation! And for the tips for the formatting as well - this was my first post so now I know how to format the code next time. Best wishes!
Hi again! What I am trying to solve next is the fact that there seems to be something wrong with how my code pulls data from the CSV file when using for loop.
With my original code, the data and the dates that are printed remain in order (going from dates from 2014 until 2019) and thereby my circles are of the right size. However, with the suggested for loop in draw, the dates soon start to jump from 2015 back to 2014, for example, never reaching 2019. It is as if the counter would become “overheated”. I noticed this when trying for loops by myself earlier on as well. I wonder if @kll or some others would have insights? Should I reset my counter to 0 at some point in order to avoid this? Thanks again!
sorry, actually that was a request, i ask you to EDIT / REPAIR your first post.
( do not make a new post below )
and to the next question,
if you want us to play / test your code we would need it not only be readable,
please add one more code posting with the (? shortened but functional ?) csv file
to run your code here in the PDE.
Hi @kll, I got it! I edited the original post and I will attach the current code with csv file here. As you see, I am trying to create two patterns of circles from two columns of the file. There seems to be no option to attach a csv file: please let me know if the one I have copypasted here is unusable.
Table table; // table objects
TigerGoogle [] tigergoogle; // tiger google data array
TigerSights [] tigersights; // tiger sights data array
int counter;
int lastTime; // when the current object was last displayed
final int timeUntilNext = 500;
void setup () {
size (600, 600) ;// setting the size
// filling the array with data
Table table = loadTable ("google_and_sights_short.csv", "header");
tigergoogle = new TigerGoogle [table.getRowCount ()]; // size of the array of objects is determined by the row count
tigersights = new TigerSights [table.getRowCount ()];
for (int i = 0; i < table.getRowCount (); i++) { // iterating all the rows
TableRow row = table.getRow (i);
float x = 10; // x location of the shapes
float y= 300; // y location of the shapes
float z = row.getInt ("Interest");
String date = row.getString ("Date");
float x2 = 100; // x location of the shapes
float y2= 100; // y location of the shapes
float z2 = row.getInt ("Sights");
tigergoogle [i] = new TigerGoogle (x, y, z, date); // make a Tigergoogle object (circle) out of the data from each row. every i in the array can now create an object
tigersights [i] = new TigerSights (x2, y2, z2, date);
}
lastTime = millis(); // time is measured in millis
}
void draw () {
background (255);
for ( int i = 0; i < counter; i++ ) tigergoogle[i].display ();
for ( int j = 0; j < counter; j++ ) tigersights[j].display ();
if (millis() - lastTime >= timeUntilNext) {
counter = ++counter % tigergoogle.length;
lastTime = millis();
}
}
// A bubble class
class TigerGoogle {
float x, y;
float diameter;
String date;
// create the bubble
TigerGoogle (float x_, float y_, float diameter_, String d) {
x= x_;
y= y_;
diameter = diameter_;
date = d;
}
void display () {
stroke (0);
strokeWeight (2);
noFill();
if (diameter> 20) {
fill (255, 0, 0);
}
if (diameter> 30) {
fill (255, 0, 255);
}
ellipse (x, y, diameter, diameter);
println (date);
x++;
}
}
class TigerSights {
float x2, y2;
float diameter2;
String date2;
TigerSights (float x2_, float y2_, float diameter2_, String d2) {
// TigerGoogle (float x_, float y_, float diameter_) {
x2= x2_;
y2= y2_;
diameter2 = diameter2_;
date2 = d2;
}
void display () {
stroke (0);
strokeWeight (2);
noFill();
if (diameter2> 20) {
fill (255, 0, 0);
}
if (diameter2> 30) {
fill (255, 0, 255);
}
ellipse (x2, y2, diameter2, diameter2);
println (date2);
x2++;
}
}
csv:
|Date|Interest|Sights|
| --- | --- | --- |
|03/01/16|18||
|10/01/16| 15||
|17/01/16|20||
|24/01/16|18||
|31/01/16|15||
|07/02/16|15||
|14/02/16|15||
|21/02/16|17||
|28/02/16|17||
|06/03/16|15||
|13/03/16|13||
|20/03/16|18||
|27/03/16|16||
|03/04/16|23||
|10/04/16|17||
|17/04/16|16||
|24/04/16|17||
|01/05/16|14||
|08/05/16|14||
|15/05/16|19||
|22/05/16|19||
|29/05/16|45||
|05/06/16|20||
|12/06/16|15||
|19/06/16|36||
|26/06/16|14||
|03/07/16|31||
|10/07/16|43||
|17/07/16|15||
|24/07/16|14||
|31/07/16|14||
|07/08/16|13||
|14/08/16|11||
|21/08/16|8||
|28/08/16|18||
|04/09/16|29|1|
|11/09/16|22||
|18/09/16|24||
|25/09/16|16||
|02/10/16|25||
|09/10/16|15||
|16/10/16|23||
|23/10/16|22||
|30/10/16|32||
|06/11/16|16||
|13/11/16|30||
|20/11/16|15||
|27/11/16|19||
|04/12/16|21||
|11/12/16|18||
|18/12/16|21||
|25/12/16|22||
|01/01/17|32||
|08/01/17|25|1|
|15/01/17|19||
|22/01/17|45||
|29/01/17|30||
|05/02/17|23||
|12/02/17|25||
|19/02/17|27||
|26/02/17|25||
|05/03/17|25||
|12/03/17|27||
|19/03/17|27||
|26/03/17|78||
|02/04/17|100||
|09/04/17|35||
|16/04/17|25||
|23/04/17|28||
|30/04/17|34|1|
|07/05/17|24||
|14/05/17|20||
|21/05/17|21||
|28/05/17|20||
|04/06/17|29||
|11/06/17|16||
|18/06/17|21||
|25/06/17|17||
|02/07/17|20||
|09/07/17|22||
|16/07/17|16||
|23/07/17|17||
|30/07/17|19||
|06/08/17|12||
|13/08/17|11||
|20/08/17|10||
|27/08/17|16||
|03/09/17|17||
|10/09/17|14||
|17/09/17|12||
|24/09/17|10||
|01/10/17|11||
|08/10/17|12||
|15/10/17|12||
|22/10/17|11||
|29/10/17|14||
|05/11/17|10||
|12/11/17|11||
|19/11/17|14||
|26/11/17|13||
|03/12/17|10||
|10/12/17|20||
|17/12/17|17||
|24/12/17|11||
|31/12/17|12||
|07/01/18|16||
|14/01/18|14||
|21/01/18|13||
|28/01/18|15||
|04/02/18|11||
|11/02/18|13||
|18/02/18|15|1|
|25/02/18|19|1|
|04/03/18|12||
|11/03/18|12||
|18/03/18|14||
|25/03/18|12||
|01/04/18|14||
|08/04/18|12||
|15/04/18|20||
|22/04/18|19||
|29/04/18|13||
|06/05/18|15||
|13/05/18|15||
|20/05/18|12||
|27/05/18|13||
|03/06/18|15||
|10/06/18|19||
|17/06/18|12||
|24/06/18|25||
|01/07/18|21||
|08/07/18|22||
|15/07/18|31||
|22/07/18|16||
|29/07/18|23||
|05/08/18|11||
|12/08/18|15||
|19/08/18|11||
|26/08/18|12||
|02/09/18|14||
|09/09/18|10||
|16/09/18|12||
|23/09/18|11||
|30/09/18|17||
|07/10/18|15||
|14/10/18|16||
|21/10/18|11||
|28/10/18|9||
|04/11/18|12||
|11/11/18|11||
|18/11/18|10||
|25/11/18|16||
|02/12/18|13|3|
|09/12/18|14||
|16/12/18|12||
|23/12/18|10||
|30/12/18|9||
|06/01/19|13||
|13/01/19|24||
|20/01/19|15||
|27/01/19|13||
|03/02/19|41||
|10/02/19|28||
|17/02/19|22||
|24/02/19|16||
|03/03/19|18||
|10/03/19|16||
|17/03/19|16||
|24/03/19|12||
|31/03/19|15||
|07/04/19|12||
|14/04/19|15||
|21/04/19|16||
|28/04/19|16||
|05/05/19|22||
|12/05/19|14||
|19/05/19|12||
|26/05/19|12||
|02/06/19|12||
|09/06/19|13||
|16/06/19|11||
|23/06/19|10||
|30/06/19|9||
|07/07/19|8||
|14/07/19|9||
|21/07/19|12||
|28/07/19|10||
|04/08/19|18|1|
|11/08/19|15||
|18/08/19|11||
|25/08/19|18||
|01/09/19|11||
|08/09/19|11||
|15/09/19|14||
|22/09/19|12||
|29/09/19|9||
|06/10/19|9||
|13/10/19|52||
|20/10/19|51||
|27/10/19|21||
|03/11/19|16||
|10/11/19|16||
|17/11/19|29||
|24/11/19|12||
|01/12/19|10||
|08/12/19|12||
|15/12/19|9||
Thank you! Now I have to admit that I have probably made some kind of mistake with the CSV file, as I have not used commas with values but an excel file that looks like this:
This by following Shiffman’s advice about using tabular data. Would you like me to add commas or should I change the file type altogether? Thank you for your patience!
Thanks! And yeah learning more about classes is a good idea. However my data still acts weirdly: after a few seconds, the order of the data pulled gets mixed (looping through 2016 and not reaching 2017) and the pace gets really fast as well. I try to replace my table with a proper csv with commas and see if that helps. Did you get the same problem?
Hi, thanks again! The counter (206) seems to make sense; however, I am not sure how I should use blank screen in this case? In the main code probably, is it just clear ()? Best,
I edited the original post and I will attach the current code with csv file here. As you see, I am trying to create two patterns of circles from two columns of the file. There seems to be no option to attach a csv file: please let me know if the one I have copypasted here is unusable.
