# Analog Clocks - programming hint

• It's said that the essence of good Software Engineering is reuse (plagiarism?) so in developing my own analog clock faces, I have been looking through the code of many of the clocks in the BangleApps repository. In trying to get clock faces to render as quickly as possible, I found that the use of the Espruino graphics operation `transformVertices` from the builtin Graphics class helped enormously. Using the Github search facility, I found only two apps using the operation in BangleApps - neither are Analog Clocks - hence I hope the following example may be of interest. The example uses the the `transformVertices` operation in implementing the `drawRotRect` function used in the Beeb Clock (reuse in action).The function places a rectangle rotated around the centre of the clock dial at a parameterised distance from the centre of the clock. I have used it for the following Bold Clock influenced face: The following are the functions to draw the dial and the hands of this clock.

``````    var cx = g.getWidth()/2;
var cy = g.getHeight()/2

Graphics.prototype.drawRotRect = function(w, r1, r2, angle) {
var w2=w/2, h=r2-r1, theta=angle*Math.PI/180;
return this.fillPoly(this.transformVertices([-w­2,0,-w2,-h,w2,-h,w2,0],
{x:cx+r1*Math.sin(theta),y:cy-r1*Math.co­s(theta),rotate:theta}));
}

function dial() {
for (let a=0;a<360;a+=6)
if (a % 90 == 0)
g.setColor(g.theme.fg).drawRotRect(8,105­,120,a);
else if (a % 30 == 0)
g.setColor(g.theme.fg).drawRotRect(4,105­,120,a);
else
g.setColor(0.6,0.6,0.6).drawRotRect(2,11­0,120,a);
}

let hourHand = g.drawRotRect.bind(g,6,6,66);
let minuteHand = g.drawRotRect.bind(g,3,6,100);
let secondhand = g.drawRotRect.bind(g,2,3,100);
``````

This example uses a rectangle, however, the approach can just as easily be applied to polygons representing more complex hands.

• looks very interesting - thank you very much!

What always surprises me is the remark "Note: This is only available in !devices with low flash memory with !'Original' Espruino boards" at the end of many method descriptions - but the Bangle.js 2 is neither an original Espruino board nor has it low flash memory, right?