31:T429,hexData = { var r_min = r_max*Math.sqrt(3)/2 var NQ = Math.ceil(w/r_min/3); var hexes = []; for (var qq=-9*NQ; qq<9*NQ; qq++){ for (var rr=-9*NQ; rr<9*NQ; rr++){ var ss = -qq - rr; var x = w/2 + r_max * (Math.sqrt(3) * qq + Math.sqrt(3)/2 * rr); var y = h/2 + r_max * ( 3./2 * rr); if ((x>(r_max))&(x<(w-r_max))&(y>(r_max))&(y<(h-r_max))){ hexes.push({q:qq, r:rr, s:ss, x:x+width/2-w/2, y:y+height/2-h/2}); } } } /* // plot individual hexes for (var hex of hexes){ if(hex.polygon != null){ context.fillStyle = palette[hex.polygon % 5] context.beginPath(); context.moveTo(hex.x,hex.y) for (var ii=1/6; ii<2.3; ii+=1/3) context.lineTo(hex.x+r_max*Math.cos(ii*Math.PI), hex.y+r_max*Math.sin(ii*Math.PI)) context.fill(); } } */ return hexes; //return context.canvas; }32:Te20,canvas2 = { await visibility(); const n = hexData.length*2; const points = Float64Array.from({length: n}, (_, i) => 10*Math.random() + (i & 1 ? height : width) / 2); const delaunay = new d3.Delaunay(points); const context = DOM.context2d(width, height); context.lineCap = "round"; const voronoi = delaunay.voronoi([0, 0, width, height]); for (let k = 0; k < 5500; ++k) { //context.clearRect(0, 0, width, height); context.fillStyle = "#eeeeee"; context.fillRect(0,0,width,height); for (var hex of hexData){ context.strokeStyle = "#aaaaaa"; context.fillStyle = "#ffffff"; context.beginPath(); for (var ii=1/6; ii<2.2; ii+=1/3) context.lineTo(hex.x+(r_max+0.5)*Math.cos(ii*Math.PI), hex.y+(r_max+0.5)*Math.sin(ii*Math.PI)) context.stroke(); context.fill(); context.fillStyle = "#aaaaaa"; context.beginPath(); context.arc(hex.x, hex.y, 5, 0, 2 * Math.PI); context.lineWidth = 2; context.strokeStyle = "#aaaaaa"; context.stroke(); } context.strokeStyle = "#aaaaaaa"; context.lineWidth = 9; context.beginPath(); for (var ii=0; ii> 1); const cellClipped = polygonClip(cell.reverse(), polygon.reverse()); if (cell === null) continue; const x0 = points[i], y0 = points[i + 1]; var [x1, y1] = d3.polygonCentroid(cellClipped); points[i] = x0 + (x1 - x0) * omega; points[i + 1] = y0 + (y1 - y0) * omega; const dist = Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2)); var NN = cellClipped.length; var AA = 0; for (var ii=0; ii<(NN-1); ii++){ AA += (cellClipped[ii][0]*cellClipped[(ii+1) % NN][1] - cellClipped[(ii+1) % NN][0]*cellClipped[ii][1])/2 } context.beginPath(); context.strokeStyle = "#30336b"; if(colorby == 'area'){ context.fillStyle = colorScale(Math.abs(AA)); }else if(colorby == 'movement'){ context.fillStyle = colorScale(Math.abs(dist)); }else{ context.fillStyle = "#ffffff00" } context.moveTo(cellClipped[0][0], cellClipped[0][1]); for (let j=0; j