Pixelated images

Processing Coding Questions
1

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
prueba797×579 12.8 KB

2

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:

image
image314×351 2.41 KB

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

size(500, 500, P2D);

P2D:

image
image252×289 2.16 KB

You can also try smooth with P2D or P3D.

FX2D:

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

image
image315×352 3.02 KB

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:

Have fun!

:)

3

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.

4

Did you try FX2D for comparison?

5

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:

:)

6

I added it to my previous post for comparison.

Related topic:

:)