# Manually adjusting spin in mapper?

**URL:** <https://forum.electromage.com/t/manually-adjusting-spin-in-mapper/640>\
**Category:** Feature Ideas + Requests\
**Created:** [October 14, 2020, 2:55pm UTC](https://forum.electromage.com/t/manually-adjusting-spin-in-mapper/640 "2020-10-14T14:55:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Scruffynerf](https://forum.electromage.com/letter_avatar_proxy/v4/letter/s/34f0e0/32.png) [@Scruffynerf](https://forum.electromage.com/u/Scruffynerf)\
**Post date:** [October 14, 2020, 2:55pm UTC](https://forum.electromage.com/t/manually-adjusting-spin-in-mapper/640/1 "2020-10-14T14:55:26Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![jeff](https://forum.electromage.com/user_avatar/forum.electromage.com/jeff/32/3473_2.png) [@jeff](https://forum.electromage.com/u/jeff)\
**Post date:** [October 14, 2020, 5:14pm UTC](https://forum.electromage.com/t/manually-adjusting-spin-in-mapper/640/2 "2020-10-14T17:14:20Z")

</div>

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.

```javascript
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:

```javascript
var t = (new Date).getTime()

```

Which I changed to:

```javascript
var t = 0

```

But you could set to

```javascript
var t = window.myRotationConst

```

and then use the console to try different rotations:

```javascript
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.