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


  • 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 ...
  • 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);
      var interval = setInterval(function () {
          E.mapInPlace(b, clone, function (x) {
            return x * m;
          E.mapInPlace(b, clone, function (x) {
            return x - (x * m);
        m *= direction===0?0.85:0.95;
        leds.buffer = clone;
        if (m <= (direction===0?0.01:0.1)) {
          if (callback) {
          E.mapInPlace(b, clone, function (x) {
            return direction===0?0:x;
          leds.buffer = clone;
      }, 10);
  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

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

Posted by Avatar for n00b @n00b