strokeWeight(1) produces 2 pixel thick border

Programming Questions

railon

strokeWeight(1) produces 2 pixel thick border

in Programming Questions • 3 months ago

With the code below, I get a grid with borders 2 pixels thick and I'm not sure why since I set the strokeWeight to 1 pixel.

void setup()
{
    smooth();
    size(window.innerHeight*(16/9),window.innerHeight);
    background(255,0,0);
}

void draw()
{
    size(window.innerHeight*(16/9),window.innerHeight);
    background(255,0,0);
    stroke(0,0,0);
    strokeWeight(1);
    rect(0,0,1,height);
    for(i = 0;i < 65;i++) {
        rect((i*width)/64,0,1,height);
    }
    for(i = 0;i < 37;i++) {
        rect(0,(i*height)/36,width,1);
    }

}

Replies(4)

tfguy44

Re: strokeWeight(1) produces 2 pixel thick border

3 months ago

You don't want a rect(). You want a line().

A rectangle of width 1 has a boarder for the left edge and the right edge (and top edge and bottom edge too). Since your rectangles have a width/height of 1, there's only enough space to draw two edges... and so it draws the edges right next to each other, resulting in what looks like a line of thickness 2.

Also, why are you calling size() inside draw()? That's kind of weird. Don't do that without a reason.

Your call to background() inside setup() is also pointless.
You can also move the stroke() and strokeWeight() calls into setup() too, as they don't change during draw().

railon

Re: strokeWeight(1) produces 2 pixel thick border

3 months ago

Wow, that was so obvious! Thanks, I was doing something with this before and I completely forgot I was still using rect().

I'm calling size inside draw so the canvas size scales to the current window which can change at any time, since I'm using processing.js on a webpage. The call to background inside draw was a fix for an anti aliasing issue I was having I got from someone, to be honest I don't really understand it myself.

PhiLho

Re: strokeWeight(1) produces 2 pixel thick border

3 months ago

I think tfguy44 wanted to mean that the call to background inside setup() (not draw()) is pointless, because it is also repeatedly called in draw() anyway.
The need for the call in draw() is explained (I hope) in the article: Why are text and graphics so ugly and blocky?

railon

Re: strokeWeight(1) produces 2 pixel thick border

3 months ago

Ah I read that part of his post wrong. Thank you for the article as it explains it perfectly, I suppose I was putting things like smooth(), background() in setup, and etc. just to be safe but now I can clean it up a bit.

Top Reply