Is there an algorithm to generate the pips on a die or domino?I know that there is usually an odd number of columns and even number of rows (unless the max number of pips is not a perfect root).At this time, I have a lookup map which stores where the pips are located on the face, based on the count. If you would like to see a running example of the code below, you can try it out on JSFiddle.Codevar faces = [  [0, 0, 0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 1, 0, 0, 0, 0],  [0, 0, 1, 0, 0, 0, 1, 0, 0],  [0, 0, 1, 0, 1, 0, 1, 0, 0],  [1, 0, 1, 0, 0, 0, 1, 0, 1],  [1, 0, 1, 0, 1, 0, 1, 0, 1],  [1, 0, 1, 1, 0, 1, 1, 0, 1],  [1, 0, 1, 1, 1, 1, 1, 0, 1],  [1, 1, 1, 1, 0, 1, 1, 1, 1],  [1, 1, 1, 1, 1, 1, 1, 1, 1]];// Main method(function() {  var rows = 3;  var columns = 3;  var canvasList = document.querySelectorAll('canvas[id^=die-]');  for (var i = 0; i < canvasList.length; i++) {    drawDie(canvasList[i].getContext('2d'), i, faces, rows, columns);  }}());function drawDie(context, count, faces, rows, columns) {  var width = context.canvas.clientWidth;  var height = context.canvas.clientHeight;  drawBackground(context, width, height);  if (count > 0) {    drawPips(context, width, height, count, faces, rows, columns);  }}function drawBackground(context, width, height) {  context.fillStyle = '#FFFFFF';  context.strokeStyle = '#FF0000';  roundRect(context, 0, 0, width, height, width * 0.2, true, true);}function drawPips(context, width, height, count, faces, rows, columns) {  var x = measure(width, columns, 0.05);  var y = measure(height, rows, 0.05);  var radius = Math.min(x.off, y.off) * 0.33;  var hue = randRange(0, 360);  var fill = hslToHex(hue, 0.85, 0.55);  var stroke = hslToHex(hue, 0.85, 0.33);  var pipMap = faces[count];  var index = 0;  for (var yPos = y.start; yPos < y.avail; yPos += y.off) {    for (var xPos = x.start; xPos < x.avail; xPos += x.off) {      if (pipMap[index++] === 1) {        drawPip(context, xPos, yPos, radius, fill, stroke);      }    }  }}function drawPip(context, x, y, radius, fill, stroke) {  context.beginPath();  context.arc(x, y, radius, 0, 2 * Math.PI, false);  context.fillStyle = fill;  context.fill();  context.lineWidth = 2;  context.strokeStyle = stroke;  context.stroke();}// http://stackoverflow.com/a/3368118/1762224function roundRect(ctx, x, y, width, height, radius, fill, stroke) {  if (typeof stroke == 'undefined') stroke = true;  if (typeof radius === 'undefined') radius = 5;  if (typeof radius === 'number') {    radius = {      tl: radius,      tr: radius,      br: radius,      bl: radius    };  } else {    var defaultRadius = {      tl: 0,      tr: 0,      br: 0,      bl: 0    };    for (var side in defaultRadius) {      radius[side] = radius[side] || defaultRadius[side];    }  }  ctx.beginPath();  ctx.moveTo(x + radius.tl, y);  ctx.lineTo(x + width - radius.tr, y);  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);  ctx.lineTo(x + width, y + height - radius.br);  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);  ctx.lineTo(x + radius.bl, y + height);  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);  ctx.lineTo(x, y + radius.tl);  ctx.quadraticCurveTo(x, y, x + radius.tl, y);  ctx.closePath();  if (fill) ctx.fill();  if (stroke) ctx.stroke();}function measure(length, partitions, inset) {  var pad = length * inset;  var avail = length - (pad * 2);  var off = avail / partitions;  var start = pad + (off / 2);  return {    length: length,    pad: pad,    avail: avail,    off: off,    start: start  };}function hslToRgb(h, s, l) {  var m1, m2, hue;  var r, g, b  if (s == 0) r = g = b = (l * 255);  else {    if (l <= 0.5) m2 = l * (s + 1);    else m2 = l + s - l * s;    m1 = l * 2 - m2;    hue = h / 360;    r = Math.round(hueToRgb(m1, m2, hue + 1 / 3));    g = Math.round(hueToRgb(m1, m2, hue));    b = Math.round(hueToRgb(m1, m2, hue - 1 / 3));  }  return [r, g, b];}function hueToRgb(m1, m2, hue) {  var v;  if (hue < 0) hue += 1;  else if (hue > 1) hue -= 1;  if (6 * hue < 1) v = m1 + (m2 - m1) * hue * 6;  else if (2 * hue < 1) v = m2;  else if (3 * hue < 2) v = m1 + (m2 - m1) * (2 / 3 - hue) * 6;  else v = m1;  return 255 * v;}function rgbToHex(r, g, b) {  return '#' + [].slice.apply(arguments).map(function(c) {    return (function(hex) {      return hex.length === 1 ? '0' + hex : hex;    }(Math.floor(c).toString(16)));  }).join('');}function hslToHex(h, s, l) {  return rgbToHex.apply(null, hslToRgb.apply(null, arguments));}function randRange(min, max) {    return Math.floor(Math.random() * (max - min + 1)) + min;}<canvas id=die-0 width=124 height=124></canvas><canvas id=die-1 width=124 height=124></canvas><canvas id=die-2 width=124 height=124></canvas><canvas id=die-3 width=124 height=124></canvas><canvas id=die-4 width=124 height=124></canvas><canvas id=die-5 width=124 height=124></canvas><canvas id=die-6 width=124 height=124></canvas><canvas id=die-7 width=124 height=124></canvas><canvas id=die-8 width=124 height=124></canvas><canvas id=die-9 width=124 height=124></canvas>
Generate pips on a die based on value
algorithms;javascript;graphics