Zagged line of a rectangle created by lines

Processing Coding Questions
1

Hi
I am creating a drawing using lines that make up a piece of art.
The problem boils down to the fact that a set of parallel lines that should fill a rectangle does not match the performance or the rect() function. I cannot really understand why this does not work properly!?
Carl.-Eric

Here is the code in Processing:

void setup(){
size(2000,2000);
background(0);
fill(255);
stroke(255);
strokeCap(SQUARE);
noLoop();
}

void draw(){
float L=300;
float B=100.0;
float xcorner=200;
float ycorner=200;
int NN=400;
for (int i=0;i<=NN;i++){
  float x0=xcorner-B*float(i)/float(NN)*cos(PI/2-PI/60);
  float y0=ycorner+B*float(i)/float(NN)*sin(PI/2-PI/60);
  float x1=x0+L*cos(PI/60);
  float y1=y0+L*sin(PI/60);
  line(x0,y0,x1,y1);
} 

ycorner=ycorner+200;
pushMatrix();
translate(xcorner,ycorner);
rotate(PI/60.0);
rect(0,0,L,B);
popMatrix();
 }
2

Although the outcome is the same the computer has to do MUCH, MUCH more work to calculate the end points and draw the 400 lines than simply draw a filled rectangle.

In this code there are just 5 Java statements to be executed and each one will have a predefined machine code function to execute them.

In the line by line code there are

  • 1604 calls to cast an integer to a float
  • 802 calls to cos
  • 802 calls to sin
  • 401 calls to render a line

Its not surprising that it is quicker to render a rectangle. :grin:

2 Likes
3

Hi
The time it takes is not the issue!
It is the outcome onnthe screen that differs.
With line commands the rectangle us not well represented. You get a zig-zag perimeter.
The same pixels are basically set for both alternatives. Why are the results different?

fre 30 maj 2025 kl. 12:47 skrev Peter Lager via Processing Community Forum <notifications@processingfoundation1.discoursemail.com>:

4

Shame you didn’t say this in your original post which talks about performance. I suspect that the majority of readers would read that in the same way as me i.e. about time / speed / efficiency.

I did run your sketch again and had a look at the edges with a magnifying glass. The difference is in the short sides which represent the start and the end of the lines. With a retina display and using pixel density of 2 the difference is hardly noticeable but on a standard display with pixel density 1 it is much more obvious.

When using rect all four borders are smooth due to anti-aliasing. When using lines the short sides are not anti-aliased because the computer does not see them as a border but rather a series of dots (representing the start and end of the lines).

1 Like
5

Hi

Thanks for the explanation.
I guess I have to go up to higher canvas sizes to solve the problem then.

Sorry that I was not clear about the issue!

Carl-Eric

1 Like