tips to improve anti-aliasing/rendering

Programming Questions

jeemang

tips to improve anti-aliasing/rendering

in Programming Questions • 3 years ago

Hi all;

I'm fairly new to processing, and I'm working on a sketch that is meant to draw the neighbourhoods of my city and colour them based on various data (e.g. people per dwelling, population density, crime rate, etc.).

The neighbourhoods are drawn for every frame, ie:

void draw() {
// DRAW OBJECTS
// neighbourhoods
for(int i = 0; i < hoods.length; i++) { // neighbourhoods are stored in "hoods" array
hoods[i].draw(dMode, maxMins); // each neighbourhood's "draw" method called here
}
}

The data for the outline of the neighbourhoods comes from a KML file provided by the city. Each neighbourhood's outline is defined by a series of points specified in terms of latitude and longitude, which my code converts to pixel values for rendering.

My problem is that the on-screen rendering doesn't look as great as I'd like it to:

As illustrated above, the edges of the neighbourhoods are jagged and uneven, and in some places (particularly in the outermost neighbourhoods in the northwest corner of the city) the border of the fill seems to exceed the stroke.

I thought that this may have had something to do with my data/algorithm, as there were some precision issues involved owing to the fact that coordinates were specified in latitude and longitude (in these terms, the span of the entire city is about 0.4 units, meaning the smallest neighbourhood features were being traced out in terms about 5-6 decimal points deep) and the inability of Processing to use doubles for plotting functions. To check this, I thought I'd plot the data using another method and see how that worked out. Below is a screenshot of a pdf generated using exactly the same algorithm:

This version looks much better, which suggests the problem probably isn't precision.Unfortunately, however, I have no idea what the heck the problem might be.

I've already enabled anti-aliasing, and I tried the other rendering engines available with Processing (and found that the default renderer works the best). So, I'm kind of stumped. Any suggestions to improve the quality of the first image -- to make it look more like the second image, essentially -- would be very much appreciated.

(And: bonus points for any suggestions on jazzing up this display a little bit; even the pdf version, though rendered acceptably, seems a bit flat).

Many thanks!

Josh

Replies(8)

Jo Wood

Re: tips to improve anti-aliasing/rendering

3 years ago

You may well have a precision problem with your coordinates, so I would suggest checking how you are scaling lat/long to screen coordinates. You should to calculate a local origin before doing the conversion to avoid subtraction of similar floating point numbers. Something like:

      float screenX = width *(easting-localXOrigin)/localWidth;

      float screenY = height*(1-((northing-localYOrigin)/localHeight));

I would also consider converting your coordinates from lat/long to UTM or some other coordinate system that gives you true distances on the ground. The giCentre Utilities contain classes for doing the lat/long to UTM conversion (see the spatial package API for details.

When I create a similar sketch using either lat/long or UTM coordinates and do the scaling as above, I don't get the 'bleeding' problem you identify. The example below shows selected zip code areas for part of Maryland:

and zoomed in:

A couple of tips for improving the cartographic appearance:

Use less saturated colours from a palette that reflects the nature of the data you are showing. The ColorBrewer site has some excellent guidance on appropriate palettes. Our giCentre Utilties library allows you to create ColorBrewer palettes in your sketches very easily. For example:

private ArrayList
               
                <Neighbourhood> hoods;

                private ColourTable cTable;        
                // For colorBrewer palettes.

                private ZoomPan zoomer;            
                // For zooming into the map



                void 
                setup()
{
    
                size(400,400);
    
                smooth();
    zoomer = 
                new ZoomPan(
                this);
        
    readData();
    cTable = ColourTable.getPresetColourTable(ColourTable.YL_OR_BR,0,100);        
}
        

                void 
                draw()
{   
    
                background(255);
    zoomer.transform();
    
                stroke(100);
    
                strokeWeight(0.1f);
        
    
                for (Neighbourhood hood : hoods)
    {
        
                fill(cTable.findColour(hood.getAttribute()),150);
        hood.
                draw();
    }        
}

Use a thin stroke weight for polygon boundaries (I used 0.2 in the example above) and either a grey or semi-transparent dark colour.

jeemang

Re: tips to improve anti-aliasing/rendering

3 years ago

Thanks a lot Jo -- that is very helpful. I checked out the giCentre Utilities page and it looks great! My only wish is that I would have known about it before I began my project.

Although I don't explicitly use a local origin, my code does something similar to what you describe above. However, I definitely do not use any sort of legitimate distance conversion algorithm like UTM -- basically, I just calculated the ratio between the distances represented by a unit of latitude and a unit of longitude where my city is located, and multiply/divide one or the other by that factor as appropriate. I will definitely look into using the giCentre tools to implement a more "legit" system.

Also: thanks for the colour recommendations!

Josh

jeemang

Re: tips to improve anti-aliasing/rendering

3 years ago

I haven't attempted to fix my rendering issue yet, but I did use the giCentre library to add zooming and panning to my sketch -- thanks a lot, Jo! It took like 15 minutes!

This also enabled me to get a closer look at the "trouble" areas in my sketch. What I found was that at a certain zoom level, all of the jaggedness problems in the sketch disappear. From fiddling around, I found that this zoom level was dependant on the value of strokeweight I had selected: specifically, the jaggedness disappears at the first zoom level for which the product of zoom level and strokeweight is greater than 1. After I figured this out I tried using a strokeweight of 1.1, and found that, unsurprisingly, my sketch no longer had any jaggedness.

So, although I now have a pretty solid clue, I'm feeling like the guy in the double rainbow video: WHAT DOES IT MEAN???

I have a workaround of sorts if I want to use it, but I'd love to figure out how to FIX the problem, as I'd prefer to use a thinner strokeweight. If anyone has any advice, I would very much appreciate it.

Josh

jeemang

Re: tips to improve anti-aliasing/rendering

3 years ago

I'm still working on this, and I think I may have found the source of the problem -- my data.

I set up my sketch to actually plot a point at each coordinate indicated by the data in addition to drawing a polygon. I found that the jagged areas of my sketch all have an abundance of points, ie:

I inserted some logic into my plotting algorithm to check the distance between a point and the previously-plotted point and skip the point if this distance was too small, and although it helped somewhat, it caused other problems. Points that were "legitimately" close together were removed, and areas adjacent to one another that have congruent points defining their boundaries had different points removed, causing their borders to slightly overlap in places and producing jaggedness (with a different origin, but equal ugliness).

The one thing I haven't yet figured out is why zooming to a certain level (as described above) removes my problems...

If anyone has any suggestions as to how I could deal with this problem, I would very much appreciate it!

Thanks,

Josh

Jo Wood

Re: tips to improve anti-aliasing/rendering

3 years ago

You should probably put your boundary files through a line simplification process. This will intelligently remove the unnecessary points that do not contribute to the visible geometry of the lines. Common algorithms to do this are mostly based on the Douglas-Peucker algorithm. There's a good online application that can do this for you MapShaper. That requires your data to be in ShapeFile format, but you can convert from KML to ShapeFiles easily with, for example this Zonum converter.

jeemang

Re: tips to improve anti-aliasing/rendering

3 years ago

Hi Jo;

I implemented a version of the Douglas-Peucker algorithm in my code and it fixed the problem.

Thanks a lot for all of your help. I'm looking forward to spending some time getting familiar with the giCentre Utilities!

Josh

tabbed

Re: Re: tips to improve anti-aliasing/rendering

2 years ago

Hey Josh, can you post your Douglas-Peucker processing function?

jeemang

Re: tips to improve anti-aliasing/rendering

2 years ago

Sure thing. Here it is:

http://jeemang.ca/code/douglasPeucker.pde

Josh

Top Reply