Coding for the future

Patterns and Code
1

I still want to port WLED patterns, and I also want to update existing patterns now that we have so many tools/tricks to do things “better”

An example is KITT, the 1D array-using time-less method works and it’s a great tutorial, but having a mapped arrayless time-using pattern means that it works in many more cases/situations.

Now that the coordinate API is available, rewriting code to use it rather than doing x=x-.5 is a no brainer, but we also have scale and rotate…
I was just reviewing code for the “radial sound spectrometer” and realized that using the rotation API probably solved the problem I had with rotating only clockwise (because counter clockwise required more code to handle, so I skipped it in the name of posting something working at least one way)… Now rotation is dead simpler. Less code. Easier to understand.

Making patterns use time() means they can sync, and scale up. So it’s not just a matter of doing it different, it’s doing it “better”

Any other “done better” bits people can think of?
Any still outstanding that feel critical?

2

This is a really nice addition! It’s fun and helpful now, and will get even more so when we can access map coordinates outside render. It’s also quite fast. Thanks @wizard!

If you have 3.17+, and haven’t had a chance to try the new functions yet, here’s a quick test I made to learn exactly how rotate() works. It’s a smooth flowing plasma that occasionally bursts into colorful chaos – basically a bug that I decided to was worth keeping!

It’s deterministic, based on x and y coords, so rotating the coordinate system lets you see different sections of the plasma, which makes it look a lot more interesting. These transform functions will have tons of uses!

// Swirly plasma that occasionally explodes into weirdness.
// Requires Pixelblaze 3 with v3.17 or newer firmware.
// 7/15/21 - ZRanger1

var chaosLevel = 0.5;  // more is more
var theta;             // current rotation angle

export function beforeRender(delta) {
  t1 = wave(time(.5)) * 40;  // scale time for sin and cos
  
  mx = 0.5+(cos(t1) * 0.3);
  my = 0.5+(sin(t1) * 0.5); 

  theta = PI2 * time(0.25);
  resetTransform();
  rotate(theta);
}

// vectors for calculation
var mx,my;
var pr,pg,pb;
var dotp;
export function render2D(index,x,y) {
  pr = x; pg = y; pb = mx;
  
  // perturb coords w/our time-based function a few times
 //  and use the result as RGB color.   This is a common
 // GLSL shader trick.  The upside is that additive color
 // mixing is trivial, the downside is that precise control
 // of output color is much more work.  Here, I don't even try.
 // It's... pink.  And blue!
  for (var i = 0; i < 5; i++) {
    dotp = (pr * pr + pg * pg + pb * pb);
    pr = abs(pr)/dotp - 1;
    pb = abs(pg)/dotp - 1;
    pg = abs(pb)/dotp - my * chaosLevel;
  }
  
  // gamma correct and display
  rgb(pr*pr,pg*pg,pb*pb);
}
3 Likes