You are reading a single comment by @Gordon and its replies. Click here to read the full conversation.
  • You're right, fillPoly gets the rounding totally wrong. Try this:

    g.drawPoly = function(p) {
      g.moveTo(p[p.length-2],p[p.length-1]);
      for (var i=0;i<p.length;i+=2)
        g.lineTo(p[i],p[i+1]);
    };
    
    function getSquare(r,x,y) {
      var poly = [];
      for (var i=0;i<4;i++) {
        var a = r + (i+0.5)*Math.PI*2/4;
        poly.push( 
            x + 20*Math.sin(a),
            y + 20*Math.cos(a)
          );
      }
      return poly;
    }
    
    g.clear();
    var r = 0.02;
    g.fillPoly(getSquare(r,32,32));
    g.drawPoly(getSquare(r,96,32));
    g.flip();
    

    That should be pretty easily fixable, and I bet it would improve the font rendering a lot.

    Edit: this is what's at fault: https://github.com/espruino/Espruino/blob/master/libs/graphics/graphics.c#L352

    By adding some rounding (+128) as you suggested matters can be improved a great deal. There's still a little more magic required though - in that little test I can get 3 edges of the square rendering right, but not all - so I'd definitely appreciate some input :)

    Also - thanks! This code has been around since 2014ish and nobody noticed fillPoly actually had rendering errors :)

About

Avatar for Gordon @Gordon started