polygons with holes(toxi)

dimiro

in Contributed Library Questions • 1 year ago

hi
i am trying to reproduce the map from this thread in 2D. I got just the boundary points (not the landmass) from the dataset that is mentioned at the end of the post. i draw the map and then i choose countries to see how the polygon is drawn. So polygons with no holes are correctly drawn,

Germany with no islands

and from the same area France

and this is the code

selectedCountry=new Polygon2D(load.coords.get(p1.stringValue()));
fill(100);
gfx.polygon2D(selectedCountry);
// vor=new Voronoi(load.coords.get(p1.stringValue()).size());
for (int i = 0; i < load.coords.get(p1.stringValue()).size(); i++) {
fill(0,0,255);
ellipse(load.coords.get(p1.stringValue()).get(i).x,
load.coords.get(p1.stringValue()).get(i).y, .5f,.5f);
}

i have read the thread 100 times i have also tried the code that toxi posted(with voronoi & delaunay triang.) but with similar results. (i am not posting them now so an not to make this post huge, of course i will if someone comes in)
obviously i am missing something, but how do we fix this?
anyone can help me understand? where do i go from here?

Replies(4)

amnon.owed

Re: polygons with holes(toxi)

1 year ago

Short answer:

Some countries are not one single polygon, but multiple polygons.

Long answer:

The difference, as you point out, is that some countries consist of one single group of continuous points (such as your example Germany) while others consist of multiple groups of points (such as your example France). So when you display this last category 'as if they were one single group of continuous point' then the displayed polygon will have one or more wrong connections (between the last point of one group to the first point of another group) and thus it will look crappy. So when a country has multiple areas (groups of points) you should treat them as such (load, store, display). Then you can display all the Germany-areas (which is just one), all the France-areas (which are two), etc.

When I glance over the original data file for the country France, it seems there are indeed two groups of points. Search for ]] to find the end of the first smaller group of points (probably the island). So you will need to refine your coordinate import functionality to correctly process and store the coordinates into separate polygons. Then you can display all the areas (polygons) from a country correctly.

dimiro

Re: polygons with holes(toxi)

1 year ago

hi and the thanks for the reply

you are right, i hadn`t seen the ]] in the arrays that hold the coordinates for countries with islands so the conversion to a csv was not so elegant.

is there any other fix available ? i have no idea how to import a js flie file into processing.
however if was to convert it to a csv/txt, how should its structure look like?

(i tried something but with no luck: the data now are loaded in Map<String,ArrayList<Vec2D>>, so i converted the arraylist of each country to a hashset to remove the duplicates, ideally for countries with one polygon their difference in sizes would return 1, but due to lost of imprecision, points that are very closed are considered equal......i think)

amnon.owed

Re: polygons with holes(toxi)

1 year ago

All right, here's a quick attempt. If you look through the shady coding, there may be some useful bits and pieces in there. At the core is, as discussed above, the idea that you have a country with one name and one color, but multiple polygons.

The map itself also seems a bit crude by the way, but perhaps useful for some purposes.

Code Example

import toxi.geom.*;
import toxi.processing.*;
ToxiclibsSupport gfx;
String url = "http://mbostock.github.com/protovis/ex/countries.js";
//String url = "countries.js"; // or from the data directory
ArrayList <Country> countries = new ArrayList <Country> ();
Vec2D m = new Vec2D();
float moveX = 640, moveY = 360, scaler = 4;
void setup() {
size(1280, 720);
textAlign(LEFT, TOP);
textFont(createFont("Arial", 30));
noStroke();
gfx = new ToxiclibsSupport(this);
String[] lines = loadStrings(url);
for (int i=0; i<lines.length; i++) {
if (lines[i].startsWith("{code:")) {
countries.add(new Country(lines[i]));
}
}
}
void draw() {
background(255);
// zoom controls are still a bit dodgy ;-)
if (mousePressed) { scaler += 0.05; } else if (scaler > 4) { scaler -= 0.1; }
moveX = 0.98*moveX + 0.02*(scaler/10)*(width-mouseX);
moveY = 0.98*moveY + 0.02*(scaler/10)*(height-mouseY);
m.set(mouseX-moveX, mouseY-moveY);
m.scaleSelf(1, -1);
m.scaleSelf(1/scaler);
translate(moveX, moveY);
scale(1, -1);
scale(scaler);
strokeWeight(0.25);
for (Country c : countries) { c.display(); }
resetMatrix();
hint(DISABLE_DEPTH_TEST);
for (Country c : countries) { c.displayName(); }
hint(ENABLE_DEPTH_TEST);
}
class Country {
ArrayList <Polygon2D> areas; // the areas of the county
String name; // the name of the country
color c; // the color of the country
Country(String s) {
areas = parseData(s); // gets the areas (also sneaks in the name)
c = color(random(255), random(255), random(255));
}
ArrayList <Polygon2D> parseData(String s) {
// get seperations (in order to get separate areas)
ArrayList <Integer> seps = new ArrayList <Integer> ();
String[] pieces = splitTokens(s, " {}:\",");
for (int i=0; i<pieces.length; i++) {
if (pieces[i].startsWith("[[")) {
seps.add(i);
}
}
pieces = splitTokens(s, " {}:\",[]");
// get full name
int border = seps.get(0)-1;
name = pieces[3];
if (border > 4) {
for (int i=4; i<border; i++) {
name += " " + pieces[i];
}
}
// get areas and put them in an arrayList of polygons
ArrayList <Polygon2D> areaList = new ArrayList <Polygon2D> ();
int current = 0;
int end;
for (int i=0; i<seps.size(); i++) {
ArrayList <Vec2D> vecList = new ArrayList <Vec2D> ();
int start = seps.get(current);
if (current+1 <seps.size()) {
end = seps.get(current+1);
} else {
end = pieces.length;
}
for (int j=start; j<end; j+=2) {
float x = float(pieces[j]);
float y = float(pieces[j+1]);
vecList.add(new Vec2D(x, y));
}
Polygon2D newArea = new Polygon2D(vecList);
areaList.add(newArea);
current++;
}
return areaList;
}
void display() {
for (Polygon2D p : areas) {
if (p.containsPoint(m)) { fill(255, 0, 0); } else { fill(c); }
gfx.polygon2D(p);
}
}
void displayName() {
for (Polygon2D p : areas) {
if (p.containsPoint(m)) {
fill(255);
rect(mouseX+10, mouseY, textWidth(name)+10, textAscent()+textDescent());
fill(0);
text(name, mouseX+15, mouseY);
}
}
}
}

dimiro

Re: polygons with holes(toxi)

1 year ago

OOO_oooo that was a really elegant parsing
no more crappy France!!!

thanks :)

Top Reply