# Pixel Mapping Help / Design

**URL:** <https://forum.electromage.com/t/pixel-mapping-help-design/2507>\
**Category:** Uncategorized\
**Created:** [September 14, 2022, 3:49pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507 "2022-09-14T15:49:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![flashy](https://forum.electromage.com/letter_avatar_proxy/v4/letter/f/e36b37/32.png) [@flashy](https://forum.electromage.com/u/flashy)\
**Post date:** [September 14, 2022, 3:49pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/1 "2022-09-14T15:49:09Z")

</div>

Can someone help me with my pixel mapping i have 8 vertical led tubes, each tube is a channel on the output expander. The tube has leds back to back something like

> **[Circular 360º Degree Water Resistant IP65 Profile 20.5mm, 2 Metre Length](https://www.ultraleds.co.uk/circular-360-degree-waterproof-ip65-profile-20-5mm.html)**
>
> Circular 360º Degree Waterproof IP65 Profile with Frosted Diffuser A plastic water resistant channel circular shape ideal for being mounting outdoors and in damp environments which provides a full 360 degree light output. This extrusion is a...

Front of tube pixels 1 - 120 back of tube 121 - 240.  
So pixel 1 and 240 are back to back at the bottom, 2 and 239 and so forth going up the tube

I think ideally the pixels on the front of the back and the tubes in the same position should be showing the same thing. However open to suggestions from people that have any pratical experience ?

Can anyone help me map this ? Thanks in advance im sorry the JS is beyond me

Terrible mock up. White line is my data and its my understanding it has to be like this ( and i have no more space on the output expander )

 ![Screenshot 2022-09-14 at 16.30.44](https://forum.electromage.com/uploads/default/original/2X/c/c33c4ffa0eedcfab2486a986e4ee4f3684b5f352.png)

For those that have been helping me so far this is were im at currently !

 ![20220914_172431](https://forum.electromage.com/uploads/default/original/2X/9/986de95ec1158973b4b5be848daf4d720ea43251.jpeg)

---

<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:** [September 14, 2022, 6:34pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/2 "2022-09-14T18:34:19Z")

</div>

Sounds like a zig-zag matrix, but 1) x doesn’t change on the backside run and 2) it goes down-up instead of left-right.

If we start from the built-in matrix map example:

```javascript
function (pixelCount) {
  width = 8
  var map = []
  for (i = 0; i < pixelCount; i++) {
    y = Math.floor(i / width)
    x = i % width
    x = y % 2 == 1 ? width - 1 - x : x //zigzag
    map.push([x, y])
  }
  return map
}

```

First let’s just swap x and y so that it goes down-up, down-up, and rename the `width` to be the height (120 LEDs - `ledsPerStrip`). We’ll get there by defining 16 vertical runs - I’ll call them verticalStrips.

```javascript
function (pixelCount) {
  verticalStrips = 16
  ledsPerStrip = pixelCount / verticalStrips
  var map = []
  for (i = 0; i < pixelCount; i++) {
    x = Math.floor(i / ledsPerStrip)
    y = i % ledsPerStrip
    y = x % 2 == 1 ? ledsPerStrip - 1 - y : y // zigzag
    map.push([x, y])
  }
  return map
}

```

[/uploads/default/original/2X/a/a6d02e9c3fa87545cee2b1a772033011c5816937.mp4](https://forum.electromage.com/uploads/default/original/2X/a/a6d02e9c3fa87545cee2b1a772033011c5816937.mp4)

We’re very close - note the flow looks good. We just need to make sure that the 2nd, 4th, 6th etc strips (the ones that flow data back up) share the same x-coordinate as the strip that preceded it. We do that by getting that floor function (whole number part of division) to work on 240 LEDs instead of 120 LEDs.

```javascript
function (pixelCount) {
  verticalStrips = 16
  ledsPerStrip = pixelCount / verticalStrips
  var map = []
  for (i = 0; i < pixelCount; i++) {
    x = Math.floor(i / (ledsPerStrip * 2)) // This * 2 is the only change from the above
    y = i % ledsPerStrip
    y = x % 2 == 1 ? ledsPerStrip - 1 - y : y // zigzag
    map.push([x, y])
  }
  return map
}

```

LGTM:

![11-33-49](https://forum.electromage.com/uploads/default/original/2X/9/9467fea1ed472ab2ed4116d47d0af133915707ce.png)

---

<div class="post-metadata">

**Author:** ![flashy](https://forum.electromage.com/letter_avatar_proxy/v4/letter/f/e36b37/32.png) [@flashy](https://forum.electromage.com/u/flashy)\
**Post date:** [September 15, 2022, 4:19pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/3 "2022-09-15T16:19:49Z")

</div>

Amazing jeff im working at the momnet but hope to be able to test it on Saturday 🙂

How does the script know there are 240 leds per channel does this come from the max pixel count set in the output expander config ? Sorry if this is stupid or basic question

---

<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:** [September 16, 2022, 2:12am UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/4 "2022-09-16T02:12:28Z")

</div>

> [@flashy](#):
>
> How does the script know there are 240 leds per channel does this come from the max pixel count set in the output expander config ?

Good eye! Just because `pixelCount / 16` is assumed to be 120! It’d be partially broken/incomplete if the total number of pixels was somehow set such that it wasn’t.

---

<div class="post-metadata">

**Author:** ![flashy](https://forum.electromage.com/letter_avatar_proxy/v4/letter/f/e36b37/32.png) [@flashy](https://forum.electromage.com/u/flashy)\
**Post date:** [September 25, 2022, 7:24am UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/5 "2022-09-25T07:24:54Z")

</div>

Thanks Jeff i have had a play with this and it works great ! Making these for my wedding next weekend and we have so many things to prepair not been able to play fully.

I think afterwards i need to sit down to _try_ properly understand the interaction between

mapping \<-\> pattern \<-\> pixel index setting

I guess getting into Thanks Jeff i have had a play with this and it works great ! Making these for my wedding next weekend and we have so many things to prepair not been able to play fully.

I think afterwards i need to sit down to _try_ properly understand the interaction between

mapping \<-\> pattern \<-\> Pixel index

Starting to get into aesthetics how ‘should’ the pattern display vs how you would like it to display.

---

<div class="post-metadata">

**Author:** ![flashy](https://forum.electromage.com/letter_avatar_proxy/v4/letter/f/e36b37/32.png) [@flashy](https://forum.electromage.com/u/flashy)\
**Post date:** [September 26, 2022, 12:49pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/6 "2022-09-26T12:49:54Z")

</div>

I said i wouldnt be back before my wedding 🫣 but ‘sound - rays’ made me do it !

This is my favourite pattern by far is there any way withing the pattern for it to overide the index for each output so it starts at 0 instead of whats given in the settings ? So all the outputs mirror each other instead of the design being spread across them. Anyone know ?

---

<div class="post-metadata">

**Author:** ![sorceror](https://forum.electromage.com/user_avatar/forum.electromage.com/sorceror/32/735_2.png) [@sorceror](https://forum.electromage.com/u/sorceror)\
**Post date:** [September 26, 2022, 1:23pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/7 "2022-09-26T13:23:45Z")

</div>

Not the most efficient answer, but certainly the laziest:

In the render() function, try replacing `i = (index + pos) % pixelCount` with `i = (index + pos) % PPO`. (where PPO is the number of pixels per output)

You might also want to replace ‘index’ with ‘i’ in the line `h += index / pixelCount / 4 + t1`

---

<div class="post-metadata">

**Author:** ![flashy](https://forum.electromage.com/letter_avatar_proxy/v4/letter/f/e36b37/32.png) [@flashy](https://forum.electromage.com/u/flashy)\
**Post date:** [September 26, 2022, 4:38pm UTC](https://forum.electromage.com/t/pixel-mapping-help-design/2507/8 "2022-09-26T16:38:38Z")

</div>

sorceror not just by name.

yay !! So happy - thanks