Draw outlines similar to favicon

Automatically draw colorful outlines.

style.background = '#192a30';
px.frameRate = 10

const LEFT_COLOR =  0x02b787;
const RIGHT_COLOR =  0x8f2bca;
const MIDDLE_COLOR = 0xcac22b;
const spriteSheet = px.spriteSheet('/zver1.png');
const zver = spriteSheet.get(0, 0)
var loaded = false;
spriteSheet.onload( function() {
  loaded = true;
});

var frame = 0;
update = function() {
  if( !loaded )
    return;
  frame++;
  clear();
  var _x = frame % ( zver.width + 10 );
  for( var x = 0; x < _x; x++ ) {
    for( var y = 0; y < zver.height; y++ ) {
      var shouldColor = false,
        left = 0, right = 0;

      if( zver.getPoint( x + 1, y ) ) {
        shouldColor = true;

        // count how many right pixels are colored
        right = !!zver.getPoint( x + 1, y ) +
          !!zver.getPoint( x + 1, y - 1 ) +
          !!zver.getPoint( x + 1, y + 1 );
      }
      if( zver.getPoint( x - 1, y ) ) {
        shouldColor = true;

        // count how many left pixels are colored
        left = !!zver.getPoint( x - 1, y ) +
          !!zver.getPoint( x - 1, y - 1 ) +
          !!zver.getPoint( x - 1, y + 1 );
      }

      if( shouldColor ) {
        if( left > right ) {
          point( x, y, RIGHT_COLOR );
        } else {
          point( x, y, LEFT_COLOR );
        }
      }
    }
  }

  var colorList = [ LEFT_COLOR, MIDDLE_COLOR, RIGHT_COLOR ];
  for( var y = 0; y < zver.height - 1; y++ ) {
    var positions = [];
    for( var x = 0; x < _x; x++ ) {
      if( !getPoint( x, y ) && zver.getPoint( x, y + 1 ) ) {
        positions.push( x )
      } else if( positions.length ) {

        var count = positions.length;
        var terminatedLeft = !!zver.getPoint( positions[ 0 ] - 1, y ) ||
          !!getPoint( positions[ 0 ] - 1, y );
        var terminatedRight = !!zver.getPoint( positions[ count - 1 ] + 1, y ) ||
          getPoint( positions[ count - 1 ] + 1, y );

        if( terminatedLeft && !terminatedRight ) {
          positions.push( positions[ count - 1 ] + 1 );
          count++;
        }
        if( !terminatedLeft && terminatedRight ) {
          positions.unshift( positions[ 0 ] - 1 );
          count++;
        }

        for( var x2 = 0; x2 < count; x2++ ) {
          if( terminatedRight && !terminatedLeft ) {
            point( positions[ x2 ], y, LEFT_COLOR );
          } else if( terminatedLeft && !terminatedRight ) {
            point( positions[ x2 ], y, RIGHT_COLOR );
          } else if( !terminatedLeft && !terminatedRight ) {
            point( positions[ x2 ], y, colorList[ x2 / count * 3 | 0 ] );
          } else {
            point( positions[ x2 ], y, colorList[ ( x2 / count * 2 | 0 ) * 2 ] );
          }
        }

        positions.length = 0;
      }
    }

    sprite( zver );
  }
}

Let this creature go!