Need help with mapping

I need some help with mapping. For the testing I am using 16x16 matrix with next physical layout:

  • Index-0 is in the right upper corner;
  • Zigzag wiring is Right-to-Left and Top-to-Bottom;

For the mapping testing I am using “Multiple Panel Matrix” from the example (because eventually it will be three 16x16 matrix assembled horizontally into 48x16 matrix) and " Red_Green_XY_2D_Sweep" pattern. On the “preview” pan everything looks as expected (i.e. Green sweeps top-to-bottom and Red sweeps left-to-right). But on the real matrix Green looks OK but Red has two opposite sweeping waves (one goes left-to-right and a second one goes right-to-left at the same time). Just in case here is a mapping code:

unction (pixelCount) {
  //set zigzag to true if every other LED row travels in reverse
  //if they are all straight across, set it to false
  zigzag = false
  //rotate a point (x, y), along a center (cx, cy), by an angle in degrees
  function rotate(cx, cy, x, y, angle) {
    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];

  //create a set of coordinates for a matrix panel
  //sized (w, h), rotated by an angle, and offset by (sx, sy)
  function panel(w, h, sx, sy, angle) {
    var x, x2, y, p, map = []
    for (y = 0; y < h; y++) {
      for (x = 0; x < w; x++) {
        //for zigzag, flip direction every other row
        if (zigzag && y % 2 == 1)
          x2 = w - 1 - x
          x2 = x
        p = rotate((w-1)/2, (h-1)/2, x2, y, angle);
        p[0] += sx
        p[1] += sy
    return map;

  //assemble one or more panels
  var map = [];

  map = map.concat(panel(16, 16, 0, 0, 0))
//  map = map.concat(panel(8, 8, 8, 0, 0))
//  map = map.concat(panel(8, 8, 0, 8, 0))
//  map = map.concat(panel(8, 8, 8, 8, 0))

  return map

And here is a test pattern code:

This pattern displays a sweep of color across a 2D pixel mapped display.
Red waves should travel left to right, and green waves from top to bottom.

var axis, t1
export function beforeRender(delta) {
  t1 = time(.1)
  axis = t1 > .5
  t1 *= 2

export function render2D(index, x, y) {
  h = axis/3
  v = wave((axis ? y : x)/2 - t1 + .5)
  v = pow(v, 20)
  hsv(h, 1, v)

Please advice what is wrong and how to fix this mapping problem/inconsistency?

That’s zigzag wiring. Set that to true.

Yes, the physical wiring is a zigzag and I did play with the “zigzag = true/false” parameter. When it set to “true” the preview pan shows double red waves moving in opposite direction and the real physical matrix shows a correctly moving single red wave. So now physical matrix behavior is correct but a preview pan is not. I guess, I should forget about incorrect preview pan behavior but something is not right with this picture. Both views must be showing the same things. Is not it?

Real “perlin fire wind controls” pattern (and other fire patterns I tried) visually looks about the same regardless of zigzag setting.

The preview pan is following the data path like a wire. If you run a 1D pattern that lights up pixels in sequence it would follow a similar zigzag path because that is how your matrix is wired.

Now I am confused or I am missing something. When I changed a zigzag setting in a mapping window the 2D Preview pan reflacted the change but displayed it incorrectly. So, the mapping is a part of the preview function. Right? My good guess is/was the 2D Preview Pan and a Real Physical Matrix should/must be in sync and display exactly the same things. Otherwise what is a reason for the 2D Preview Pan if it shows things incorrectly?
What I am missing?


Finally I got things right.
My first problem was incorrect orientation of a real physical 16x16 matrix. Index-0 pixel must be in a Top Left corner but it was in a Top Right corner (I was confused by correctly running pattern with incorrect matrix orientation and mapping not correctly aligned with matrix wiring).
After correcting the above problems everything looks good. Now the Preview Pan and and Real Matrix are showing exactly the same things.

Thank you very much for the help and I am sorry for the noise.