We are about to switch to a new forum software. Until then we have removed the registration on this forum.
I am trying to center a table in my presentation window, but I cannot find any code samples in the processing guide about table placement, just text. I am a complete noob to code so please be be patient. My current code: size(1200, 675);
Table tabela = loadTable("cidades.tsv", "header");
for (int i = 0;
i < tabela.getRowCount();
i = i + 1) {
TableRow linha = tabela.getRow(i);
int posX = 100*i;
int posY = 405;
float lado = sqrt(linha.getInt("área"));
ellipse(posX, posY, lado, lado);
for (int j=0;
j<linha.getInt("população")/5000;
j=j+1) {
point(random(posX - lado, posX + lado),
random(posY - lado, posY+lado));
}
}
The data I am pulling from the .tsv: cidade população área Tokyo-Yokohama 37239000 8547 Jakarta (Jabotabek) 26746000 2784 Seoul-Incheon 22868000 2163 Delhi, DL-HR-UP 22826000 1943 Shanghai, SHG 21766000 3497 Manila 21241000 1437 Karachi 20877000 803 New York, NY-NJ-CT 20673000 11642 Sao Paulo 20568000 3173 Mexico City 20032000 2046
Answers
https://Forum.Processing.org/two/discussion/24337/the-table-has-no-column-named#Item_9
Ummm...so I feel like I just tried to find a needle in a haystack that was in a foreign language lol. I think I simply need to tell the code that I do not want x to start at zero so that half of the first ellipse is not falling off the screen...so I think I would need to tweak this part of the code:
int posX = 100*i;
or am I completely off in thinking it could be that simple?
you can calculate this
O, I mixed up row count and column count in line 5
Apologies
Thank you Chrisir! A little tweaking, and I got it so that it is not falling off the edge! size(1200, 675);
This is what the visualization looks like so far:
Now I need to figure out how to get this part of the code:
To fill in the Area ellipse with the population density, instead of a square overlay. What I am trying to do it tweak a tutorial we were given which was ugly and boring lol. But not being a coder, it is not as simple as I thought it would be.
The original visualizaion:
Sorry, wrong graphic...that one was my first attempt at tweaking the code...here is the tutorial graphic in its full ugliness:
You need a round shape?
make a random Radius and a random angle a:
a is in radians by the way
Yes and no, I need the population density to fill in the area (ellipse) by randomly placing one dot for every 5000 people.
I showed how to make a circle instead of a rectangle
Repeat this as often as you need it
Use a for loop
I guess my question is since the population is being pulled from the same table, and is suppose to be filling in the area ellipse, the circles are not going to be random, just the points used to represent the population which are suppose to fill in the area ellipse are random.
Maybe I am not explaining it well...according to the tutorial: To see the density of each city here, we will use a straightforward technique: representing the total number of inhabitants as points within the city area.
Currently, each circle represents the area of one city. I just cant seem to get the points inside the "city area" since I changed it from a square to an ellipse.
You are right I forgot to add the position to x and y.
Those are the center of the circle. And not random
Only radius and angle is random
Would I plug that somewhere into the existing for statement that generates the population density at the bottom? (code dummy here)
Yes instead of your point line
Adjust the variables accordingly
no matter where I try to plug it in I get "variable x does not exist" error?
float x; before the line
Do I need to do that for the r and a variable as well, because I am getting the same error for both of them as well?
_Yes instead of your point line
Adjust the variables accordingly_
I am also not sure what you mean by this...
I am pretty sure I am completely screwing this up...what is the "r" variable? The radius? random?
Sorry, I confused you.
Here is the idea. Apply it to your sketch.
Here the position of the circle (its center) is mouseX,mouseY.
Number of points is 444.
A point is set randomly at position x,y within a maximum radius of 46.
I know I have got to be missing something simple...I have checked that all my curly brackets have a partner but I keep getting an error on line 24 ( void setup() {)saying missing left curly bracket "{". Here is my full code...I can't see if it works until I figure out the bracket...sigh...
And thank you for you patience. I really appreciate your help in figuring this out.
this is a function:
you can't have commands outside of functions
your other function is draw()
it is from { to the correspondent }
So the void set up needs to be at the beginning of the code? And everything else in the void draw function?
Yes
this is not a command but a declaration, it belongs before setup
post your entire code please
Ok, it is sorta working, but no longer pulling the population data
Current code:
But I need this part:
to be pulling the "points" from the table to visually represent the population density. The code for that from my previous code was:
for (int j=0; j<linha.getInt("Population")/5000; j=j+1)
So it is not just about creating random dots in a circle pattern, but filling the existing circles (whose sizes are based on the data in the table) with a prescribed number of dots based on the population data in the table. My original code did everything right, except the shape was incorrect, correct area, just wrong shape. Does that make sense?
Here is the original tutorial, which I am trying to tweak and make more visually appealing, and add more data, while telling the same narrative. http://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/
Yes.
This idea is that you join the two codes.
Yeah, to get from rect shape to circle shape you just need to adopt this:
you wrote:
Yes,
So, you're almost there
I'll be back in an hour.
YES!!! You are amazing! Thank you so much! Final visual works perfectly!
The code: void setup() { size(1200, 675); //size of screen
Final visual:
The visual is much cooler when you run it because the points are in movement which is a great representation for a population! Which part of the code creates that flux?
Dunno
Try moving line 8 into setup ()
Make tabela a global variable
background(img);
at start of draw() !!!!
comment out line 21 with //
use this
stroke(random(255), random(255), random(255));
before pointmy version has a file named .csv instead
ok, now I want you to do this: When the mouse hovers over a circle the name of the city appears.
look at
if
/dist
/text
in the reference:https://www.processing.org/reference/
hmmm....wouldn't I need to look at mouse over as well?
mouse over is not a command, you need to program it yourself as far as I know
use if and dist
hmmm...
not sure if I am on the right track:
almost
should be outside the inner for loop I guess....
try it and correct it
it is not liking line 49, the float d-=
do you use
d
at all from this line?No.
this line is not needed.
float to boolean?
Leaving work...be back on in an hour...thank you for the challenge and help!
Oh, that's right
or instead of 45 use the radius of the current city or a value slightly bigger than the biggest circle/ radius
lol, I have no idea how to find that lol...would I pull from the code?
Hmm...it is not popping up one name but multiples. I tried to move it, thinking it might be pulling from the population code...
looks good.
few remarks:
the texts do add up because processing doesn't delete the screen automatically.
You have to do this:
So first line in draw():
Next idea: when you have the text add mouseX,mouseY and you move the mouse the text moves as well:
looks uncool / unstable.
Idea:
bring it out at a position of the circle:
now you can move the mouse within the circle and text stays where it is
and Box around the text