# Zagged line of a rectangle created by lines

**URL:** <https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486>\
**Category:** Coding Questions\
**Created:** [May 30, 2025, 7:44am UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486 "2025-05-30T07:44:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [May 30, 2025, 7:44am UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486/1 "2025-05-30T07:44:50Z")

</div>

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:

```auto
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();
 }

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 30, 2025, 10:37am UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486/2 "2025-05-30T10:37:18Z")

</div>

> [@Kylle](#):
>
> I cannot really understand why this does not work properly!?

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.

> [@Kylle](#):
>
> ```auto
> pushMatrix();
> translate(xcorner,ycorner);
> rotate(PI/60.0);
> rect(0,0,L,B);
> popMatrix();
> 
> ```

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. 😁

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [May 30, 2025, 11:51am UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486/3 "2025-05-30T11:51:47Z")

</div>

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](mailto:notifications@processingfoundation1.discoursemail.com)\>:

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 30, 2025, 1:21pm UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486/4 "2025-05-30T13:21:30Z")

</div>

> [@Kylle](#):
>
> The time it takes is not the issue!  
> It is the outcome onnthe screen that differs.

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).

---

<div class="post-metadata">

**Author:** ![Kylle](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@Kylle](https://discourse.processing.org/u/Kylle)\
**Post date:** [May 30, 2025, 2:16pm UTC](https://discourse.processing.org/t/zagged-line-of-a-rectangle-created-by-lines/46486/5 "2025-05-30T14:16:08Z")

</div>

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