Drawing a line on the right border of the screen

Processing
1

I am trying to draw a grid of 60px squares with a 1 pixel border in a page width of 540px, and I want the outline of each to be visible, but the right edge of the grid lines never show up.

I have reduced the problem down to the fact that if I draw a line at the right edge of the canvas, it simply never appears. (unless I change the strokeWidth to 2 or more.)

How can you draw a line within the bounds and have it never show up?

This is really annoying and I would like to know if there is a solution.

Here is a basic example of the problem.

void setup() {
  size(100, 100);
}
void draw() {
  stroke(0);
  strokeWeight(1);
  line(100, 0, 100, 100);
}
1 Like
2

If your canvas size is 100*100 the border is not at x = 100 but x = 99, it starts at 0.

Check this example:

void setup() {
  size(100, 100);
}
void draw() {
  stroke(0);
  strokeWeight(1);
  line(0, 0, 0, 100);
  line(99, 0, 99, 100);
}

It draws a line in the first “column” and the last one

2 Likes
3

Thanks, I can’t believe I overlooked that.

I have been trying for so long to get the look of graph paper with 60px squares in a screen width which is a multiple of 60 and still be able to see the grid line on the far right squares, and it seems like no matter what I do the line on the right and bottom is very light or not visible.

I guess basically I will have to accept that one of the columns will have to be narrower by 1px, or that the gridlines will have to be at least 2px.

Thanks again.

4

Not necessarily. You can make all columns the same size. Column dividers always equal columns+1. 2 columns are framed by 3 lines, 10 columns by 11, 100 by 101, etc.

So just add one to your canvas size.

If you want 10 columns of 9 pixels wide, as in your example: 10*9 + 10 = 101

size(101, 101);

It sounds like you want 9 columns of 59, framed by 10 lines. 9*59 + 10 = 541, so:

size(541, 541);

2 Likes
5

Yes, that is what I came to realize. Thanks for taking the time to explain it