Pixelated numbers in a watch

[humano]

My last questions are about sharpness. This sketch has an animation, specifically that of a clock. How could I make the numbers look perfectly sharp, without pixels around the edges?

void setup() {
  size(600, 600);
  textSize(200);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0); // Clear the background
  String dateTimeString = nf(hour(), 2) + ":" + nf(minute(), 2);
  text(dateTimeString, width/2, height/2); // Display the formatted string
}

[glv]

Hello,

It looked good with P2D renderer!

Do you have scaling set in Windows?
I have scaling set to 125% and often see this issue with the default renderer which is JAVA2D if it is not added to size().

Try another renderer (JAVA2D is default, FX2D or P2D):

Pixelated images

Hi there! I have been using processing again after sometime and I don’t understand why images are so pixelated. I am using processing 4.4.4 in Java mode in my pc and all the sketches are really pixelated, it doesn’t matter if a have 2 code lines or 200. How can I get clear images, please? size (500,500); background(255); triangle(250,100, 100,400, 400,400); save("image.png"); [prueba]

This shows differences:

Launcher for Multi-Renderer PApplets

Hello folks! My exploration of a launcher for PApplets with different renderers. This was used primarily for testing Windows scaling on my W10 system and how it affects the sketch window. Code: /** * Launcher for Multi-Renderer PApplets * * Author: glv * Date: 2025-07-07 * * Description: * Launches four separate Processing sketches (PApplets) using different renderers: * - JAVA2D * - P2D * - P3D * - FX2D * * Each renderer runs in its own thread, with readiness flags for commu…

Search for this in the forum:

pixelDensity(1)

It appears to solve a lot of issues.

Reference:

Render Techniques

size() / Reference

:)

[humano]

you are right! and do you know why text is not centered vertically?

import processing.javafx.*;
void setup() {
  size(600, 600,FX2D);
  textSize(200);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0); // Clear the background
  String dateTimeString = nf(hour(), 2) + ":" + nf(minute(), 2);
  text(dateTimeString, width/2, height/2); // Display the formatted string

[glv]

@humano

do you know why text is not centered vertically?

I do not know why it is WAY off with FX2D.

With JAVA2D and P2D it is a bit off and this code can show that:

void setup() 
  {
  size(700, 400, P2D);
  
  textSize(200);
  
  println(textAscent());
  println(textDescent());
  }

boolean tog;

void draw() {
  background(0); // Clear the background
  String dateTimeString = "IjTgJyF";
  float ta = textAscent();
  
  //BASELINE
  if(tog)
    {
    textAlign(CENTER, BASELINE);
    line(0, height/2 - ta, width, height/2 -ta);
    line(0, height/2 - ta/2, width, height/2 -ta/2);
    text(dateTimeString, width/2, height/2); 
    }
  // CENTERED
  else
    {
    textAlign(CENTER, CENTER);
    line(0, height/2 - ta/2, width, height/2-ta/2);  
    text(dateTimeString, width/2, height/2); 
    }
 
  stroke(255);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);  
  }
  
// Press key to toggle
void keyPressed()
  {
  tog = !tog;
  }

Look up the references and what it says and compare to what was was drawn.
What do you notice?

Experiment with:
textAlign() / Reference / Processing.org

:)

[glv]

@glv

I do not know why it is WAY off with FX2D.

To illustrate this:

import processing.javafx.*; 

void setup() 
  {
  size(700, 400, FX2D);
  textSize(200);
  
  println(textAscent());
  println(textDescent());
  
  noLoop();
  }

boolean tog;

void draw() {
  background(0); // Clear the background
  String str = "IjTgJyF";
  
  float ta = textAscent();
  stroke(0, 255, 0);
  line(0, height/2 - ta/2, width, height/2 - ta/2);  
  
  stroke(255);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);  
  
  textAlign(CENTER, CENTER);
  text(str, width/2, height/2); 
  }

Output:

There may be a related issue in one of these repositories:

GitHub - processing/processing4: Source code for the Processing Core and Development Environment (PDE)

GitHub - processing/processing4-javafx: JavaFX library for Processing 4

If you do not find one consider submitting one.

:)