Espruino morphing numbers rendering based on `espruino/EspruinoDocs/examples/Morphing Clock.js`

morphingNumbers.js

/*<!-- Copyright (c) 2018 Gordon Williams. See the file LICENSE for copying permission. -->
 */
//
// based on https://github.com/espruino/EspruinoDocs/blob/master/examples/Morphing%20Clock.js */
//
// Made more size independent
//

/* Get array of lines from digit d to d+1.
 n is the amount (0..1)
 maxFive is true is this digit only counts 0..5 */
function getLines(d, n, maxFive) {
  var r = Math.PI*n/2;
  switch (d) {
    case "0": return [
      [n,0,1,0],
      [1,0,1,1],
      [1,1,1,2],
      [n,2,1,2],
      [n,1,n,2],
      [n,0,n,1]];
    case "1": return [
      [1-n,0,1,0],
      [1,0,1,1],
      [1-n,1,1,1],
      [1-n,1,1-n,2],
      [1-n,2,1,2]];
    case "2": return [
      [0,0,1,0],
      [1,0,1,1],
      [0,1,1,1],
      [0,1+n,0,2],
      [1,2-n,1,2],
      [0,2,1,2]];
    case "3": return [
      [0,0,1-n,0],
      [0,0,0,n],
      [1,0,1,1],
      [0,1,1,1],
      [1,1,1,2],
      [n,2,1,2]];
    case "4": return [
      [0,0,0,1],
      [1,0,1-n,0],
      [1,0,1,1-n],
      [0,1,1,1],
      [1,1,1,2],
      [1-n,2,1,2]];
    case "5": return maxFive ? [ // 5 -> 0
      [0,0,0,1],
      [0,0,1,0],
      [n,1,1,1],
      [1,1,1,2],
      [0,2,1,2],
      [0,2,0,2],
      [1,1-n,1,1],
      [0,1,0,1+n]] : [ // 5 -> 6
      [0,0,0,1],
      [0,0,1,0],
      [0,1,1,1],
      [1,1,1,2],
      [0,2,1,2],
      [0,2-n,0,2]];
    case "6": return [
      [0,0,0,1-n],
      [0,0,1,0],
      [n,1,1,1],
      [1,1-n,1,1],
      [1,1,1,2],
      [n,2,1,2],
      [0,1-n,0,2-2*n]];
    case "7": return [
      [0,0,0,n],
      [0,0,1,0],
      [1,0,1,1],
      [1-n,1,1,1],
      [1,1,1,2],
      [1-n,2,1,2],
      [1-n,1,1-n,2]];
    case "8": return [
      [0,0,0,1],
      [0,0,1,0],
      [1,0,1,1],
      [0,1,1,1],
      [1,1,1,2],
      [0,2,1,2],
      [0,1,0,2-n]];
    case "9": return [
      [0,0,0,1],
      [0,0,1,0],
      [1,0,1,1],
      [0,1,1-n,1],
      [0,1,0,1+n],
      [1,1,1,2],
      [0,2,1,2]];
    case ":": return [
      [0.4,0.4,0.6,0.4],
      [0.6,0.4,0.6,0.6],
      [0.6,0.6,0.4,0.6],
      [0.4,0.4,0.4,0.6],
      [0.4,1.4,0.6,1.4],
      [0.6,1.4,0.6,1.6],
      [0.6,1.6,0.4,1.6],
      [0.4,1.4,0.4,1.6]
      ];
    case ".": return [
      [0,0,0,0],
      [0,0,0,0],
      [0,0,0,0],
      [0,0,0,0],
      [0.4,1.4,0.6,1.4],
      [0.6,1.4,0.6,1.6],
      [0.6,1.6,0.4,1.6],
      [0.4,1.4,0.4,1.6]
      ];
  }
  return [];
}

/* Draw a transition between lastText and thisText.
 'n' is the amount - 0..1 */
function draw(x,y,s,st, lastText,thisText, n) {
  var sh = s>>1;
  var sq = sh>>1;
  for (var i=0;i<lastText.length;i++) {
    var lastCh = lastText[i];
    var thisCh = thisText[i];
    var ch, chn = n;
    if (lastCh!==undefined &&
        (thisCh-1==lastCh ||
         (thisCh==0 && lastCh==5) ||
         (thisCh==0 && lastCh==9)))
      ch = lastCh;
    else {
      ch = thisCh;
      chn = 0;
    }
    var l = getLines(ch,chn,lastCh==5 && thisCh==0);
    if (ch==":") x-=sq;
    if (ch==".") { x-=sq+sq; y+=sh; }
    l.forEach(function (c) {
      if (c[0]!=c[2]) // horiz
        this.fillRect(x+c[0]*s,y+c[1]*s-st,x+c[2]*s,y+c[3]*s+st);
      else if (c[1]!=c[3]) // vert
        this.fillRect(x+c[0]*s-st,y+c[1]*s,x+c[2]*s+st,y+c[3]*s);
    }, this);
    if (ch==":") x-=sq;
    if (ch==".") { x-=sq+sq; y-=sh; }
    x+=s+sh;
  }
  return x;
}

module.exports = draw;