2D Pixel coordinate mapping tool for images

Here is a quick and dirty pixel mapping tool.

You can upload a photo, click to mark a coordinate on the image, press z (not control-z) to remove the last coordinate.

It puts the coordinates into a text area for copying to pixelblaze mapper tab, drawing the pixel index number on the image.

Remember, Pixelblaze mapper coordinates can be in any unit, pixels work too :slight_smile:

The coordinates are in pixels from the source image. It will also accept edits/pastes into the text area to edit maps later, so you can upload the same image and paste the map to edit later.

I’ll clean it up and throw it on my main website in the future, but perhaps even this quick tool will be handy!

8 Likes

OK this is awesome,

I had an idea ages ago for making a mask with leds on it, but couldn’t wrap my head around matrixes and mapping. This pretty much solves that problem. Stoked to give this a try!

1 Like

Here’s a 3D one that takes two movies of LEDs lighting up in order, taken at 90 degrees of each other, and creates a XYZ coordinate set, all within a browser. @wizard, might be worth adjusting this to fit PB, and having it available as well, there is source on GitHub.

1 Like

I’ve just updated this tool!

This improves usability for smaller images, and especially pixel art bitmaps.

  • It will now use your native resolution regardless of image size for rendering so that the pixel index text is readable (including retina displays!).
  • Font sizes are no longer dependent on image size
  • Images are drawn without smoothing if any dimension is less than 256. This makes it much easier to map pixel art.
  • Text drawn over the image is now properly centered on the pixel, which is pretty important when you have giant pixels!
1 Like

Great! Thanks for the update.

I mapped from my dance costume (1160 pixels) using the 2D Pixel tool.

Here is the image. I need to go back and recreate the map. As you can see from the image below, the pixels are not aligned. Is there a faster or more efficient way of doing this other than painstakingly adding each pixel with greater care and precision, or manually entering the coordinates?

2D render

Image used for mapping costume

Questions:

1: What is the function of the SAVE button at the bottom of the Mapper page?
2: How can I save and reload my coordinates other than in a text document?
3: How can I take PB Saved Patterns and modify them to run on my 2D mapping coordinates?

Thanks,

Hi @Kamehana,

Is there a faster or more efficient way of doing this other than painstakingly adding each pixel with greater care and precision, or manually entering the coordinates?

Not at this time with a construction like yours and the tool as it exists today. If your LED layout were regular (like square, or followed some pattern), some code could generate the map.

The image pixel mapper tool was a quick project. In an ideal tool you could draw lines, snap to a grid, drag and drop points, etc., but the tool does not support those things now.

The recent enhancement I just uploaded will let you work with lower resolution images, which then naturally “snap” to pixel rows/columns.

That said, what you have is still quite close, and would look good with most 2D patterns.

1: What is the function of the SAVE button at the bottom of the Mapper page?

Once you paste the map in Pixelblaze, it will be used immediately much like editing a pattern. Both the preview on the right and the in-memory pixel map used for rendering are updated. Click Save to make this change permanent (and overwrite any previously saved pixel map). Otherwise your pixel map will not persist if you close the page and restart PB. This will store both the normalized pixel map used internally, as well as the text for your map.

2: How can I save and reload my coordinates other than in a text document?

The JSON text is a portable format for your coordinates. When you click save this is persisted on PB, and you can also save this elsewhere, like in a text file on your computer for safe keeping or to use later with other PBs. These coordinates can also be loaded and transformed using just about any programming language since JSON is a widely supported syntax.

3: How can I take PB Saved Patterns and modify them to run on my 2D mapping coordinates?

On the Mapper tab, scroll down to view the documentation for the mapper tool and how these work with Pixelblaze pattern code. You can also access that documentation here.

Once a 2D pixel map is installed on the Mapper tab, patterns can implement a render2D(index, x, y) exported function.

A super easy trick to convert a plain old render() pattern is to swap out any code that uses the expression index/pixelCount with x or y.

For example take the default rainbow pattern:

export function beforeRender(delta) {
  t1 = time(.1)
}

export function render(index) {
  h = t1 + index/pixelCount
  s = 1
  v = 1
  hsv(h, s, v)
}

To convert this, the render function is modified to become render2D with additional arguments, and the index/pixelCount is replaced with x:

export function beforeRender(delta) {
  t1 = time(.1)
}

export function render2D(index, x, y) {
  h = t1 + x
  s = 1
  v = 1
  hsv(h, s, v)
}

This will cause a rainbow to sweep to the right on any pixel mapped LEDs, and the best part is that the now 2D pattern works on any LEDs that have a 2D mapping. It would work equally well on a square matrix as on your orc LED suit.

There are many patterns on the pattern sharing site with 2D and/or 3D support!

I think “fast pulse 3d” would look really good, give it a try!

3 Likes

Thanks for the information and for the examples. They are very helpful.

1). I downloaded and opened Fast pulse 3d, Bouncer3D and other 2D patterns in the editing window.
2). In Setting, I changed the number of pixels to 1066 (number of pixels in this costume)

However when I change over to the Mapping tab, I still see the rainbow preview pattern. How do I get the preview in the mapping tab to show the pattern from the editing tab?

1 Like

The rainbow preview in the Mapper tab is only a preview of your map. The colors and “pulse” animation show the wiring direction and is used to show information about the map instead of the pattern. However, edits to the map should reflect live on the LEDs if a 2D pattern is running as well.

There are 2D/3D mapping helper patterns that do things like sweeps across an axis that can help if you have something not quite right.

A post was split to a new topic: Troubleshooting an LED suit with 2D pixel maps

This tool is awesome. I just mapped the order of my nanoleaf panels and will be diving into the code soon.

1 Like