• Great combination... looking good!

    You can right away use fillCircle() without first using drawCircle();.

    You can simplify by:

    • fill red circle (with outer diameter)
    • draw green polygon (wedge... with outer diameter where you calculate the polygon coordinates)
    • fill black circle (with inner diameter)
    • draw the rest inside the black circle

    For filling a wedge you need only to calculate half the number of 'circle-points'.

    For calculation the points on the (outer) circle, use the trigonometric functions Math.sin() (and Math.cos()). For a smooth curve but not to over do, calculate the steps by dividing pi by the diameter of the circle in pixels. To make it fast, you can have a preset array that you calculate before hand (with some JS either in an html page in the browser or a program on your BangleJS that generates the array as literal / code upfront. And as you know, ou need to calculate actually only pi/4 and the rest you 'mirror'.

    Since there is no anti-aliasing, you can put rounded values into the array, which you may calculate a bit different: you take y and calc x (rounded) for half a quadrant and mirror the other three (3) quadrants.

    When it comes to drawing, you calculate how much of the pre-calculated array you have to use for the polygon.

    Besides @Gordon, I know that @JumJum and @MaBe have worked on circles and ellipses and stroke with.

  • Thank you so much for all the detailed information.
    I shall try doing it the way you have suggested.
    This would be the first time that I would be be applying trigonometric functions in real life application after learning them in high school :)
    Thanks a lot for directing me to that.

    Have a good Sunday evening!


Avatar for bppattan @bppattan started