Need advice for mapping and/or pattern

Vitaliy · January 27, 2022, 12:42am

I am looking for experts advice on my (wife) picture frame project.
The controller is PB Pico, the strip is 300 WS2812b LEDs.
Strip is folded in a middle so it became double sided (150 LEDs
on each side) and than spiraled on a 12"x12" white plastic square.
Here is a set of pictures of my creation.

All LEDs are Off.

Running Rainbow Fonts built-in pattern

The same pattern but with white plastic diffuser on top

And final assembly with a picture on top of the diffuser

In reality all looks much better than on the above photos.

Instead of this built-in test pattern my wife wants something like
“slowly spinning star/sun” or whatever else slowly spinning…

Here are my questions:

Do I need to create a mapping for this double sided spiral?
(I think, the appropriate mapping can help with creating a desired pattern.)
By any chance is similar mapping already exist?
Is it any good example(s) for patterns I am looking for?

Any idea(s) on how to create the desired pattern is greatly appreciated.

teaderechoweb · January 27, 2022, 12:54am

I would honestly use the image mapper. A pattern would be possible, although getting the parameters for the spiral just right would be a little tough, but especially when it comes to mapping both sides of it.

Personally, I would try two things:

Using the photo mapper and clicking on the “hot spot” where the light is hitting the white background rather than on the LED itself, so that the layout of the lights is more evenly spread out and more accurately reflects where the light coming from it will be visible, rather than the location of the LED. This should really help you see the entirety of a 2D pattern across the whole area of the spiral. Otherwise, the LEDs on opposing sides of the spiral will have almost the same X and Y coordinates.
If that doesn’t look good, using the photo mapper and clicking as close as possible to the actual LEDs

I do wonder how much the “coolness” of the spiral will be lost by turning it into a standard 2D map, but I think the fact that the LED strip blocks light and keeps it contained will end up creating interesting patterns anyway, even when running a standard 2D pattern on it.

Vitaliy · January 27, 2022, 8:44pm

Thank you very much for the link to this very useful app!
I did not know about its existence.
Now mapping is done:

and it looks right in the mapping preview window:

There are few buil-in 2D patterns looking really good.
But the original idea (and request) was/is to create a “slowly rotating star/sun” pattern.

My question is:
How do I create something like “slowly rotating star/sun” pattern?
As of now I can think only about creating “frame buffer” and then rotate it.
But I am sure, PB experts can do this without “frame buffer”.
Any help/hint/example will be greatly appreciated.

teaderechoweb · January 27, 2022, 9:30pm

I think it’s worth looking at the Spinwheel 2D pattern. I don’t think there’s a way to directly link to patterns, but it’s on page 3 here: https://electromage.com/patterns

I don’t have my PB around, so I can’t remember if this is the pattern I’m thinking of, but I think it makes a shape in the middle that spins. Sorry that’s not more helpful. I’ll try and mess around with making a rotating sun pattern, probably sometime this weekend.

Vitaliy · January 27, 2022, 10:23pm

Thank you for the advice, I tried this pattern but my wife rejected it.
I did try few more existing patterns “as is”.
For now the most acceptable pattern is built-in “spiral twirls 2D”.
It runs a bit faster then desired. There are multiple speed control sliders.
But touching any of these unfortunately makes things only worse.

This will be really helpful.
Many BIG Thanks to you upfront.

I will try to create something myself.
I can clearly see how to deal with “frame buffer” programming approach.
But many really cool things are done without using “frame buffer”.
I really have to learn this technique.

teaderechoweb · January 27, 2022, 10:35pm

This function should let you turn any 2D pattern into something rotating.

rotate(`angleRads`)

//Rotate 2D space (around the Z axis), by an angle (in radians).

I think that rotate(t1*(2*PI)) should give you something that rotates once each time that t1 time variable cycles. There’s still a good chance that I’m totally wrong, as I haven’t yet actually used this in a pattern, but it’s worth a try if you still want to mess around and try to get something working.

Scruffynerf · January 27, 2022, 11:13pm

Now that you have a 2D map, lots of patterns will work for you. Yes, you can rotate any pattern by using a transform as.suggested above.

I think the SDF code that @zranger1 pioneered is likely the best… Easy to make a sun or star shape and spin it.

Vitaliy · January 28, 2022, 12:40am

Many BIG Thanks to you guys (@teaderechoweb, @Scruffynerf, @zranger1).
I got the ideas what to do next.
It should be a lot of fun to implement exactly what is desired.

wizard · January 28, 2022, 3:21pm

@jeff had made some pretty cool star patterns that could work. It was using a polar coordinate map, but I’ve hacked up a version that will work using the normal coordinate system.

StarGen 2D.epe (15.5 KB)

@jeff’s Demo:

ChrisNZ · January 28, 2022, 4:17pm

It’s very easy to change the various speeds to slow the animation down further. If you make the numbers in the various sliderXxxSpeed() functions bigger, you’ll get slower results when you play with the sliders.

Vitaliy · January 28, 2022, 9:02pm

This is exactly what I thought about.
But as I already mentioned, as soon as I am touching any controls things becomes
only worse. And this is basically related to every pattern I tried. Pattern(s) works
good and looks nice with all default parameters. But as soon as something modified
the behavior becomes unexpected.

Vitaliy · January 28, 2022, 9:09pm

Thanks @wizard
I tried this pattern. It looks good on my 16x16 matrix but somewhat different
from whatever in a video. Video BTW looks very nice.
I am trying to understand why my visual effects are looking differently.

Vitaliy · January 28, 2022, 9:29pm

I played with “SDF Testbed2” and “Geomorph 2D” patterns created by @zranger1
First one (SDF Testbed2) has variety (24) of different selectable shapes.
I tried all of them one by one.
Each one produced the intended shape except for the shapeFns[6] = hexStar
This one looks like Circle instead of Hex Star.
And of course, this is a shape I really want to use.
Second one (Geomorph 2D) runs very nice with all default parameters.
At some point I can see a very nice Rotating Star.
But all my attempts to use just this (Rotating Star) pattern failed and
produced completely unexpected results.
Even attempt to slow down morphing time by changing 1000 to 2000
in this function:

// morph to a new shape every other second...
  if (morphClock > 1000) {
    if (!wait) {
      shape = nextShape;                      // set to next shape
      nextShape = (nextShape+1) % numShapes;  
    }
    morphClock = 0;    
    wait = !wait;
  }

produced completely unexpected results - all shapes became oversized.
Returning this value back to 1000 did not restore a behavior.

I am loosing all understanding on what is going on and what I am doing wrong.

UPDATE
Finally I got a Rotating Star pattern by modifying “Geomorph 2D” code.
Again, I am not sure why my modifications did not work on a fly.
But after restarting a PB and applying the same changes I got what I wanted.

Thanks everybody for very valuable hints and ideas.

wizard · January 28, 2022, 9:55pm

It was designed to work with concentric LED rings, with a lot of resolution on the outer ring. I agree, it doesn’t look super on my 16x16 either, but might look much better on something more circular which will have more angular resolution. Some of its patterns are dense, a few code tweaks lowering some coefficients of phi should help.

Vitaliy · January 29, 2022, 1:21am

OK, this makes sense.

Scruffynerf · January 30, 2022, 5:57am

Actually, @wizard, that’s part of it, but also the location differences between a 16*16 (256) matrix versus a 241 pixel ring is more than just increased resolution on the outside… The LEDs rarely fall into the “circle” for anywhere in the matrix except for the right angles. (0,90,180,270) and maybe the 45s, so tuning it to be less specific and thus light more “nearby” LEDs would help a lot I suspect in making it feel round. Same is true here, as it’s likely not lighting enough LEDs on the spiral to fill it out smoothly.

wizard · January 30, 2022, 6:01am

I agree, “angular resolution” for lack of a better term.

@Vitaliy have you tried it on the spiral, or just the 16x16? If you post your map I can use my new fancy feature-in-progress to see.

sorceror · January 30, 2022, 11:27am

In this case of this back-to-back spiral strip behind a diffuser, maybe it makes more sense to click on the visual center of the illuminated area instead of the location of the LED.

Scruffynerf · January 30, 2022, 1:16pm

Excellent point. The idea of using a dual side strip as a spiral sounds good in practice but the sideway nature of the LEDs means the light is spreading out and the leds opposite it will be competitive, so color blending will happen in ways that are different from facing LEDs head on.

Adjustment of the map will likely improve results.

One good test: use the 2D sweep and see if you get a smooth line. Slow it down and see if you notice it looks ragged in places.

Also the 2D KITT would be helpful but really you’d want to rotate it and explore how smooth the movement looked at various angles.

Vitaliy · January 30, 2022, 3:43pm

@wizard just tried StarGen 2D pattern on my spiral. It looks much better vs 16x16 matrix.
Of course, my spiral is not geometrically ideal. I tried my best, it looks about right but
could be better if I was not lazy and draw an ideal mathematical spiral guide line
before gluing LEDs.
Just in case, here is my JSON map for this double sided spiral.
Photos how it looks are in this post above.

[
[745,91],
[824,93],
[914,103],
[992,118],
[1075,141],
[1157,165],
[1231,208],
[1294,267],
[1351,326],
[1398,396],
[1443,470],
[1459,558],
[1474,642],
[1486,726],
[1480,815],
[1477,897],
[1463,974],
[1436,1062],
[1399,1133],
[1361,1204],
[1310,1273],
[1253,1335],
[1181,1391],
[1109,1426],
[1033,1455],
[955,1476],
[865,1490],
[786,1501],
[692,1494],
[610,1475],
[535,1450],
[462,1416],
[385,1375],
[319,1316],
[260,1254],
[214,1180],
[182,1104],
[154,1023],
[140,943],
[137,848],
[147,763],
[154,677],
[173,598],
[221,524],
[271,449],
[330,381],
[394,329],
[472,286],
[547,257],
[634,237],
[717,230],
[810,225],
[880,228],
[970,250],
[1045,280],
[1120,324],
[1196,368],
[1255,428],
[1304,496],
[1336,572],
[1352,677],
[1357,752],
[1357,828],
[1347,919],
[1324,999],
[1303,1073],
[1257,1141],
[1196,1213],
[1137,1264],
[1063,1316],
[983,1342],
[894,1351],
[818,1363],
[731,1359],
[644,1346],
[566,1315],
[491,1270],
[431,1213],
[378,1141],
[341,1065],
[309,992],
[282,905],
[274,822],
[291,721],
[321,642],
[365,559],
[422,503],
[491,445],
[563,410],
[645,378],
[727,370],
[808,360],
[889,369],
[964,386],
[1040,439],
[1110,487],
[1165,567],
[1195,651],
[1207,738],
[1211,822],
[1205,909],
[1178,997],
[1137,1068],
[1082,1120],
[1016,1173],
[950,1220],
[862,1236],
[777,1237],
[687,1225],
[602,1196],
[535,1145],
[483,1080],
[435,1014],
[403,929],
[395,843],
[422,746],
[463,674],
[535,613],
[610,561],
[694,524],
[776,512],
[854,508],
[928,533],
[999,580],
[1045,651],
[1072,721],
[1087,817],
[1067,916],
[1023,988],
[954,1041],
[879,1075],
[786,1084],
[700,1062],
[622,1014],
[572,952],
[544,864],
[557,771],
[597,701],
[673,642],
[745,613],
[835,619],
[916,682],
[954,768],
[929,861],
[867,922],
[778,938],
[701,900],
[646,809],
[692,729],
[789,730],
[836,813],
[764,777],
[711,759],
[688,816],
[716,869],
[791,896],
[855,886],
[908,834],
[922,768],
[880,700],
[823,656],
[749,656],
[677,690],
[616,734],
[584,801],
[585,871],
[609,940],
[657,997],
[726,1036],
[801,1049],
[875,1036],
[942,1002],
[1000,953],
[1036,883],
[1050,801],
[1033,724],
[1002,652],
[945,593],
[882,551],
[810,546],
[739,556],
[664,573],
[594,616],
[531,666],
[478,718],
[443,794],
[430,861],
[441,942],
[475,1012],
[525,1071],
[575,1130],
[649,1180],
[718,1197],
[801,1202],
[875,1196],
[947,1171],
[1016,1130],
[1077,1079],
[1134,1014],
[1162,951],
[1175,866],
[1182,789],
[1174,704],
[1146,627],
[1115,564],
[1064,504],
[999,452],
[927,420],
[849,403],
[766,398],
[697,411],
[618,430],
[548,463],
[478,508],
[418,562],
[376,623],
[339,694],
[317,771],
[316,835],
[331,923],
[350,1002],
[382,1069],
[422,1141],
[473,1208],
[533,1256],
[602,1291],
[683,1320],
[759,1326],
[843,1323],
[921,1313],
[994,1296],
[1070,1269],
[1131,1210],
[1197,1168],
[1246,1101],
[1277,1033],
[1303,954],
[1319,872],
[1331,788],
[1322,709],
[1316,643],
[1291,570],
[1253,498],
[1199,431],
[1143,387],
[1067,345],
[990,309],
[923,285],
[838,275],
[769,267],
[688,272],
[613,295],
[529,309],
[458,344],
[387,383],
[330,440],
[273,498],
[237,571],
[203,645],
[188,715],
[182,804],
[173,881],
[185,962],
[203,1040],
[227,1121],
[263,1196],
[314,1256],
[369,1314],
[435,1363],
[500,1396],
[579,1426],
[658,1449],
[736,1463],
[810,1465],
[895,1451],
[970,1435],
[1043,1408],
[1127,1380],
[1194,1339],
[1251,1288],
[1301,1228],
[1358,1165],
[1393,1089],
[1420,1014],
[1434,940],
[1455,859],
[1453,776],
[1441,696],
[1432,617],
[1417,536],
[1388,459],
[1351,391],
[1304,333],
[1247,274],
[1186,233],
[1106,191],
[1037,167],
[951,162],
[869,149],
[787,140]
]

I experimented with multiple different LED layout.
Originally I thought about 32x32 Matrix right behind the picture with the diffuser.
May be the diffuser is/was not a right one but my wife did not like how it looked.
She did not like well visible dots when LEDs where right behind the diffuser.
When I moved LEDs a bit away dots disappeared but she still did not like it.
Single sided spiral looked good but produced very uneven light distribution
plus spiral itself was very well pronounced. Finally double sided spiral was
accepted and made into final design. I interleaved LEDs on both sides.
This increased LED density but strip became twice shorter, i.e. twice less spiral
turns. But visually this looks much better.

Right now this picture frame runs two patterns.
One is a built-in spiral twirls 2D
It runs a bit faster than desired but all my attempts to slow it down failed.
The pattern becomes destroyed instead just slowing speed down.

Second on is a Rotating Star.
I modified a Geomorph 2D code created by @zranger1 and left only
slowly rotating hex star.

Once again - Thank you all for very valuable ideas and hints how
to create a desired result.