Esiste un algoritmo per generare i pips su un die o su un domino?
So che di solito c'è un numero dispari di colonne e un numero pari di righe (a meno che il numero massimo di pips non sia una radice perfetta).
Inquestomomento,hounamappadiricercachememorizzadovesitrovanoipipsulviso,inbasealconteggio.Sedesiderivedereunesempioinesecuzionedelcodicequisotto,puoiprovarlo
Codice
var 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/1762224
function 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>