PShapes render with blurry edges

edited March 2018 in Share Your Work


I tried to implement vector graphics instead of raster graphics in my program. I have used PNGs for a long time now but I have the access to the icons' "source code" (SVGs or Adobe Illustrator projects), so I decided to make an upgrade to support zooming without blurring out the existing raster icons.

Here is my piece of code:

PImage png;
PShape svg;

void setup() {
  size(200, 200);

  png = loadImage("raster.png");
  svg = loadShape("vector.svg");


  // 1x
  image(png, 0, 0);  // OK
  shape(svg, 0, 24); // OK, blurry edges

  // 4x
  image(png, 4, 0);  // Blurred out
  shape(svg, 4, 24); // OK, blurry edges

Here are the contents of my data folder:

I want to use the JAVA2D renderer, because it supports both font scaling and clip().

P2D doesn't support proper font scaling in textFont() (the text is blurry and pixelized) and clip() behaves strangely, FX2D doesn't support clip().

I have tested both P2D and FX2D and they render the icon properly.

I also don't want to use noSmooth(), because in my sketch I am using ellipses, rounded rectangles, icons with curves etc. and I don't want them to look rough.

I was also thinking of making my own simple SVG renderer which wouldn't feature all of the SVG format's features, but be suitable for this simple icon rendering.

If you're interested in the whole project, check this GitHub project.



Sign In or Register to comment.