title: 3D SVG animation in Processing—flickering problems, svg loading questions
body: <p>I'm trying to make a time lapse geographic twitter visualization inspired by <a href="http://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data" rel="nofollow noreferrer">Jer Thorp's "Just Landed"</a>. I am using the latest version of processing.</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/weYfo.png" alt=""></p>
  
  <p>Here is my code which is causing the problem:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>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 <code>test1.translate(0,0,0.1);</code> command, but I get an error telling me <code>illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D</code>.</p>
  
  <p>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.</p>
  
  <p>For example, I've run it with this map: <a href="http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg" rel="nofollow noreferrer">http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg</a></p>
  
  <p>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 </p>
  
  <p>and when I use <a href="http://wikitravel.org/shared/File:World_Blank_Map_%28Mercator_projection%29.svg" rel="nofollow noreferrer">this</a> 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:</p>
  
  <p><img src="https://i.stack.imgur.com/rhLQU.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>Thanks</p>