Graphics buffer: trying to "fade out" an uint8array / best (fastest) way to manipulate pixels

[espruino-discuss]

Posted at 2018-05-27 by n00b

Hi,

I'm playing with an 8x8 neopixel matrix. I want to do a pixel slideshow by loading images out from a server over time. I'd love to have a fade to black transition before moving to the next image. Anyone knows what's the most performant way to do this? Right now I'm doing a setInterval that loops the uint8array buffer (buffer.forEach) and multiply each index value with a gradual value every tick. This is super slow tho.

Thanks!

[gfwilliams]

Posted at 2018-05-27 by @gfwilliams

I'd probably do E.mapInPlace(buffer,buffer,function(x){return x-8}) : http://www.espruino.com/Reference#l_E_mapInPlace

I think that's probably going to be one of the faster methods.

If you make sure you use Uint8ClampedArray then any value less than 0 won't wrap so will just end up at 0.

[gfwilliams]

Posted at 2018-05-27 by @gfwilliams

You could also use a 256 element precomputed lookup table I believe:

var lut = new Uint8Array(256);
for (var i=0;i<256,i++) lut[i] = i*0.8;
// ... then in a loop ...
E.mapInPlace(buffer,buffer,lut)

[espruino-discuss]

Posted at 2018-05-27 by n00b

Thanks Gordon! mapInPlace sure is much faster. Here's my fade code with callback:

function fade(b, direction, callback) {
  var m = 1;
  var clone = new Uint8Array(b.length);
  clone.set(b);
  var interval = setInterval(function () {
    if(direction===0){
      E.mapInPlace(b, clone, function (x) {
        return x * m;
      });
    }else{
      E.mapInPlace(b, clone, function (x) {
        return x - (x * m);
      });
    }
    
    m *= direction===0?0.85:0.95;
    leds.buffer = clone;
    leds.flip();
    if (m <= (direction===0?0.01:0.1)) {
      clearInterval(interval);
      if (callback) {
        callback();
      }
      E.mapInPlace(b, clone, function (x) {
        return direction===0?0:x;
      });
      leds.buffer = clone;
      leds.flip();
    }
  }, 10);
}