Looking for Heart mapping

Hey there, looking for a heart mapping for Pixelblaze. I have this one but there is too many pixels where the two halves come together. I am looking for one not using a parametric function but constructing the heart from circles and lines, while keeping equal distances between the pixels.

function (pixelCount) {
  var map = [];
  var x, y;
  for (i = 0; i < pixelCount * 10; i++) {

    t = i*1;
    x = 16 * Math.pow(Math.sin(t),3);
    y = 13 * Math.cos(t) - 5* Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)

    map.push([x,-y])
  }
  return map
}

Just realized this mapping does not work because it puts the pixels on the map in a more or less random fashion, not in order…

Do you have a photo of your heart arrangement? It will help us understand what you are looking for, and might be usable with the photo pixel mapper tool.

Just a simple 2d heart outline, like this: :heart:

Where can I find the photo pixel mapper tool?

You can find the pixel mapper tool thread and links here:

To use this, you’ll want to arrange your LED strip in a heart shape, light it up so the pixels are easily seen, and take a photo. Then use the tool to click on each in order starting with the first pixel. Copy the entire text area contents to the Pixelblaze mapper tab, and you’re set!

There’s probably a way to generate a heart outline coordinates with some code that would be more precise, but you’d have to make it match what you create in the real world which might be trickier than the build + photo + click approach.

Turn this into a pattern

If you’re just looking to do a parametric outline, you can form a heart from two semi-circles and two lines, as follows (the equations look more daunting then they actually are because the way they’re formatted for the graphing program): https://www.desmos.com/calculator/5iikrdyfto. The entire shape of the heart is dependent on one parameter, “L”, which is the length of one of the straight lines.

If you know the spacing between pixels, you can figure out their positions around the heart as a function of L.

2 Likes

Wow, thanks for the support. That’s what I was looking for and did not have time to do it myself. What a great tool, too!

1 Like

Here’s another heart formulation that I’ve been using recently. It’s a single curve, mirrored across the y axis, that gives a really well defined heart on low-res displays. The variable r controls the overall radius of the heart, and k the (approximate) aspect ratio.

3 Likes

Ooooh, that’s nice looking!