Using stroke() or fill() with 1-pixel-thick rectangles

I have made this mistake twice now, and someone suggested I should make a post about it so that others may benefit from my experience.

When you make a rectangle that has a length or a width of 1 pixel, it has no inside, so the fill() command won't work to color it. The only way to color a rectangle like this is by using the stroke() command, which changes the color of the outline, the boundary of the rectangle. Since a one-pixel rectangle is nothing but outline this makes perfect sense,

The first time I had this problem, I was trying to do Project: Mountain Range from the Advanced JS course on natural simulations.

The initial project code for this assignment draws a mountain range made up of 400 vertical pixel-wide rectangles of essentially random heights.

https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-noise/pp/project-mountain-range

I kept trying to change the color of the mountains, and I was dumbfounded that it wasn't working. Eventually, and this took me HOURS to figure out, I realized that the mountains had not set an initial fill() color, and I couldn't figure out why they were black in the first place. I finally posted a help request and was reminded that the mountains were made of stroke color, which defaults to black.

I ran into the problem AGAIN yesterday where I had this bizarre intermittent problem with my Fish Tank project. I had drawn a graduated blue background for my Fish Tank, again, by making a series of single-pixel rectangles, this time, horizontally, and all of width 400.

https://www.khanacademy.org/computer-programming/spin-off-of-project-fish-tank/6232181093793792

This was really weird, because it was actually working. I had a blue graduated background that looked great. But any time I restarted the program, it would come up black. Then, if I changed any one character in the program, even if it was in a comment, the blue would mysteriously come back again.

I posted another help request, and was being assisted by a prolific mentor on the CS community, a very experienced and advanced programmer who has been a great help to me many times. We were troubleshooting problems with the programming environment, trying to make the program remember my blue background and restore it each time. Every time, my program appeared to be fixed, but would fail again if I reloaded the page on my web browser.

We were both stumped. Finally Pamela Fox came and took a look, and said, "Um, i think you might need to use stroke instead of fill here...."

Boy, did I feel stupid, making the same mistake twice. Here we were trying to fix a glitch to let my program background blue, when the real glitch was that it had ever worked at all in the first place!

But I'm actually a pretty smart guy, and the man who was helping me is really brilliant. I figured, if this problem stumped both of us, it will probably be a problem for a lot of other people, too, so I'm here, shouting from the rooftops, hoping that I can save a few of you from hours of futile troubleshooting on what is really a very basic issue. And maybe offer you a bit of a giggle at the same time.

Joseph Mullan

20. juni 2019 02:21

Changing the stroke() in your program to fill() works for me and has in my programs

This one for example

https://www.khanacademy.org/computer-programming/distant-canyons/6086445217251328

Markarino /TEE/DGPE-PI1 #Evaluate

20. juni 2019 05:35

Thanks, Anthony + Joseph. Wow, you are obviously very creative.

I'm afraid your program is a bit overwhelming--I'm not able to find the particular places where the fill command is applied to pixel-wide rectangles. Can you offer me line numbers to look at?

When you looked at my program, did you try reloading the web page when you had changed stroke to fill on line 55? ( it may not have been line 55 when you looked at it last time--I removed some unnecessary code just now.)

My experience has been (along with Larry and Pamela when they were helping me,) was that the program worked great with fill at first, but then sometimes when you hit restart, and always when you hit page refresh, the background would turn black.

It turns out that it wasn't really a mystery why it didn't work--the mystery was why it did work in the first place. When the rectangle is one pixel wide, there is no inside to it, so fill doesn't apply. I have to use stroke to color the outline.

I notice that you had noStroke commands in your project. That would explain why you don't have a problem.

20. juni 2019 05:51
Redigeret

It's on line 73

Oh, well the reason was because you hadn't declared noStroke() the strokes on the top and bottom of your rect were covering the fill in the center of your rect
If you still want stroke after you declare noStroke just use stroke again and it will again show the stroke

20. juni 2019 06:00

Anthony + Joseph reminded me of something I was thinking of earlier, which was, I could also have used a noStroke() command, and then I'd still be able to use my fill color.

But then I had this epiphany, when I asked myself, "Why am I even doing this with rectangles when I can just draw lines!?"

Good morning, Mr. Obvious!

So this is the code I'm using now instead of all the rectangles:

for(var w = 0; w < 400; w += 1) {
stroke(w * (255-150) / 255, w * (255 - 100) / 255, 255);
line(0, 400 - w, 400, 400 - w);
}

And it seems to be working great; at least for the time being : - )

Using stroke() or fill() with 1-pixel-thick rectangles

Fandt du ikke det, du ledte efter?

4 kommentarer

Fandt du ikke det, du ledte efter?