Les fonctions de dessin
Pour les fonctions de dessin des hexagones, je me suis basé sur des fonctions présentes dans ce CodePen, trouvé via ce thread Stack Overflow.
La fonction de dessin de l’anneau se présente comme suit :
/**
* @param {integer} cx - Coordonnée X du centre de l'anneau
* @param {integer} cy - Coordonnée Y du centre de l'anneau
* @param {integer} r1 - Rayon interne de l'anneau
* @param {integer} r2 - Rayon externe de l'anneau
* @param {integer} value - Valeur du digit
*/
function outerHex(cx,cy,r1,r2,value) {
var PI2 = Math.PI*2;
var rotationAdjustment = -90 * Math.PI/180;
var sidecount = 6;
for (var i = 0; i < sidecount; i++) {
var startAngle = PI2/sidecount*i+rotationAdjustment;
var endAngle = PI2/sidecount*(i+1)+rotationAdjustment;
var cos0 = Math.cos(startAngle);
var sin0 = Math.sin(startAngle);
var cos1 = Math.cos(endAngle);
var sin1 = Math.sin(endAngle);
ctx.beginPath();
ctx.moveTo(cx+r1*cos0, cy+r1*sin0);
ctx.lineTo(cx+r2*cos0, cy+r2*sin0);
ctx.lineTo(cx+r2*cos1, cy+r2*sin1);
ctx.lineTo(cx+r1*cos1, cy+r1*sin1);
ctx.closePath();
/*
Si la valeur du digit est supérieure ou égale au "rang" du segment de l'anneau,
on l'affiche en noir
*/
if(value >= (i + 1)) {
ctx.fillStyle = '#000';
} else {
ctx.fillStyle = '#d4d4d4';
}
ctx.fill();
}
}
La fonction de dessin de l’hexagone central est la suivante :
/**
* @param {integer} cx - Coordonnée X du centre de l'hexagone
* @param {integer} cy - Coordonnée Y du centre de l'hexagone
* @param {integer} radius - Rayon de l'hexagone
* @param {integer} value - Valeur du digit
*/
function innerHex(cx, cy, radius, value) {
var startAngle = -90;
var edges = 6;
var angle = 360/edges;
ctx.beginPath();
for (var i = 0; i <= edges; i++) {
var a = ((angle*i)+startAngle)*(Math.PI/180);
var x = cx + radius * Math.cos(a);
var y = cy + radius * Math.sin(a);
ctx.lineTo(x, y);
}
/*
Si la valeur du digit est supérieure ou égale à 7,
on affiche l'hexagone en noir
*/
if(value == 7) {
ctx.fillStyle = '#000'
} else {
ctx.fillStyle = '#d4d4d4';
}
ctx.fill();
}
Chaque partie de l’heure étant constituée de deux digits, je créé une fonction qui fait appel deux fois à chacune des deux fonctions présentées ci-dessus. De plus, la conversion en octal se fait dans cette fonction.
/**
* @param {integer} decX - Coordonnée X du centre des dizaines
* @param {integer} decY - Coordonnée Y du centre des dizaines
* @param {integer} unitX - Coordonnée X du centre des unités
* @param {integer} unitY - Coordonnée Y du centre des unités
* @param {integer} outerRadius - Rayon externe de l'anneau
* @param {integer} innerRadius - Rayon interne de l'anneau
* @param {integer} singleRadius - Rayon de l'hexagone central
* @param {integer} partValue - Valeur de la partie d'heure
*/
function drawPart(decX, decY, unitX, unitY, outerRadius, innerRadius, singleRadius, partValue) {
// Conversion en octal
var octValue = partValue.toString(8);
var octUnit = octValue % 10; // on récupère l'unité
var octDec = Math.floor(octValue / 10); // on récupère la dizaine
// On dessine le digit des dizaines
innerHex(decX, decY, singleRadius, octDec);
outerHex(decX, decY, innerRadius, outerRadius, octDec);
// On dessine le digit des unités
innerHex(unitX, unitY, singleRadius, octUnit);
outerHex(unitX, unitY, innerRadius, outerRadius, octUnit);
}