Manually adjusting spin in mapper?

Feature Ideas + Requests
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