Generating font characters from image and upscaling resolution afterwards

Processing Coding Questions
1

Hello dear community,

I am currently in the situation of creating an ASCII image from a source image. The resulting ASCII image is written to a PGraphics buffer that I save at the end.

Of course I use the source images resolution to generate the output, so my resulting image has the same resolution, say for example 1024x1024.

Now when I save the output, the resolution is limited to 1024x1024 and the characters look blurred.
What I like to do is have the possibility to scale the resolution of my output, so that the characters are clear.

This happens when I use a pdf export, and then convert that pdf to png with Photoshop. The resolution is much higher and the characters are crystal clear.

I am clearly confused with the technical thinking around the matter. But I think fonts are rendered as vectors and upscaling should be possible.

Maybe you can point me in the right direction. :slight_smile:

1 Like
2

Try using noSmooth() in the setup() make sure you use the PGraphics name in front of it, eg. img.noSmooth(); if your PGraphics variable is img.
Not sure if thats what you’re after but upscaling images auto smooths them

3

Hello @Empyreans,

Example:

PGraphics pg;

void setup() 
  {
  size(1024, 1024);
  pg = createGraphics(1024, 1024);
  
  pg.beginDraw();
  pg.background(100);
  pg.textAlign(CENTER, CENTER);
  pg.textSize(48);

  for(int i=0; i<500; i++)
    {
    // Random viewable ASCII and spacing to a grid:  
    pg.text(char(byte(random(33, 127))), int(random(1024/48))*48+24, int(random(1024/48))*48+24);
    }
  pg.endDraw();
  
  image(pg, 0, 0); 
  pg.save("test.png");
  }

I do not see blurring at the resolution in the sketch.

:)

4

Thanks for taking your time, I have adapted your code to demonstrate what I mean further.

The key point is what happens when you lower the font size.

When you zoom in on the exported png, the characters become blurry because of the low resolution.

When you export as pdf however, the resolution is increased to the extent that even when you zoom in, the characters remain clear.

import processing.pdf.*;

PGraphics pg;
PGraphics pgPdf;

void setup() 
  {
  size(1024, 1024);
  
  // your example
  pg = createGraphics(1024, 1024);
  pg.beginDraw();
  pg.background(100);
  pg.textAlign(CENTER, CENTER);
  pg.textSize(8); // lowered text size
  for(int i=0; i<500; i++)
    {
    // Random viewable ASCII and spacing to a grid:  
    pg.text(char(byte(random(33, 127))), int(random(1024/48))*48+24, int(random(1024/48))*48+24);
    }
  pg.endDraw();
  pg.save("test.png");
  
  // comparison to pdf export
  pgPdf = createGraphics(1024, 1024, PDF, "testPdf.pdf");
  pgPdf.beginDraw();
  pgPdf.background(100);
  pgPdf.textAlign(CENTER, CENTER);
  pgPdf.textSize(8);
  for(int i=0; i<500; i++)
    {
    // Random viewable ASCII and spacing to a grid:  
    pgPdf.text(char(byte(random(33, 127))), int(random(1024/48))*48+24, int(random(1024/48))*48+24);
    }
  pgPdf.endDraw();
  pgPdf.dispose();
  exit();
  
  }

Now when I export via Photoshop, the resolution is 4267x4267, which explains how the characters are so clear even when zooming in.

I want to know if there is a way to directly export a png at a higher resolution with P2D, so that I have the same details but don’t need to export a png from a pdf.

5

Some references:

https://en.wikipedia.org/wiki/Vector_graphics < PDF
https://en.wikipedia.org/wiki/Raster_graphics < PNG

Create an image with a higher resolution:

pg = createGraphics(4267x4267); // Saving to a raster graphic such as PNG

Modify code as required for new size.

Other references:
https://processing.org/tutorials/typography

https://processing.org/reference/textMode_.html

:)