# Mapping a Triangular arrow + concentric circles

**URL:** <https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593>\
**Category:** Patterns and Code\
**Created:** [September 23, 2021, 4:26am UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593 "2021-09-23T04:26:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dadazito](https://forum.electromage.com/user_avatar/forum.electromage.com/dadazito/32/1448_2.png) [@Dadazito](https://forum.electromage.com/u/Dadazito)\
**Post date:** [September 23, 2021, 4:26am UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/1 "2021-09-23T04:26:31Z")

</div>

Hello,

I just got done soldering about 2900 pixels

Im using on my structure the output expander to give

2x circles (with led inside and outside)  
and  
10x Arrows (with led on the outside

I know I can mape the concentric circles

BUT how the hell can i map the ARROWS?

@wizard i have @Sunandmooncouture helping, but i was just wondering if you know a workaround for this?

Heres an example of whats I have now, and the rendering!

 ![IMG_4061](https://forum.electromage.com/uploads/default/original/2X/4/444dab2e268f5d373bf658198f65c5ad336c008d.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 23, 2021, 5:59am UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/2 "2021-09-23T05:59:53Z")

</div>

Hey! I think there’s a couple options; can you describe what kind of patterns are most important on the arrows? Like, traversing the outlines? Lighting each individually? Tail to tip? How would you like to coordinate the rings with the arrows, if at all?

Some of the 3D line generation map code we’ve seen here might be a good place to start:

> [@First attempts at a map - 3d lines](https://forum.electromage.com/t/first-attempts-at-a-map-3d-lines/1068/4):
>
> For anyone wanting to see the map, this is it, with the corrected math for the segments. I don’ think I have any duplicated pixels with it. function (pixelCount) { width = 55 length = 60 height = 30 // generate wireframe of tabletop with backboard // a 3d adaptation of the 2d line function // x, y, z is the starting position // dx, dy, dz is how far each step is, 0=no movement, 1=move in positive direction, -1=move in negative direction // count is the number of steps …

---

<div class="post-metadata">

**Author:** ![Dadazito](https://forum.electromage.com/user_avatar/forum.electromage.com/dadazito/32/1448_2.png) [@Dadazito](https://forum.electromage.com/u/Dadazito)\
**Post date:** [September 23, 2021, 6:14am UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/3 "2021-09-23T06:14:30Z")

</div>

Heya @jeff

All of the above options!

I would like first to have an animation that runs from the top coming all the way down  
i.e: an wave line that starts from the “cricle” going from the “top of arrow” all the way to the “tip”.

but also individualy and traversing outline sounds cool mapping too!

---

<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:** [September 23, 2021, 10:49am UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/4 "2021-09-23T10:49:01Z")

</div>

So the biggest problem I see is that those arrows are freely spinning.

Imagine they were pasted onto a tin can that descended from the ring… you’ll essentially have a cylinder with a pattern of arrows on it, right?

Treat it that way. It’ll look right.

So your map is:  
Rings at top of cylinder  
Top of arrows further down cylinder, spaced around the cylinder  
Sides of arrows  
Bottoms of arrows going to the point

You could (and likely easier) map each arrow fully around the cylinder, rotating around the cylinder based on the “center point” of each arrow. That will cause a slight curve in the map, but I suspect you won’t notice that in real life

Make sense?

So your mapping code in JavaScript should be:  
Define the cylinder radius  
Map the rings at the top  
Define an arrow mapper function, given an xyz location  
Map each arrow around the cylinder, at a given xyz location.

If you want to do your arrow outline, then Z will define the top to bottom effect you want.

---

<div class="post-metadata">

**Author:** ![wizard](https://forum.electromage.com/user_avatar/forum.electromage.com/wizard/32/4_2.png) [@wizard](https://forum.electromage.com/u/wizard)\
**Post date:** [September 23, 2021, 4:59pm UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/5 "2021-09-23T16:59:59Z")

</div>

I would be tempted to map the arrows as if they were folded in half and fixed in position (each side of the arrow would be mirrored) ,with the folded center towards the middle and the arrow barb toward the outside.

With this, imagine a pattern that goes from inside outward, it would hit the ring and the center of the arrow at the same time, and then travel outward from center of the arrow (long the top and tip). You’d still get some action along the circumference of the large ring, but it would be equal/mirrored on the arrows and wouldn’t matter how they were rotated.

Here’s the strategy for how I would implement it:

Use a circle function to draw the ring at a fixed Z height (adapted from the ring example)  
Make a function that draws the arrows at a given angle and offset from center (position around the circumference of the large ring), using a few line functions to make each arrow.  
Use a `for` loop to call the arrow function to generate each arrow distributed around the circle.

---

<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:** [September 23, 2021, 5:18pm UTC](https://forum.electromage.com/t/mapping-a-triangular-arrow-concentric-circles/1593/6 "2021-09-23T17:18:15Z")

</div>

Yeah, similar to my view except you see it this way:

```auto
----- ring
    | Space
   -| top half of arrow (mirrored)
    7 half of arrow (mirrored)

```

I was picturing flat against the cylinder, imagine them painted on.

Either will work. But I prefer mine because the left and right “sides” of each would have different angles, while in yours, the entire arrow would be in one “angle” entirely. That would be good for lighting up an entire arrow (where angle is X), while in mine, an arrow is between angles A and B.
