Dots

[AdamStanislav]

I have been playing with converting black & white images into dots. It is a seemingly complex process but I have managed to automate the hardest step.

I start by creating a simple B&W image in Affinity Designer. For example,

I then export it to PNG at a small resolution, such as 40x40 pixels. I actually need an ASCII .pbm image, but Designer does not export to those, so I get a PNG instead. Like this,

(the forum seems scaling it up unfortunately, in reality this is much smaller).

The .pbm image format allows only one of two values for every pixel, 0 if it is a background pixel (so white in our example) and 1 if it is an image pixel (so black in this example). And since it is an easy-to-parse text format, I wrote a simple C program that  creates an SVG file with a circle (dot) for every 1, like this, 

or for every 0 instead, like this,

And because the result is plain SVG, I can edit several of them together, distort them, change the colors, etc. Like this,

I will probably post the C source code of my program converting .pbm to SVG. It, of course, would be nice if Affinity Designer could do it on its own, but it is still fun doing it this way.

[Alfred]

32 minutes ago, AdamStanislav said:

The .pbm image format allows only one of two values for every pixel, 0 if it is a background pixel (so white in our example) and 1 if it is an image pixel (so black in this example). And since it is an easy-to-parse text format, I wrote a simple C program that  creates an SVG file with a circle (dot) for every 1, like this, 

The top and bottom of the B are flat, so why don’t they translate to unbroken rows of dots? 

[telemax]

I miss Scatter in Affinity. With it, we could create stunning Halftone-style work, using not only circles, but other shapes, hex, etc.

The AP allows you to work interactively with Halftone, which is awesome. But it is a bitmap effect that is not suitable for laser cutting, etc.

 

[AdamStanislav]

53 minutes ago, Alfred said:

why don’t they translate to unbroken rows of dots?

I can only assume that is Affinity’s way to emulate a line of a subpixel width. Typically, there would be a straight line of some shade of gray, but when exporting to just black and white pixels, using a “dotted line” will produce the illusion of a gray line. That is, when the image remains small.

But when it is made larger, suddenly we can see the trick for what it is.

This really is how images and fonts used to be printed by dot-matrix printers some forty years ago. After all they could either print a black dot or nothing. And the dots were very small, so we either did not notice or were just happy we had a way of printing images (that was why Adobe eventually developed hinting for their Type 1 fonts). Kind of like we tolerated the sound of early record players and AM radio because they were all we could get.

[AdamStanislav]

15 minutes ago, AdamStanislav said:

I can only assume that is Affinity’s way to emulate a line of a subpixel width.

On second thought, it is probably how Irfan View converts the PNG to PBM. I examined the PNG and it has more shades than black and white. But PBM is strictly a two-value format. I wonder if there is a way to tell AD to only use black and white when exporting to PNG, as it would probably do a better job converting from the vector than Irfan View converting from PNG.

[AdamStanislav]

2 hours ago, Alfred said:

The top and bottom of the B are flat

OK, I have found a solution, though it involves extra steps. First, I had to give the image a white background in Affinity Designer. Then I had to export it as SVG. Then I had to import the SVG to Inkscape (something I hate to do). Then I could export it to PNG at 40x40 pixels as a 2-color image. Then the rest as before (PNG to PBM, PBM to SVG).

This is the result,

and this,

[v_kyr]

3 hours ago, AdamStanislav said:

I have been playing with converting black & white images into dots. It is a seemingly complex process but I have managed to automate the hardest step.

Well I think there are better and easier ways to get such things done at all, thus I would instead suggest to take a look at tools like https://plotdevice.io/ etc. instead of unnecessarily fiddling around with AD here. Tools like PlotDevice and NodeBox etc. do also allow to export the generated graphics into certain vector or bitmap formats.

[GarryP]

This reminded me of StippleGen which I used a little bit quite a while ago: https://wiki.evilmadscientist.com/StippleGen