I'm trying to do a temporary geographic twitter visualization inspired by Jer Thorp "Just Landed" . I am using the latest version of processing.
I use the SVG image for my map because I want to be able to scale the map at an arbitrary angle, focus on specific places, and then show twitter connections on a global scale. I encounter several problems, the first of which is the flickering borders of the countries when I turn my map. Here is a screenshot of my problem:
Here is my code 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 that this could be a z-fight among the paths, and I think it could be a problem because flickering is more problematic when the map is mid-rotation, especially at angles that are not orthogonal to the view plane. I tried to fix this by doing a small translation of the PShape file's child in the Z direction using the test1.translate(0,0,0.1); but I get the error illegal argument exception: cannot use translate(x,y,z) on a PMatrix2D .
I also had problems testing my code with other SVG card files and, as a rule, to get SVG, I think it should look like. There are tons of cities and other strange markers on my SVG map, and even when I load a completely “empty” merchant projection on the svg world map from wikimedia commons. There are city / region marker attributes that appear in a processing handler that does not appear in the browser view. I am trying to figure out how to "clean up" an SVG file in Inkscape, but I'm not sure what to look for specifically.
For example, I ran it with this map: http://commons.wikimedia.org/wiki/File:Mercator_Projection.svg
but dots and lines that I don’t need, and I have to resort to manually selecting and deleting paths, which is not a very thorough process.
and when I use this card , which should be the “empty” version above, without all the markers, I see not only a bunch of markers (supposedly hidden with some style attribute in SVG XML?), but also this strange vertical bandage, and my camera control very slow. The applet seems to behave as if the file is too large, but it looks like 2 MB. Here is a screenshot of how it looks:
I'm really looking for a way to get a “clean” SVG world map in “Processing” so that I can rotate it and zoom in on it, and if I can do this, I can start drawing the Arc-Drawing part. I sincerely appreciate any help anyone could give me.
thanks