PixBrick - Build your own Selfie!

Step 1

Scale input image

Target Resolution:

Width: 48

Height: 48

Enabling 3D mode allows for designing pictures with multiple layers, where some pixels protrude further out than others

This may not be a good fit for all images, but can work quite well in many cases

Supported image formats are dependent on your browser's compatibility

Due to the nature of the Lego Art sets, images with transparency aren't fully supported

Important

Be careful when using high resolutions - this can cause performance issues on less powerful machines, especially during pdf generation and for 3D previews

Step 1

Get depth map

If you have a depth map corresponding to your image you can select it here. If you don't, you can generate an approximation in the 'generate' section.

This will compute an approximation of the depth map if you do not have one

Important

Computing the depth map can be computationally expensive. Be prepared to wait a bit, and be careful, especially if you have a less powerful device.

How does this work?

The depth map is computed using a DNN (deep neural network). For the reasons described in the 'about' section, everything is run entirely within the browser, using a modified version of ONNX.js. The model used is MiDaS - more specifically, the small ONNX version which can be found here.

Citation for Model Used Ranftl, RenГ©, Katrin Lasinger, David Hafner, Konrad Schindler, and Vladlen Koltun. "Towards robust monocular depth estimation: Mixing datasets for zero-shot cross-dataset transfer." (2020). IEEE Transactions on Pattern Analysis and Machine Intelligence

Step 2

Adjust colors

Step 2

Make depth discrete

Number of depth levels: 3

Determines how many discrete levels of depth you want the pixels of the image to have, where each level is one Lego plate deep

Depth threshold

Adjusts the threshold for separating the discrete depth levels

If the discretized depth map is blank, make sure you've selected or computed a depth map in step 1, and adjust the threshold so that they are between the sections of the image you want to separate

Step 3

Align to closest pixel from available colors

I recommend tweaking the color alignment setting before using the paintbrush

Paintbrush color:

● Click a pixel to override its color with the selected paintbrush color

● Click a painted pixel to restore it

● Right click a pixel to use its color as the paintbrush color

● The currently hovered on pixel is also highlighted in the step 4 color canvas

● Make sure to add your paintbrush color to 'Available Colors' below for it to show up in step 4

Color Distance Function

● This setting determines which distance function is used to align pixels to their closest Lego colors

● Euclidean RGB usually leads to the best performance, but the other functions can lead to better results in many cases

● This section specifies how many studs of each color you have available to create the image

● Step 4 of the algorithm cannot run unless you select enough studs to fill the picture ('Missing Studs' must be 0)

● If you're working with an existing set, then clear the available studs and use the mix in option to add in the pieces from your set.

Required Studs:
Available Studs:
Missing Studs:

Color names are Bricklink colors

Color	Number Available

Mixed in studs are added to studs already selected

● Some sets use 1x1 tiles, while others use 1x1 studs. Make sure you double check before continuing if you want consistent pixels in your result.

● Depending on the input set of studs, many images don't easily translate to the available color palette. Try to use an image with similar colors to those of the set of studs you have available.

● In some cases, adjusting the colors in step 2 can help greatly, but this doesn't work for many source images. For more robust color adjustments, I recommend making the changes in another tool before remixing the image.

Step 3

Adjust Depth Map

● Click a pixel to increase its height

● Click a pixel to decrease its height

● The currently hovered on pixel is also highlighted in the step 4 color canvas

Do you like your Pixel-Selfie?

Parts Used in Final Image

Color	Number Used

Parts Missing From Step 3

Adding these parts will allow the image from step 4 to match the image from step 3

Color	Number Missing

You can customize your pixel selfie any way you want

Adjust brightness: 0

Adjust contrast: 0

3D Preview

If you can't see the 3d effect when hovering your mouse over the image, check the input from depth step 1

Preview effect intensity

● This is a (very) rough preview of what the 3D effect might look like

● Hover your mouse over the image to vary the perspective

● Make sure your depth map is not blank

● This is unlikely to work well on less powerful devices, since this is generated dynamically

● Keep in mind that the effect varies from browser to browser, can be subtle, and may not be 100% representative of what the physical art piece would look like

● This is the set of plates that may be used to generate depth instructions and part lists

● These pieces are used as padding so that the correct pixels protrude outwards

● Note that larger plates may be difficult to attach/detach from the base

Available Plates:

Generate high quality pdf

Longer instructions may be split into multiple files

Important

Depending on your hardware and the resolution you've chosen, the pdf can take quite a few seconds to generate. Be prepared to wait if you're generating instructions for larger resolutions, especially for high quality pdfs. Larger resolutions may also cause some slowness on the page or may not work at all on less powerful devices, so I recommend starting at the default and then going up.

Bricklink Upload Page
U.S. Pick a Brick Page

How you make a perfect pixel selfie:

Step 1

Step 1

Step 2

Step 2

Step 3

Step 3

Do you like your Pixel-Selfie?

3D Preview

Average Fast Glucose

Details

HBA1C

How you make a perfect pixel selfie:

Step 1

Resolution

3D

Input Image

Increase Limit

Step 1

Select

Generate

Step 2

Step 2

Level Count

Thresholds

Troubleshooting

Step 3

Paintbrush

Color Alignment

Available Colors

Pixel Type

Tips

Step 3

Edit Depth

Do you like your Pixel-Selfie?

Parts Used

Color Ties

Export Part List

3D Preview

Tips

Depth Plates

Part List

Average Fast Glucose

Details

HBA1C