Today's new node: pixelate!

Pixelate turns a vector path or shape into an array of square pixels. It takes the following parameters:

• Path. The path or closed shape to be pixelated.
• Margin. The units of negative space to be included around the path when forming the pixel grid.
• Pixel size. The width and height of each square pixel. Default is 10; lower carefully to avoid overwhelming Nodebox.
• Edge only. Check this box if you only want the edges of a closed shape. Does not affect open paths.
• Include grid. Check this box if you want to include the empty grid units surrounding the path.
• Pixel color. The color of each pixel.
• Grid color. The color of the grid lines between the pixels.

The pixelated shape or path will be returned as a group with the pixels in left-to-right top-to-bottom order. Ungroup if you wish to play with each pixel independently.

The pixels are snapped to a one-unit grid, which means that the x and y coordinates of the corners of each pixel will be integer values. This makes alignment a little cleaner.

Pixelate can easily handle arrays totaling 10,000 pixels; 100,000 pixels will take time to render. Big pixels means a blockier look, fewer pixels needed, and faster processing time. Small pixels means a less pixelated look, more pixels needed, and slower processing time. Depending on the size of your path, making the pixel size too small can cause Nodebox to stall or freeze. The default pixel size of 10 should be safe unless your path is very large. If pixelate takes more than a few seconds to render a path at a certain pixel size, be cautious when lowering that size, since the growth in total pixels needed is exponential.

The demo shows a simple word pixelated into 10-unit pixels and colored. The first three nodes do almost all the work; the remaining nodes just fine tune the layout to make the grids line up nicely. Turn the grids off, pixelate the interiors of each letter, and change the pixel size to see what happens.

Enjoy!