Pixelated images

[humano]

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

[glv]

Hello @humano,

Please run this and report back:

//Try these one at a time:

//size (250, 250); // This is default and the same as size (500, 500, JAVA2D);
size(250, 250, P2D);

background(255);
strokeWeight(3);
triangle(250/2, 100/2, 
         100/2, 400/2, 
         400/2, 400/2);
save("image.png");

import java.awt.*;

// Gets windows scaling and prints it:
float ws = (float) java.awt.GraphicsEnvironment
.getLocalGraphicsEnvironment().
getDefaultScreenDevice().
getDefaultConfiguration().
getDefaultTransform().
getScaleX();

println("Windows scaling:", ws);

// Displays the displayDensity of your monitor:
int pd = displayDensity();
println("Pixel Density:", pd);

I have Windows scaling of 1.25x (I set this!) on my PC and my sketch window is scaled up by 1.25x with JAVA2D which is the default:

size (500, 500);

Scaling up by 1.25x also scales up the jaggies that you are seeing.

JAVA2D:

It is NOT scaled up with P2D and looks much better:

size(500, 500, P2D);

P2D:

You can also try smooth with P2D or P3D.

FX2D:

import processing.javafx.*;
size(250, 250, FX2D);

I have a W10 PC and use Processing 4.4.4.
My monitors are pixelDensity of 1.

Sometimes setting to pixelDensity of 1 resolves issues.

Try this in your code of you report a pixelDensity of 2:

pixelDensity(1);

And please report back.

References:

• displayDensity() / Reference / Processing.org
• pixelDensity() / Reference / Processing.org
• smooth() / Reference / Processing.org

Have fun!

:)

[humano]

P2D/P3D with and without smooth doesn’t solve pixelation and neither does pixelDensity. So, as I feared, processing now produces less sharp images - isn’t there an earlier version of the code that produces less pixelated images? I could have sworn that with earlier versions of processing you got sharp images automatically.

[svan]

Did you try FX2D for comparison?

[glv]

@humano

I could have sworn that with earlier versions of processing you got sharp images automatically.

Pixels on most modern day LCD monitors are square.
Angled lines in digital graphics often show pixelation because of the square nature of screen pixels.
Smoothing can help reduce the jagged appearance by blending colors at the edges but it doesn’t fully eliminate pixelation.

Look up anti-aliasing to help better understand this.

I have scaling on my Windows 10 set to 1.25x and it will make my sketches look works in JAVA2D because they are scaled up by Windows.
The P2D sketches are not scaled up.

If you zoom into an image as you have done you will see the pixels and the smoothing!

Keep in mind that Windows (and other OSes) also do smoothing of the image and the final image on the screen is the end result of these.

References:

• Pixelation - Wikipedia
• Antialiasing – Display Daily

:)

[glv]

@svan

Did you try FX2D for comparison?

I added it to my previous post for comparison.

Related topic:

Canvas Scaling with different renderers

Hello folks, I noticed different scaling for sketch windows on W10 with the following for my Display settings and using different renderers: [image] Test code: import processing.javafx.*; void setup() { size(400, 200); //size(400, 200, FX2D); //size(400, 200, P2D); //size(400, 200, P3D); background(0); textAlign(CENTER, CENTER); textSize(18); text("0123456789" + "\n" + "abcdefghijklmnopqrstuvwxyz" + "\n" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ", width/2, height/…

:)

[humano]

The processing.javafx.* library is not included or available in standard Processing (the PDE environment you download from processing.org).

[glv]

@humano

The processing.javafx.* library is not included or available in standard Processing

The only constant in the universe is change. That applies to code and software as well and Processing is evolving and has gone through many changes over the years since 2001.

There is a section on renderers here that comments on FX2D and Processing 4 releases:

Environment

It is now available in the Contribution Manager:

• Install the JavaFX library.

• Import the JavaFX library in your code:

• This will allow you to use the FX2D renderer.

import processing.javafx.*;
size(250, 250, FX2D);

:)