31:T666,{ const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); const offsets = { triangle: 0, square: (w), hexagon: (w * 2), }; // Move the triangle up a bit just to be prettier const vOffsets = { triangle: -20, square: 10, hexagon: 10, }; // Base shapes ctx.fillStyle = 'lightgray'; ctx.lineWidth = 0; // triangle const tsize = sides.triangle; ctx.beginPath(); ctx.moveTo(offsets.triangle, tsize + vOffsets.triangle); ctx.lineTo(offsets.triangle + tsize / 2, tsize - 0.5 * Math.sqrt(3) * tsize + vOffsets.triangle); ctx.lineTo(offsets.triangle + tsize, tsize + vOffsets.triangle); ctx.closePath(); ctx.fill(); // square const spadding = (w - sides.square) / 2; ctx.fillRect(offsets.square + spadding, spadding + vOffsets.square, sides.square, sides.square); // Hexagon ctx.beginPath(); const angle = 2 * Math.PI / 6; const r = sides.hexagon; for (var i = 0; i < 6; i++) { ctx.lineTo( offsets.hexagon + centers.hexagon.x + r * Math.cos(angle * i), centers.hexagon.y + r * Math.sin(angle * i) + vOffsets.hexagon ); } ctx.closePath(); ctx.fill(); for (const shape of ['triangle', 'square', 'hexagon']) { // Samples ctx.fillStyle = 'red'; samples[shape].forEach(({x, y}) => { ctx.fillRect(offsets[shape] + x, y - 1 + vOffsets[shape], 1, 1) }); // Centers const {x, y} = centers[shape]; ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(x + offsets[shape], y + vOffsets[shape], 4, 0, Math.PI*2); ctx.fill(); } return md`*shape rendering*` }32:T5eb,{ // const ctx = canvas.getContext("2d"); // ctx.clearRect(0, 0, canvas.width, canvas.height); // const padding = 2; // const baseW = 300 + padding * 4; // const wr = canvas.width / baseW; // const offsets = { // triangle: padding, // square: (100 + padding * 2) * wr, // hexagon: (200 + padding * 3) * wr, // }; // const size = 100 * wr; // // Base shapes // ctx.fillStyle = 'lightgray'; // ctx.lineWidth = 0; // // square // ctx.fillRect(offsets.square, padding, size, size); // // triangle // ctx.beginPath(); // ctx.moveTo(offsets.triangle, size); // ctx.lineTo(offsets.triangle + size / 2, size - 0.5 * Math.sqrt(3) * size); // ctx.lineTo(offsets.triangle + size, size); // ctx.closePath(); // ctx.fill(); // // Hexagon // ctx.beginPath(); // const angle = 2 * Math.PI / 6; // const r = size / 2; // for (var i = 0; i < 6; i++) { // ctx.lineTo(offsets.hexagon + r + r * Math.cos(angle * i), padding + r + r * Math.sin(angle * i)); // } // ctx.closePath(); // ctx.fill(); // for (const shape of ['triangle', 'square', 'hexagon']) { // // Samples // ctx.fillStyle = 'red'; // samples[shape].forEach(({x, y}) => { // ctx.fillRect(offsets[shape] + x * wr, padding + y * wr - 1, 1, 1) // }); // // Centers // const {x, y} = samples.centers[shape]; // ctx.fillStyle = 'blue'; // ctx.beginPath(); // ctx.arc (x * wr + offsets[shape], y * wr, 4, 0, Math.PI*2); // ctx.fill(); }33:T88d,samples = { const count = Math.ceil(sampleCount); function pointDistance(p1, p2) { return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2); } function sign(p1, p2, p3) { return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y); } function pointInTriangle (pt, v1, v2, v3) { const d1 = sign(pt, v1, v2); const d2 = sign(pt, v2, v3); const d3 = sign(pt, v3, v1); const has_neg = (d1 < 0) || (d2 < 0) || (d3 < 0); const has_pos = (d1 > 0) || (d2 > 0) || (d3 > 0); return !(has_neg && has_pos); } function createSampleMapper(center) { return () => { const point = { x: Math.random() * w, y: Math.random() * w, }; point.distance = pointDistance(center, point); return point; } } // square const sqp = (w - sides.square) / 2; const square = new Array(count).fill(null) .map(createSampleMapper(centers.square)) .filter(pt => pt.x > sqp && pt.x < sqp + sides.square && pt.y > sqp && pt.y < sqp + sides.square ); // triangle const triVertexes = [ {x: 0, y: w}, {x: w/2, y: w - 0.5 * Math.sqrt(3) * w}, {x: w, y: w} ]; const triangle = new Array(Math.floor(count * 3 / 2)).fill(null) .map(createSampleMapper(centers.triangle)) .filter(pt => { const [v1, v2, v3] = triVertexes; return pointInTriangle(pt, v1, v2, v3); }); // hexagon const angle = 2 * Math.PI / 6; const r = sides.hexagon; const hexVertexes = new Array(6).fill(null).map((_, i) => { return { x: centers.hexagon.x + r * Math.cos(angle * i), y: centers.hexagon.y + r * Math.sin(angle * i) } }); const hexCenter = centers.hexagon; const hexTriangles = hexVertexes.map((pt, i) => { return [pt, hexVertexes[(i + 1) % 6], hexCenter] }); const hexagon = new Array(Math.floor(count * 3 / 2)).fill(null) .map(createSampleMapper(centers.hexagon)) .filter(pt => { for (const tri of hexTriangles) { const [v1, v2, v3] = tri; if (pointInTriangle(pt, v1, v2, v3)) return true; } return false; }); return { square, triangle, hexagon } }34:[] 2f:{"title":"Comparison of standard deviation from center in different tile shapes","cells":[{"id":0,"value":"# Comparison of standard deviation from center in different tile shapes\n\nThis notebook visualizes statistics of random point distance from the center of different tile shapes, demonstrating one reason hexagons might be considered the most compact shape (and the best for binning).","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"canvas = html`