Jump to content

Single pixel width circle solution.


Recommended Posts

If you make a circle in paintDOTnet one pixel thick you get a blurred line, at is tried to spread the top, bottom and sides of the circle over 2 pixels not one...

 

The word is that this is hard to fix, in a previous post the suggestion was to make a 2 pixel with circle twice the desired size and shrink the image, but the result will still be fuzzy if you don't get the pixels aligned correctly both vertically and horizontally, this was an awkward horrible solution...

 

I had found that make the circle 2 pixels thick and using a white circle to cover over half the thickness resulted in a nice result, easier that the other solution, faster, but still much harder than idea...

 

But, as long as you want the circle to be black...  I have found the easiest answer!!!

 

Just click on the paint brush tool, and make the paint brush size the size you want circle, it draws a perfect 1 pixel width circle!   You just need to take a screen shot of the circle (hit print screen), paste it into a new image, and retrieve your circle!

 

Actually, another way that I just realized is that you can just use the brush to draw a solid circle, then without moving your pointer, reduce the brush size twice and press to paint with the right click or background colour...  If you are doing this in a multiply layer this won't even wipe out stuff on other layers and the white won't be seen...

Link to comment
Share on other sites

I get a different experience than you are describing. Your one pixel circle will actually appear as a square with artifacts around it due to anti-aliasing.


To test this yourself; create a canvas with a white background that is 3 x 3 pixels.
Next set your brush width to 1 pixel with black as your primary brush color
Next zoom into to your 3 x 3 canvas by 6400%
Next put your brush at the center of the canvas and left click 

You will get a black square pixel at the center with faint gray artifacts around it.
If you undo your last step and disable anti-aliasing and left click again you will get a single square pixel at its center.

This will happen with the pencil Tool set to the size of one pixel also.

Your fuzziness or blur is due to anti-aliasing which is used to diminish the effect of pixellazation.

Edited by HyReZ


 

Link to comment
Share on other sites

For some reason I had trouble logging in...  Created another account...

 

Toe_head2001, I am not talking about the diameter of the circle, but the width of the line...  I never said diameter or radius...

 

HyRez also seemed to misunderstand in the same fashion...

 

I am talking about a circle outline.

 

BTW, I have learned that my solution is decent, but not perfect due to some abnormality in the circle outline of the brush.

The top is a little fuzzy and not the same as the bottom of the circle.

 

Also you have to use an even number for the brush size...

 

I tried copying, inverting and flipping the bottom in an xor layer, and when superimposed on the top it didn't all cancel out as it should have.

 

I suspect the other soultion doesn't have this issue...

 

But there is still a catch, unless you zoom in (which kills the first solution) you can only have odd numbered circle diameters, as there must be a center pixel with this solution, it does not work for circles without a single center pixel.

 

Edited by circularthinking2
Link to comment
Share on other sites

Ok, so A has a 1 pixel width circle made the "normal" way, it is untidy...

 

B is a circle made with a 2 pixel width circle with a half overlap of a white circle to halve it's thickness.

 

C is a circle made by screen capturing the outline of the paint brush when appropriately sized...

 

And D is a paint brush making a solid black circle, reducing the size by 2 digits and making a white circle, to leave a black outline...

 

The bottom half circles are copies of the above circles with the bottom half copied, rotated, inverted and put in an xor layer, this cancels much of the image, but I believe if it were Identical it would be blank, showing only white...

 

I used this to show the differences between the 2 halves, which are worse on C...  But never perfect surprisingly.

 

imageing.png

Edited by circularthinking2
Link to comment
Share on other sites

It is you who has the misunderstanding. Paint.NET is a raster graphics application. The images that you enclosed; clearly shows the effects of anti-aliasing. A raster graphics app such as Paint.NET cannot produce smooth curves, circles, or angles. To create the illusion of a smooth angles, curves, and circles; it gives you the option of using the anti-aliasing effect. If you disable anti-aliasing; the fuzziness or blur will not be present, but you will notice the that your images will be constructed of of square pixels like a digital mosaic (pixellization). To get smooth circles, angles, and curves without pixellization, you will have to use vector image software and not raster image software!

Anti-aliasing

https://en.wikipedia.org/wiki/Spatial_anti-aliasing
 

Raster vs Vector

https://youtu.be/2eM7uH4qNrw

 

Edited by HyReZ


 

Link to comment
Share on other sites

Welshblue's idea of duplicating the circle then merging it down sounds very similar to what I discovered worked for creating a 'perfect' circular aperture in an overlay. This was to be used in a game's console dashboard skin and behind the overlay would be displayed the various apps and games 256x256 square icons as clean circles. 

 

What I noticed is that any icon lighter than the edge of the surrounding circular aperture highlighted and exaggerated the jagged edges of the circle. I never tried an anti-aliasing tool at that time but what I did do probably resulted in a similar effect.

 

I created a solid 1 unit circle the same size as the overlay aperture but in tone lighter than the edge of that. Then I slightly blurred it (I can't remember which blur type I used), duplicated it, rotating the new layer 45 degrees before merging it down. TBH I'm not sure how many layers I eventually used doing the same thing. But when it looked right ie. the circle edge still looked sharp I tried it out.

 

The result was that the edge of the overlay aperture had the jagged parts filled with pixels of graduated transparency and looked far sharper and cleaner than it had before.

 

It still took a lot of time altering the number layers used and blur distance to get the best result. Even when that was done if the icon behind the overlay is predominantly black at the edges you can just detect a faint lighter tone there if you're looking for it.

 

Still it is proof that Welshblue's idea about duplicating circles and merging the layers does work and maybe would in this case too.

     

Edited by IHaveNoName

IHaveNoName.png

Link to comment
Share on other sites

1 hour ago, IHaveNoName said:

I never tried an anti-aliasing tool at that time but what I did do probably resulted in a similar effect.

     

Anti-Aliasing is a enable by the default settings of Paint.NET, so if you did not turn it off, it is on and you are using it. This is the reason for your blurred images. I take it that you did not view the links that I provided and that explains why you are going through a convoluted procedure to get the results of just disabling anti-aliasing. No matter what convoluted practice you attempt, you will never get smooth ; edges on angles, curves, and circles from raster image software. I you use anti-aliasing the edges will be blurred, and if disable; they will be jagged! That is the nature of Raster/Bitmap images! You can only achieve smooth paths is from vectors, most vector software limit the color palette to 256 colors in a file.

Edited by HyReZ
inserting additional information


 

Link to comment
Share on other sites

The AA tool I was actually thinking of the AA Assistant as use for Welshblue's second circle example. I only discovered that tool myself quite recently so didn't use it at that time. It gives you more control over the AA than the basic AA that, as you say, is used by default.

 

What we're talking about here is creating a core 1 pixel circle with PDN as sharp but smooth looking as possible. The technique I described and also suggested by Welshblue makes it look better than it does if you just accept the default result, AA on or off. That it looks better is what is important. The AA Assistant tool appears to do the same thing but of course in a much more convenient way.      

IHaveNoName.png

Link to comment
Share on other sites

It is impossible to a have a true 1 pixel brush width and anti-aliasing at the same time!
Once you add anti-aliasing the pixel width has to change since you cannot add fractions of pixels to fill in gaps created in raster pixellization.
I am done here!

Edited by HyReZ
  • Like 1


 

Link to comment
Share on other sites

23 hours ago, HyReZ said:

No matter what convoluted practice you attempt, you will never get smooth ; edges on angles, curves, and circles from raster image software. I you use anti-aliasing the edges will be blurred, and if disable; they will be jagged! That is the nature of Raster/Bitmap images! You can only achieve smooth paths is from vectors, most vector software limit the color palette to 256 colors in a file.

Vectors are a series of math expressions, but they can be rendered to the screen as raster images, which is what you've seen if you ever saw a vector image. That is, if you make a 1-pixel circle in a vector program and you see it, you already have a raster representation of it. So of course a raster program can create fine circles.

Edited by Joshua Lamusga
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...