3D SVG animation in Processing—flickering problems, svg loading questions

Question

I'm trying to make a time lapse geographic twitter visualization inspired by Jer Thorp's "Just Landed". I am using the latest version of processing.

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 is my code which is causing the problem:

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: http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg

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

and when I use this map, which is supposed to be the "blank version" of the above without all the markers, I see not only a bunch of markers (presumably hidden with some style attribute in the SVG XML?) but also this weird vertical banding, and my camera controls are super slow. The applet appears to be behaving as if the file is way too large, but its like 2MB. Here's a screenshot of what this looks like:

I'm really just looking for a way to get a "clean" SVG world map into Processing so I can spin it around and zoom in on it, and if I can get that to work I can start the Arc-Drawing part. I would sincerely appreciate any assistance anyone could give me.

Thanks

Answer 1

If I understand your question correctly, the flickering is only on the edges, presumably where they overlap. That would suggest z-fighting to me. I usually find that a simple test outside your main sketch is best, just as a quick way to see what's happening and how you might fix it.

If you make a simple SVG with two overlapping shapes, sharing just one edge, does the same thing happen?

If so, I think the easiest solution (though not that easy) would be either:

• Select all the countries in Illustrator
• Use Object > Transform > Scale... and shrink by a tiny amount

Then share your fixed map for everyone else!