Sign in to follow this  
57an

1-pixel width circle drawing enhancement needed

Recommended Posts

Hello everyone.

 

I use paint.net for drawing png icons for my web project. Some of icons need 1-pixel width circles.

It looks like paint.net algorithm is too smoothy for that.

 

Is it possible to achieve right attachement picture result using paint.net?

circles.png

Share this post


Link to post
Share on other sites

Looks like more of a pixel offset thing than smoothness thing.

 

Try drawing a 2px circle but at twice the size, then use Image->Resize to reduce to 50%. If it looks the same, undo the Resize and shift things left, right, up, and/or down by 1 pixel, then do the 50% reduction again. A reasonable way to preview this is by setting the zoom to 50%.

Share this post


Link to post
Share on other sites

Thanks both of you.

 

But Red's ochre plugin result is far away of what I need. 

 

Rick, your suggestion is almost exactly the way I made set of 'correct' circles on the right side of screenshot above with only difference I use big svg picture and then export it to png with downscale.

Result of 2px circle after reducing looks great, see picture below. Current result is also acheevable with this method if I enlarge big circle on 1px at every side.

Also I added 2colors versions that I get from smoothed with upcontrast it to 100 in paint.net. It's easy to see that for wrong smoothed variant it gives umbrella-looking circle.

 

In my opinion this should be default result of 1px wide circle drawing. Also it may solve unsmoothed circles drawing problems descripted earlier on this forum:

Dear Rick, is it possible to do add 0.5px subpixel correction when drawing such circles? It looks like it is the one of the weirdest part in whole paint.net for years...

cmp subpixel.png

Edited by 57an
  • Upvote 1

Share this post


Link to post
Share on other sites

More impressive difference can be viewed on small radius circles. 

For example, picture belove shows this effect on 5px radius circle.

 

5px.png

Share this post


Link to post
Share on other sites

1px aliased circles have been bugged for awhile. I was able to get antialiased circles to be symmetrical at a large performance cost, but aliased ones are still elusive. I haven't taken the time to go and implement a rendering override for that case. It's easy to draw a symmetric ellipse when you're plotting the pixels manually -- not nearly as easy if you want to get Direct2D (or any geometry/triangle-based rasterizer) to do it for you. So I need to plot the pixels directly.

 

It's proven astonishingly tricky to get this rendering to be always "right." Nudging things by 0.5px here or there always seems to fix one thing but make another things look weird or buggy. However, I do have a bug filed that tracks this. I've added a link to this thread into it. Someday ... someday this will all work so much better. And please take solace that things are MUCH better than they were in version 3.x.

 

You might have some success in the short term if you create a custom shape and add in your 0.5px offset manually. This is a fairly technical/advanced thing to do, but it would at least let you experiment, and determine if it is possible to wrestle the underlying renderer to do the right thing.

  • Upvote 1

Share this post


Link to post
Share on other sites

.5px mistake will take place not only for 1px wide shapes but for 3, 5 and any odd width. And there is no mistake on even widths.

.5 px drawing/scaling step may be only possible salvation. I have meet such solution in opengl based software.

But I think it should be not manual shift but burned into program code. Other way we may get even more ugliness.

 

This is common problem for pixel-based vector editor like SCADA-systems and so on - how to treat coordinate and width itself

What is the X and Y - coordinates? Is it border between pixels or is it center of pixel. Paint.net answer - it is border, but i have meet center-based software.

As result paint net smoothed 1,3,5,... pixel width lines, other software smoothed 2,4,6,... pixel lines...

 

Btw. Meet some other width-treating example in paint.net...

For example, 14x14 rectangle will have same external size no matter what width is their lines. Any other figures increase their external size with line width increasing.

So we have different treat for width for rectangle and any other figures in paint.net.

 

width treat.png

Share this post


Link to post
Share on other sites

This problem affects me, and I just found the easiest way to solve it with just one extra step!

 

Make a circle with a 2 Pixel width line, then change the colour of the tool to the background colour (or you could even select overwrite and transparent) and make a 2 pixel width circle that is just smaller or just larger, concentrically with the first circle such that it wipes out half the width of the the first circle!

 

This only takes a moment and you are left with what looks to be identical to what you probably would have got with the method Rick suggests, only MUCH easier!  I know because I try that at times and it really takes some bother to get things just right.

 

I just checked and the results are very similar, but not identical to the method Rick suggests, the line has the appearance of being a 0.95 pixel width if we are to assume the other method gives a 1 pixel width circle, but honestly it's not a readily visible difference unless you zoom in.

Edited by circlularthinking

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this