Diagonal line loop

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

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);
}
}

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:

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

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);
}
}

Actually I’ve never tried diagonal line(). O_0

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.

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.

Hello @Humano,

This is with Processing 4.4.4 on W10.

Sample code to try:

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:

With noSmooth() :

With smooth(3) :

1 Like

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.

4 Likes

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.

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:

//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:

W10 Processing 4.4.4 P2D renderer:

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

The above were with 100% scaling.

Below I used:

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

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

Sketches can be static mode or active mode.

There is documentation for this here:
Environment / Processing.org < 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 :

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

And an important point often overlooked:

And you are using Open Processing to complicate the matter with its own issues:

Have fun!

:)