Why does rect() look better than line()?

Programming Questions

hamoid

Why does rect() look better than line()?

in Programming Questions • 1 year ago

Lately I use rect() instead of line() because it looks much better.

line() start and end positions seem to be rounded to integers.

Anyone knows why is this happening? Any workaround?

Here is a sample program: http://studio.sketchpad.cc/iHspQXtQae

This is what I see when I run it in Java:

Replies(11)

maleo

Re: Why does rect() look better than line()?

1 year ago

you are using a rect() without a border, and that inner part might just be rendered differently...

a rect drawn with stroke(255) pretty much looks the same as the lines:

void setup() {
size(400, 400);
smooth();
rectMode(CENTER);
background(0);
stroke(255);
}
void draw() {
translate(frameCount, 100);
rotate(frameCount / 100.0);
rect(0, 0, 0, 150);
resetMatrix();
translate(frameCount, 300);
rotate(frameCount / 100.0);
line(0, -75, 0, 75);
if(frameCount > width) {
noLoop();
}
}

hamoid

Re: Why does rect() look better than line()?

1 year ago

I see. My intention is not to make rect() ugly by adding a stroke, but to make line() as smooth as rect() :)

It sounds like line() is the right tool to draw lines, and not using one pixel wide rectangles, but it just doesn't look good.

At the same time, rect() is slower than line().

Why aren't lines more precise? Can it be fixed?

maleo

Re: Why does rect() look better than line()?

1 year ago

in opengl your one px wide rects look the same as the lines...

import processing.opengl.*;
void setup() {
size(400, 400, OPENGL);
smooth();
rectMode(CENTER);
background(0);
stroke(255);
}
void draw() {
pushMatrix();
noStroke();
translate(frameCount, 100);
rotate(frameCount / 100.0);
rect(0, 0, 1, 150);
popMatrix();
stroke(255);
//resetMatrix();
translate(frameCount, 300);
rotate(frameCount / 100.0);
line(0, -75, 0, 75);
if(frameCount > width) {
noLoop();
}
}

maleo

Re: Why does rect() look better than line()?

1 year ago

all i'm saying there are reasons why the inner part of a rect looks differently than a line. for instance, really how thick is this rect with it's corners one 1px apart but without rendering it's borders? as i stated above, as soon as you use borders on the rect it starts to look like the line.

so, i don't agree that a line should look the same as a 1px wide rect with noStroke(). a line should look the same as a 1px wide rect *with* stroke(), and it does.

so this inner part of the rect is a different matter, and maybe that's exactly why rect() is slower.

I agree that the antialiasing achieved with the rect looks really nice. Maybe there is a way to replicate it with a lines, using strokeWeight and opacity?

here are some tests:

void setup() {
size(400, 500);
smooth();
rectMode(CENTER);
background(0);
stroke(255);
fill(255);
}
void draw() {
// rect, no stroke, 1px apart
pushMatrix();
noStroke();
translate(frameCount, 50);
rotate(frameCount / 100.0);
rect(0, 0, 1, 80);
popMatrix();
// line
pushMatrix();
stroke(255);
strokeWeight(1);
translate(frameCount, 150);
rotate(frameCount / 100.0);
line(0, -40, 0, 40);
popMatrix();
// rect, with stroke, 1px apart
pushMatrix();
stroke(255);
strokeWeight(1);
translate(frameCount, 250);
rotate(frameCount / 100.0);
rect(0, 0, 1, 80);
popMatrix();
// rect, with stroke, 0px apart
pushMatrix();
stroke(255);
strokeWeight(1);
translate(frameCount, 350);
rotate(frameCount / 100.0);
rect(0, 0, 0, 80);
popMatrix();
// line, using strokeWeight, and opacity
pushMatrix();
stroke(255, 200);
strokeWeight(1.5);
translate(frameCount, 450);
rotate(frameCount / 100.0);
line(0, -40, 0, 40);
popMatrix();
if(frameCount > width) {
noLoop();
}
}

hamoid

Re: Why does rect() look better than line()?

1 year ago

Do you see how all line positions in your tests (except in the first case) are being rounded to integers?

This example:

smooth();
line(20, 20, 80, 30);
line(20.3, 30.3, 80, 40);
line(20.6, 40.6, 80, 50);

Draws the following:

You can see how the decimals are being ignored. The three lines look identical.

When drawing rectangles without noStroke() this rounding (or flooring, to be more precise) is not happening, and that's why it looks great.

Maybe it's happening on purpose, to make it faster. But it would be great to be able to choose if we want this rounding or not.

hamoid

Re: Why does rect() look better than line()?

1 year ago

In this animated example one can see how the red line is jumping from integer to integer, while the blue line has sub-pixel precision.

void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255);
float x = cos(frameCount / 1000.0) * 100;
float y = sin(frameCount / 1000.0) * 100;
translate(200, 200);
// draw a normal red line
stroke(200, 0, 0);
line(0, 0, x, y);
// draw a smooth blue line
fill(0, 0, 200);
sline(0, 0, y, x);
}
void sline(float x0, float y0, float x1, float y1) {
noStroke();
pushMatrix();
translate(x0, y0);
rotate(atan2(y1-y0, x1-x0));
rect(0, 0, dist(x0, y0, x1, y1), 1);
popMatrix();
}

I haven't tested it in other programs, but I guess one could replace line() by sline() if this kind of antialiasing is needed.

maleo

Re: Why does rect() look better than line()?

1 year ago

yes, looks like line endpoints are truncated to integers and thus not antialiased...

i agree it would be nice to have fractional endpoints, but this depends on some sort of anti-aliasing / smoothing, so do you think smooth() should take care of that?

with the opengl renderer, the lines don't look the same, so fractional endpoints seem to have an effect in this case. the antialiasing looks horrible though!

import processing.opengl.*;
size(100,100, OPENGL);
smooth();
background(255);
line(20, 20, 80, 30);
line(20.3, 30.3, 80, 40);
line(20.6, 40.6, 80, 50);
line(20.9, 50.9, 80, 60);

hamoid

Re: Why does rect() look better than line()?

1 year ago

For some reason OPENGL is not working on my Ubuntu. I see no lines.

When it works there is no antialias anyway. My integrated Intel card is not so great I guess.

It would be good if smooth() implied fractional endpoints.

Maybe a smooth(ENDPOINTS) or something similar, to avoid breaking existing programs.

maleo

Re: Why does rect() look better than line()?

1 year ago

I haven't tested it in other programs, but I guess one could replace line() by sline() if this kind of antialiasing is needed.

nice work, seems like the way to go for now! (expect it to be much slower though)

just noticed some small problems:

the blue line is shorter than the red one (maybe extend by 0.5)
at some point in time (about 3/4 of a full rotation of the blue line) the common point of the two lines doesn't quite match anymore.

hamoid

Re: Why does rect() look better than line()?

1 year ago

Ok, this sline() function can be used instead of the line() function when sub-pixel line positioning is a requirement:

void sline(float x0, float y0, float x1, float y1) {
noStroke();
pushMatrix();
translate(x0+0.5, y0+0.5);
rotate(atan2(y1-y0, x1-x0));
rect(-0.5, -0.5, dist(x0, y0, x1, y1)+1, 1);
popMatrix();
}

According to this test program the lengths and positions seem to be right:

void setup() {
size(400, 400);
smooth();
}
void draw() {
background(255);
translate(200, 200);
// draw normal lines
stroke(200, 0, 0);
line(5, 0, 100, 0);
line(0, -5, 0, -100);
line(-5, 0, -100, 0);
line(0, 5, 0, 100);
// draw slines
fill(0, 0, 200);
sline(5, 2, 100, 2);
sline(2, -5, 2, -100);
sline(-5, 2, -100, 2);
sline(2, 5, 2, 100);
}

Basroks

Re: Why does rect() look better than line()?

4 months ago

I've noticed this phenomenon too. And it's not just lines that are affected, but all drawing operations that use stroke (I think). It's very noticeable when something is moving slowly across the screen. Objects drawn with fill move smoothly, but lines and the stroke of ellipses jump and jerk from pixel to pixel because the decimals are ignored.

This thread is the only mention of this issue I've found. I think it's something worth addressing, and I would really like to see it resolved.

Top Reply