You are reading a single comment by @andrewg_oz and its replies. Click here to read the full conversation.
  • While developing my current Bangle app, I needed to use a larger font. In my case, the built-in 6x15 font, scaled x2. As expected, it looked a bit rough. I wondered if there was some way to automatically smooth things out without generating a 12x30 font and I came up with the proof-of-concept program below.

    In short, it adds extra pixels in black squares that have two adjacent white squares forming a 'corner'.

    It draws some sample text three times: the top is the base x1 scale text. Next is the xN native scaled-up rendering. The last is my smoothed scaled-up xN rendering, using the x1 render as the source.

    Tapping on the screen will cycle through the 7-bit ASCII characters. When all the characters are cycled, the scale increases by 1 and the characters start again.

    It's a bit slow, so would be better off implemented in C.

    Do what you like with it. I think it could reduce the need for large fonts.

    //    B   -> is drawn as
    //
    //                    BBBB
    //   ???         BBB  WBBB
    //   WB?  -> BB  WBB  WWBB
    //   ?W?     WB  WWB  WWWB
    //
    // source -> x2  x3   x4
    //
    // W=white
    // B=black
    // ?=any
    
    function process(x, y, dx, dy, scale, ox, oy) {
      var s, sx, sy;
      s = scale - 1;
      ox += x * scale;
      oy += y * scale;
      if (g.getPixel(x, y) != g.getColor()) {
        ox += (dx > 0) ? s : 0;
        oy += (dy > 0) ? s : 0;
        if (g.getPixel(x, y + dy) == g.getColor() && g.getPixel(x + dx, y) == g.getColor()) {
          for (sx = 0; sx < s; sx++) {
            for (sy = 0; (sx + sy) < s; sy++) {
              g.setPixel(ox - sx * dx, oy - sy * dy, g.getColor());
            }
          }
        }
      } else {
        g.fillRect(ox, oy, ox + s, oy + s);
      }
    }
    
    var ch = 33;
    var scale = 2;
    
    function draw() {
      var i, s = "";
      for (i = 0; i < 5; i++) {
        s += String.fromCharCode(ch);
        ch++;
        if (ch == 127) {
          break;
        }
      }
      g.clear();
      g.setFontAlign(-1, -1, 0);
      g.setFont6x15(1);
      g.drawString(s, 2, 2, true);
      g.setFont6x15(scale);
      g.drawString(s, 2 + scale, 20, true);
      for (var y = 2; y < 15; y++) {
        for (var x = 2; x < 35; x++) {
          process(x, y,  1,  1, scale, 0, 90);
          process(x, y, -1,  1, scale, 0, 90);
          process(x, y,  1, -1, scale, 0, 90);
          process(x, y, -1, -1, scale, 0, 90);
        }
      }
      if (ch == 127) {
        ch = 33;
        scale++;
      }
    }
    
    Bangle.on('touch', (zone, e) => {
      draw();
    });
    draw();
    
About

Avatar for andrewg_oz @andrewg_oz started