• 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!

  • I'd probably do E.mapInPlace(buffer,buffer,function(x){r­eturn x-8}) : http://www.espruino.com/Reference#l_E_ma­pInPlace

    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.

  • 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)
    
  • 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);
    }
    
  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

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

Posted by Avatar for n00b @n00b

Actions