3D SVG animation--flickering problems, svg loading questions

invizibility

I'm trying to make a time lapse geographic twitter visualization inspired by Jer Thorp's "Just Landed"

http://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data

I'm using an SVG image for my map because I want to be able to zoom into the map at an arbitrary angle, to focus on certain localities, then show the twitter connections on a global scale. I'm running into several problems, the first of which is a flickering of path boundaries of the countries when i rotate my map. Here's a screenshot of my problem:

Here's my code (I've put some code in for the arc implementation, but haven't gotten to that yet because I'm trying to figure this out first. That's why there's a bunch of stuff commented out):

import processing.opengl.*;
import java.awt.event.*;

PShape map;
PShape test1;
PShape test2;

//camera position/movement intialization
PVector position = new PVector(450, 450);
PVector movement = new PVector();
PVector rotation = new PVector();
PVector velocity = new PVector();

float rotationSpeed = 0.035;
float panningsSpeed = 0.035;
float movementSpeed = 0.05;
float scaleSpeed = 0.25;
float fScale = 2;

void setup(){
  map = loadShape("blank_merc.svg"); //swap out for whatever file
  size(900, 900, OPENGL);
  smooth();
  fill(150, 200, 250);
  addMouseWheelListener(new MouseWheelListener(){
    public void mouseWheelMoved(MouseWheelEvent mwe){
      mouseWheel(mwe.getWheelRotation());
    }
  });  
}

void draw(){
  if (mousePressed) {
    if (mouseButton==LEFT) velocity.add( (pmouseY-mouseY) * 0.01, (mouseX-pmouseX) * 0.01, 0);
    if (mouseButton==RIGHT) movement.add( (mouseX-pmouseX) * movementSpeed, (mouseY-pmouseY) * movementSpeed, 0);
  }
  //TODO: implement reset functionality: DONE
  if (keyPressed){
    if (key=='r'){
      position.set(450,450);
      rotation.sub(rotation.get());
      velocity.sub(velocity.get());
      movement.sub(movement.get());
    }
  }
  velocity.mult(0.95);
  rotation.add(velocity);
  movement.mult(0.95);
  position.add(movement);

  background(255);
  //lights();




  translate(position.x, position.y, position.z);
  rotateX(rotation.x*rotationSpeed);
  rotateY(rotation.y*rotationSpeed);
  scale(fScale);

  shape(map,-250,-250,1000,1000);

}

void mouseWheel(int delta){
  fScale -= delta * scaleSpeed;
  fScale = max(0.5, fScale);
}

I was told it might be z-fighting amongst the paths, and I think this might be the problem because the flickering is more problematic when the map is mid rotation, especially at angles that are non orthogonal to the viewing plane. I tried to remedy this by "translating" a PShape child of the file a small amount in the Z direction with the "test1.translate(0,0,0.1);" command, but I get an error telling me "illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D"

I've also had trouble testing my code with other SVG map files and generally getting the SVG to look like what I think it should look like. There are a bunch of cities and other weird markers on my SVG map, and even when i download the completely "blank" svg world map mercator projection from wikimedia commons. There are these city marker/region attributes which show up in the processing render that dont show up in the browser view. I'm trying to figure out how to "clean" my SVG file up in Inkscape, but I'm unsure what specifically to look for.

for example, I've run it with this map, but the dots and lines I have no use for, and I'm having to resort to manually selecting and deleting the paths, which is not a very thorough process

http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg

and when i use this map: http://wikitravel.org/shared/File:World_Blank_Map_(Mercator_projection).svg, the blank version which presumably has none of this data, I see not only some "hidden" points, but also i get this crazy vertical banding (the file is about 2mb...is this too much?)

I'm just wondering if there's a simpler way to get a "clean" svg world map of just the country boundaries loaded in.

Any advice would be seriously appreciated. This has been driving me up the wall :|

EDIT: it looks like way more of the code in the preview is commented out than is actually commented out (the draw method, mousewheel, etc). if you copy and paste the above code into a processing sketch, it will recognize the comments correctly though.

EDIT2: i made a separate .pde without all the dependencies and removed the unecessary comments. this should be a lot easier to read.

PhiLho

I looked at these files with a sketch I recently shown, allowing to give the id of a clicked area.

I didn't have problems to view these files (I need to resize them), so perhaps your banding comes from the 3D view.

I see these markers. Looking at the SVG code, I see they have some style hiding them, but Processing isn't able to parse these style tags, so it just displays them...

Indeed, you might need to remove all these artifacts by hand, or find better maps.

Note: since my sketch gives the ids of the clicked items, you can use it to localize the faulty parts in the map.

Note about your code: why you just don't remove the commented out part, that only get in the way to understand code, anyway?
And you use several libraries and data file, so we cannot run it, anyway. Perhaps try to simplify the code to show only the problem.

invizibility

Hi PhiLho

thanks for your reply. I suppose the cleanliness of the SVG is my least important issue, and worst case scenario I can just clean it up manually. I'll look elsewhere for maps, but I was wondering if theres a way in inkscape or something to identify these style tags in the XML and delete the groups that way?

I've also edited my code above to remove the dependencies and unused code. On my machine it still has the border flickering issue, and with the aforementioned "blank map" (blank_merc.svg on my machine) it shows the vertical banding

thanks for your help!!

invizibility

bump?