Lag with antialiasing on an SVG

Processing Coding Questions
1

Hello, I am creating a data visualizer for data that spans across the entire world. Because of this, I have imported an SVG and I am rendering it onto the screen. You can drag the mouse to pan across the map, and use the mouse wheel to zoom in and out. I have one issue though, when the entire map is on the screen at once, I get horrible lag (10-20 fps). I have tried using noSmooth(), which sort of fixed the problem (40 fps), but looks really bad. I wonder if there is some way to only attempt to render parts of the SVG that are within the bounds of the window? Maybe looping though children of the SVG PShape?

Code is below:

PShape map, country;
HashMap<String, Country> countries;
DataHandler data_handler;
int map_x, map_y;
float scale;



void setup() {
  size(1000, 650);
  frameRate(60);
  scale = 3;
  map = loadShape("world.svg");
  data_handler = new DataHandler();
  data_handler.load_data("data.txt");
  smooth();
}

void draw() {
  background(255);
  fill(0);
  text("FPS: " + frameRate, 30, 30);
  if(mousePressed) {
    map_x += (mouseX - pmouseX) / scale;
    map_y += (mouseY - pmouseY) / scale;
  }
  pushMatrix();
  scale(scale, scale);
  translate(map_x, map_y);
  shape(map, 0, 0);
  popMatrix();
}

void mouseWheel(MouseEvent event) {
  scale += event.getCount() * 0.1;
}
1 Like
2

How big is the svg file?

1 Like
3

The general approach with world coordinates is to optimize using tiling, like with the unfolding maps library. Or to implement pyramidal resolution, when you load different (lower resolution / sparser) coordinate sets at higher altitudes / wider views.

4

Thanks, I’ll try to implement this!