# Diagonal line loop

**URL:** <https://discourse.processing.org/t/diagonal-line-loop/46459>\
**Category:** Beginners\
**Created:** [May 26, 2025, 4:36pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459 "2025-05-26T16:36:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 26, 2025, 4:36pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/1 "2025-05-26T16:36:37Z")

</div>

Could someone tell me why I these lines are not straight?

```auto
void setup() {
	size(1000,1000);
	background(255,255,255);
}
void draw() {
	for (int i=0; i<1000; i=i+20) {
  line(i,0,i+40,1000);
}
}

```

 ![IMG_1061](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/9/e9d8afd36c563015a6aabb9e3bacb2360e07c5dc.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 26, 2025, 4:49pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/2 "2025-05-26T16:49:14Z")

</div>

> [@humano](#):
>
> `line(i,0,i+40,1000);`

Shouldn’t both x1 & x2 coords. be the same for vertical lines?  
`line(i, 0, i, height);`

Also take a look at these style functions:

> **[strokeCap() / Reference](https://processing.org/reference/strokecap_)**
>
> Sets the style for rendering line endings. These ends are either squared, extended, or rounded, each of which specified with the corresponding parameters: SQUARE, PROJECT, and ROUND. The default cap i…

> **[strokeJoin() / Reference](https://processing.org/reference/strokejoin_)**
>
> Sets the style of the joints which connect line segments. These joints are either mitered, beveled, or rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND. The default join…

> **[strokeWeight() / Reference](https://processing.org/reference/strokeweight_)**
>
> Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. Using point() with strokeWeight(1) or smaller may draw nothing to …

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [May 26, 2025, 5:22pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/3 "2025-05-26T17:22:59Z")

</div>

But, if you don´t want vertical lines, if you want them diagonal, is this the way?Why do I see them fragmented?

```auto
void setup() {
	size(1000,1000);
	background(255,255,255);
}
void draw() {
	for (int i=0; i<1000; i=i+20) {
  line(i,0,i+40,1000);
}
}

```

 ![IMG_1061](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/9/e9d8afd36c563015a6aabb9e3bacb2360e07c5dc.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 26, 2025, 5:29pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/4 "2025-05-26T17:29:43Z")

</div>

Actually I’ve never tried diagonal **line()**. O\_0

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [May 26, 2025, 6:16pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/5 "2025-05-26T18:16:28Z")

</div>

Thanks for sharing your sketch! It looks like this is running in Processing.js, which is an older system and no longer actively maintained. If you’d like to use Java-based Processing, I recommend downloading the Processing IDE from [processing.org](https://processing.org).

If you prefer to keep working in OpenProcessing, it’s best to switch to p5.js mode. The syntax is quite similar but using Javascript. Let us know if you’d like help converting your sketch.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 26, 2025, 7:29pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/6 "2025-05-26T19:29:24Z")

</div>

Hello @Humano,

This is with Processing 4.4.4 on W10.

Sample code to try:

```auto
import processing.javafx.*;

void setup() 
  {
  // Use only one of these:
  size(300, 300, P2D);  
  //size(300, 300, JAVA2D);
  //size(300, 300); //This is same as JAVA2D and is the default!
  //size(300, 300, FX2D);
  
  // Use only one of these:
  //noSmooth(); // Try with and without this!
  //smooth(2); // This is the default. See reference!
  smooth(3); // This gives a nice smooth line on my end!
  }

void draw() 
  {
  background(255); // Always have background in draw!
  strokeWeight(5);
  for (int i=0; i<1000; i=i+20) 
    {
    
    line(i,0,
       i+100,1000);
    }
  }

```

Make sure and comment out what is not used!  
Use _smooth()_ or _noSmooth()_ but not both!

Try the different renderers! P2D, JAVA2D and FX2D

References:

> **[smooth() / Reference](https://processing.org/reference/smooth_.html)**
>
> Draws all geometry with smooth (anti-aliased) edges. This behavior is the default, so smooth() only needs to be used when a program needs to set the smoothing in a different way. The level para…

With _noSmooth()_ :

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/9/a96cc020cb126d08fada4add111396051f3c612b.png)

With _smooth(3)_ :

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/b/3b1b67eb996b6b596c041b783a3b0df64c21c948.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [May 27, 2025, 12:42pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/7 "2025-05-27T12:42:55Z")

</div>

The lines will look nicer if you move the `background(255,255,255);` line from `setup()` into `draw()`.

The reason it looks jaggy is that the lines are drawn over and over again, and the subtle antialias gray colors that should be there to make it look nice quickly become black, destroying the antialiasing effect.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 27, 2025, 8:12pm UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/9 "2025-05-27T20:12:12Z")

</div>

Hello @humano ,

Good topic! And not always a simple answer. I hope some of the points raised helped. I have often dealt with these myself and was able to sort them out in the end or work around them.

> [@LangdonS](#):
>
> ```auto
> void settings() {
> //renderer performance is irrelevant for inanimate sketches
> size(300, 300);
> }
> 
> ```

Processing will automatically relocate the _size()_ function to _settings()_ behind the scenes when the sketch is executed.

The choice of renderer can affect the sketch’s appearance and how it responds to Windows scaling settings in my experience.

Simple _static mode_ sketch used to generate images below:

```auto
//size(300, 300); // Same as size(300, 300, JAVA2D);
size(300, 300, P2D);

background(255);
strokeWeight(5);

// smooth(); // See reference for usage
*strong text*
for (int i = 0; i < width; i = i+20) 
  {
  line(i, 0, i+100, height);
  } 

```

W10 Processing 4.4.4 JAVA2D (default) renderer:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/e/3e8413a3f3f63cafd850ac957b6d63a0364c3a0c.png)

W10 Processing 4.4.4 P2D renderer:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/6/6603961998c35df8ef627332cb30a83778fdb175.png)

I used windows magnifier to zoom in to see the differences.

_The above were with 100% scaling._

Below I used:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/f/af89a8b840fa12d52241a0a1b6497e33c07f7cc5.png)

If I use 125% scaling on my Windows PC it scales up (Windows scaling) the output window for JAVA2D:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/3/030dfaab66804216a112b3d08dc5ff69540a6fe5.png)

There is no change to the P2D output at 125% scaling:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/5/d5bf6e1fae89668b2fe053a685124ac1ba1a2b65.png)

Sketches can be _static mode_ or _active mode_.

There is documentation for this here:  
_[Environment / Processing.org](https://processing.org/environment/#programming-styles)_ \< See _Programming Styles_

If you want to run a sketch once you have some choices:

- _ **Static mode** _
- _ **Active mode** _ with code in _setup()_ and only use _setup()_ without _draw()_
- _ **Active mode** _ and code in _draw()_ and use _noLoop()_ to run it only once. You may want to animate later.

And here is an interesting output (triangle of wider lines) with Windows scaling of 125% for straight lines with JAVA2D :

```auto
void setup()
  {
  size(300, 300, JAVA2D);
  strokeWeight(5);
  }
  
  void draw()
  {
  background(255);  
  for (int i = 0; i < width; i = i+20) 
    {
    line(i, 0, i, height);
    } 
  }

```

Output (easier to see if you scroll it up and down quickly):

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/0/00940f2afc935bf50ba48623ed74f56a12fa8b98.png)

And an important point often overlooked:

> [@hamoid](#):
>
> The lines will look nicer if you move the `background(255,255,255);` line from `setup()` into `draw()`.

And you are using _Open Processing_ to complicate the matter with its own issues:

> [@Diagonal line loop](https://discourse.processing.org/t/diagonal-line-loop/46459/5):
>
> Thanks for sharing your sketch! It looks like this is running in Processing.js, which is an older system and no longer actively maintained. If you’d like to use Java-based Processing, I recommend downloading the Processing IDE from [processing.org](https://processing.org). If you prefer to keep working in OpenProcessing, it’s best to switch to p5.js mode. The syntax is quite similar but using Javascript. Let us know if you’d like help converting your sketch.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Max\_Normal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/max_normal/32/20757_2.png) [@Max\_Normal](https://discourse.processing.org/u/Max_Normal)\
**Post date:** [May 31, 2025, 6:07am UTC](https://discourse.processing.org/t/diagonal-line-loop/46459/10 "2025-05-31T06:07:15Z")

</div>

Display is a raster device. Have a Google (or whatever) for Bresenham’s algorithm.