Manually adjusting spin in mapper?

Feature Ideas + Requests
1

I’m trying to do a map for a zigzag cylinder… I took a sheet of plastic with holes, laid in 6 leds top row, dropped to next row and did 6 more in the reverse direction (so like the zig zag matrix, which is a good example) for 48 leds… but then I took the sheet and connected the sides, so it’s a cylinder and I want a Z axis, plus circular locations on X,Y…

Similar to https://newscrewdriver.com/2019/07/04/pixelblaze-pixel-map-for-led-helix
but that has no zigzag… so a hybrid approach

function (pixelCount) {
  height = 6
  width = 8
  var map = []
  for (i = 0; i < pixelCount; i++) {
    zig = Math.floor(i / width) % 2
    c = -i * height / pixelCount * Math.PI * 2
    if (zig) {
      map.push([Math.cos(c), Math.sin(c), -(Math.floor(i/width))])
    } else {
      map.push([Math.sin(c), Math.cos(c), -(Math.floor(i/width))])
    }
  }
  return map
}

which (after much trial and error) seems correct… (nope, it’s not, I need to have the next pixel below the above one, when it drops, still working on it… but regardless)

But the spinning of the mapping preview was really unhelpful… So my request is simple: some way to stop it? Manual spin control would be awesome, but even just freezing it, and also less “glow”, so I can see relative locations, that would have been useful, more so than the constant spin.

2

This is such a hack that I’m almost ashamed to post it publicly.

If you open your web inspector on the Pixelblaze page, you can paste this in the console to freeze the preview.

function animateMapper() {
        if ("#mapperPanel" === activeTab) {
          try {
            mctx.globalCompositeOperation = "source-over",
            mctx.fillStyle = "rgb(0,0,0)",
            mctx.fillRect(0, 0, 266, 266),
            mctx.globalCompositeOperation = "lighter";
            var e = 256 / Math.sqrt(pixelMap.length) * pixelMapDimensions / 2;
            switch (pixelMapDimensions) {
            case 2:
              pixelMap.forEach(function(t, a) {
                var n = Math.round((new Date).getTime() / 10 + a / pixelMap.length * 360) % 360
                  , r = Math.pow((1 + Math.sin((new Date).getTime() / (pixelMap.length + 500) - a / pixelMap.length * Math.PI * 2)) / 2, pixelMap.length)
                  , o = t[0] + 5
                  , i = t[1] + 5
                  , s = mctx.createRadialGradient(o, i, r * e / 4, o, i, e / 2);
                s.addColorStop(0, "hsla(" + n + ", 100%, 70%, 1)"),
                s.addColorStop(.5, "hsla(" + n + ", 100%, 50%, .3)"),
                s.addColorStop(1, "rgba(0,0,0,0)"),
                mctx.fillStyle = s,
                mctx.fillRect(o - e / 2, i - e / 2, e, e)
              });
              break;
            case 3:
              var t = (new Date).getTime()
                , a = MDN.multiplyArrayOfMatrices([MDN.translateMatrix(128, 128, 128), MDN.rotateXMatrix(1.2 * Math.PI + Math.sin(2 * Math.PI * (t % 2e4 / 2e4)) / 3), MDN.rotateZMatrix(2 * Math.PI * (t % 25e3) / 25e3), MDN.scaleMatrix(.8, .8, .8), MDN.translateMatrix(-128, -128, -128)]);
              pixelMap.forEach(function(t, n) {
                var r = Math.round((new Date).getTime() / 10 + n / pixelMap.length * 360) % 360
                  , o = Math.pow((1 + Math.sin((new Date).getTime() / (10 * pixelMap.length + 1500) - n / pixelMap.length * Math.PI * 2)) / 2, pixelMap.length)
                  , i = t[0]
                  , s = t[1]
                  , c = t[2]
                  , l = MDN.multiplyPoint(a, [i, s, c, 1]);
                i = l[0],
                s = l[1],
                c = l[2];
                var d = focalLength / (s + focalLength);
                i = (i - 128) * d + 128,
                c = (c - 128) * d + 128;
                var p = mctx.createRadialGradient(i, c, o * e / 2 * d, i, c, e / 2 * d);
                p.addColorStop(0, "hsla(" + r + ", 100%, 70%, 1)"),
                p.addColorStop(.5, "hsla(" + r + ", 100%, 50%, .3)"),
                p.addColorStop(1, "rgba(0,0,0,0)"),
                mctx.fillStyle = p,
                mctx.fillRect(i - e / 2, c - e / 2, e, e)
              })
            }
          } catch (e) {}
          requestAnimationFrame(animateMapper)
        }
      }

The key line I changed to freeze it in a rotational position was where t is defined in the 3D case:

var t = (new Date).getTime()

Which I changed to:

var t = 0

But you could set to

var t = window.myRotationConst

and then use the console to try different rotations:

window.myRotationConst = 2000; // steep top quarter
window.myRotationConst = 40000; // shallow top quarter

I know this was more of a feature request for the editor, but here’s a kludge that’ll work today.

2 Likes