PShapes render with blurry edges

theliquu69

Hello,

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");

  background(64);

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

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

Here are the contents of my data folder: data.zip

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.

jeremydouglass

@theliquu69 -- Interesting! Thank you for sharing the project repo.

Because you specifically mention different renderer support for font scaling in textFont() specifically, you might be interested in these demo videos and discussion that @San posted about "High performance high quality text rendering"

• https://forum.processing.org/two/discussion/20293/high-performance-high-quality-text-rendering-i-ve-just-finished-working-on