31:T18d4,canvas2 = { await visibility(); const n = hexData.length*2; const points = points_0.slice(); const delaunay = new d3.Delaunay(points); const context = DOM.context2d(w, h); const context_base = DOM.context2d(w, h); var color_background = palette.base; var color_polygonfill = palette.base; var color_shadow = palette.dark; var color_hexLines = d3.rgb(palette.base).darker(0.75); var color_cellLines = palette.dark; var color_cellLines = palette.base; if(colorby == 'nothingContrast'){ color_background = palette.dark; color_polygonfill = palette.dark; color_hexLines = d3.rgb(palette.dark).brighter(2); } context.lineCap = "round"; context.lineJoin = "round"; // create base canvas (all others will layer on top) context_base.fillStyle = color_background; context_base.fillRect(0,0,w,h); context_base.fillStyle = color_polygonfill; context_base.shadowColor = color_shadow; context_base.shadowBlur = m+r_max; context_base.beginPath(); for (var ii=0; ii> 1); const cellClipped = polygonClip(cell.reverse(), unionPolygon.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)); maxDist = Math.max(maxDist, dist); 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 } AA = Math.abs(AA); minArea = Math.min(minArea, AA); maxArea = Math.max(maxArea, AA); context.beginPath(); context.strokeStyle = color_cellLines; if(colorby == 'area'){ context.fillStyle = colorScale(AA); }else if(colorby == 'movement'){ context.fillStyle = colorScale(Math.abs(dist)); }else{ context.fillStyle = "#ffffff00" if(colorby == 'nothingContrast'){ context.fillStyle = palette.base+"ff"; context.strokeStyle = palette.dark; } } var myline = d3.line() .curve(d3.curveLinear) .x(d => d[0]) .y(d => d[1]) .context(context); //myline(cellClipped.slice((isGooey) ? 1 : 0)); //myline(removeDupes(cellClipped)); var deduped = removeDupes(cellClipped); var chaikinpoly = chaikin(deduped, chaikinIterations); chaikinpoly.push(chaikinpoly[0]); myline(chaikinpoly); //myline(chaikin(removeDupes(cellClipped), 3)) context.lineWidth = 3; context.fill(); context.stroke(); context.lineWidth = 2; if(centroids){ context.beginPath(); context.arc(points[i], points[i+1], 3, 0, 2 * Math.PI); context.fillStyle = color_cellLines; context.fill(); } } // if we good, if(progress){ context.fillStyle = color_cellLines; context.textAlign = 'left'; context.font = "30px Arial"; if (maxDist>0.02){ context.fillText("⏩", 10, 30); }else{ context.fillText("⏹", 10, 30); } if ((minArea>(.9999*hexarea))&(maxArea<(1.0001*hexarea))){ context.fillText("👍", 50, 30); }else{ context.fillText("👎", 50, 30); } } if (credits){ context.textAlign = 'end'; context.fillStyle = color_hexLines; context.font = "bold 14px Arial"; context.fillText("@mattdzugan", w-10, h-10); context.fillText("@relaxagons", w-10, h-28); } yield context.canvas; voronoi.update(); } // end time loop }32:T58e,maskpoly = { var mm; if(shape=='Circle'){ mm = d3.range(0, 6.283,0.01).map(x => [w/2+(h/2-r_max-m)*Math.cos(x), h/2+(h/2-r_max-m)*Math.sin(x)]) }else if(shape=='Oval'){ mm = d3.range(0, 6.283,0.01).map(x => [w/2+(w/2-r_max-m)*Math.cos(x), h/2+(h/2-r_max-m)*Math.sin(x)]) }else if(shape=='Rectangle'){ mm = [[w-r_max-m, r_max+m], [r_max+m, r_max+m], [r_max+m, h-r_max-m], [w-r_max-m, h-r_max-m]] }else if(shape=='Diamond'){ mm = [[w-r_max-m, h/2+r_max],[w-r_max-m, h/2-r_max], [w/2, r_max+m], [r_max+m, h/2-r_max], [r_max+m, h/2+r_max], [w/2, h-r_max-m]] }else if(shape=='Wave'){ var xs = d3.scaleLinear().domain([0, 2*Math.PI]).range([r_max+m, w-r_max-m]); var top = d3.range(0, 6.283,0.01).map(x => [xs(x), h/2-(h-r_max-m-2*h/3)-h/6*Math.sin(x)]) var bot = d3.range(0, 6.283,0.01).map(x => [xs(x), h/2+(h-r_max-m-2*h/3)-h/6*Math.sin(x)]) mm = bot.concat(top.reverse()); }else if(shape=='Hex1'){ mm = d3.range(0, 6.283,Math.PI/3).map(x => [w/2+(h/2-r_max-m)*Math.cos(x), h/2+(h/2-r_max-m)*Math.sin(x)]) }else if(shape=='Hex2'){ mm = d3.range(0, 6.283,Math.PI/3).map(x => [w/2+(h/2-r_max-m)*Math.cos(x+Math.PI/6), h/2+(h/2-r_max-m)*Math.sin(x+Math.PI/6)]) } return mm; }33:T7d4,palette = { if(paletteName == "A"){ return {base:"#edf6f9", dark:"#006d77", accnt1:"#83c5be", accnt2:"#ffddd2"} }else if(paletteName == "B"){ return {base:"#f4f1de", dark:"#3d405b", accnt1:"#81b29a", accnt2:"#f2cc8f"} }else if(paletteName == "C"){ return {base:"#f4f4f9", dark:"#000000", accnt1:"#586f7c", accnt2:"#b8dbd9"} }else if(paletteName == "D"){ return {base:"#ffffff", dark:"#353535", accnt1:"#284b63", accnt2:"#3c6e71"} }else if(paletteName == "E"){ return {base:"#f2e9e4", dark:"#22223b", accnt1:"#4a4e69", accnt2:"#c9ada7"} }else if(paletteName == "F"){ return {base:"#f4f3ee", dark:"#463f3a", accnt1:"#8a817c", accnt2:"#e0afa0"} }else if(paletteName == "G"){ return {base:"#fefae0", dark:"#283618", accnt1:"#606c38", accnt2:"#bc6c25"} }else if(paletteName == "H"){ return {base:"#ced4da", dark:"#212529", accnt1:"#495057", accnt2:"#f8f9fa"} }else if(paletteName == "I"){ return {base:"#d8dbe2", dark:"#1b1b1e", accnt1:"#a9bcd0", accnt2:"#58a4b0"} }else if(paletteName == "J"){ return {base:"#e8eddf", dark:"#242423", accnt1:"#cfdbd5", accnt2:"#f5cb5c"} }else if(paletteName == "K"){ return {base:"#fddac9", dark:"#5c374c", accnt1:"#ff8c61", accnt2:"#ce6a85"} }else if(paletteName == "L"){ return {base:"#c5e7dd", dark:"#184e77", accnt1:"#1e6091", accnt2:"#d9ed92"} }else if(paletteName == "M"){ return {base:"#edddd4", dark:"#283d3b", accnt1:"#197278", accnt2:"#c44536"} }else if(paletteName == "N"){ return {base:"#fecec2", dark:"#03071e", accnt1:"#6a040f", accnt2:"#f48c06"} }else if(paletteName == "O"){ return {base:"#f7f7ff", dark:"#495867", accnt1:"#577399", accnt2:"#fe5f55"} }else if(paletteName == "P"){ return {base:"#ffffff", dark:"#2d3142", accnt1:"#bfc0c0", accnt2:"#ef8354"} }else if(paletteName == "Q"){ return {base:"#fff0d1", dark:"#1f2041", accnt1:"#119da4", accnt2:"#4b3f72"} }else{ return {base:"#edf6f9", dark:"#006d77", accnt1:"#83c5be", accnt2:"#ffddd2"} } }34:[] 2f:{"title":"@relaxagons (Twitter Bot)","cells":[{"id":0,"value":"md`# [@relaxagons](https://twitter.com/relaxagons) (Twitter Bot)\nThis notebook is my development playground for the twitter bot @relaxagons.\n\nThe concept was derived form [this notebook](https://observablehq.com/@mattdzugan/lloyds-algorithm-regular-tilings), and frankly, the fact that [this tweet](https://twitter.com/MattDzugan/status/1359706810400276480) was so popular.\n\nA few mathematical principles at play here:\n- [Lloyd's Algorithm](https://en.wikipedia.org/wiki/Lloyd%27s_algorithm)\n- [Chaikin's Algorithm](https://observablehq.com/@pamacha/chaikins-algorithm)\n- [Voronoi Diagram](https://en.wikipedia.org/wiki/Voronoi_diagram)\n\n_note: A key difference between the twitter bot and this notebook: The bot will continuously generate animations until it finds one that reaches the \"perfect hexagonal tiling\". Simply put, **\"it onlys posts good GIFs\"**._\n\nIf you're interested in the actual boring code which handles the tweeting etc... check the [github repo](https://github.com/mattdzugan/relaxagons).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Parameters\nThis notebook exposes all of these parameters for interactive exploration. The twitter-bot however, selects them randomly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"w = width // 1024 for twitter","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"h = w/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"m = 30 // margin","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"viewof r_max = Range([15, 50], {value: 20, label: \"Radius of Hexagon\", step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof shape = Select([\"Circle\", \"Rectangle\", \"Oval\", \"Diamond\", \"Wave\", \"Hex1\", \"Hex2\"], {label: \"Shape\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"viewof omega = Range([0, 2], {value: Math.round(hexData.length/2)/100, label: \"omega\", step:0.01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof chaikinIterations = Range([0, 4], {value: 0, label: \"chaikin\", step:1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof centroids = Toggle({label: \"Show Centers?\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof colorby = Radio([\"area\", \"movement\", \"nothing\", \"nothingContrast\"], {label: \"Color Hexes by:\", value:\"area\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof paletteName = Select([\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\", \"K\", \"L\", \"M\", \"N\", \"O\", \"P\",\"Q\"], \n {label: \"Color Palette\", value: \"L\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"viewof credits = Toggle({label: \"Show Credits?\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"viewof progress = Toggle({label: \"Show Progress?\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"function chaikin(arr, num) {\n if (num === 0) return arr;\n const l = arr.length;\n const smooth = arr.map((c,i) => {\n return [\n [0.75*c[0] + 0.25*arr[(i + 1)%l][0],0.75*c[1] + 0.25*arr[(i + 1)%l][1]],\n [0.25*c[0] + 0.75*arr[(i + 1)%l][0],0.25*c[1] + 0.75*arr[(i + 1)%l][1]]\n ];\n }).flat();\n return num === 1 ? smooth : chaikin(smooth, num - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"function removeDupes(p){\n const t = .01;// threshold\n var p_out = [];\n p_out.push(p[0]);\n for(var ii=1; ii (Math.sqrt(Math.pow(x[0]-z[0],2)+Math.pow(x[1]-z[1],2))));\n var mindist = d3.min(dists);\n if(mindist>t){\n p_out.push(p[ii]);\n }\n }\n return p_out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"points_0 = Float64Array.from({length: hexData.length*2}, (_, i) => (r_max/-2)+r_max*Math.random() + (i & 1 ? h : w) / 2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"hexData = {\n \n var r_min = r_max*Math.sqrt(3)/2\n \n var NQ = Math.ceil(w/r_min/3);\n \n var hexes = [];\n for (var qq=-9*NQ; qq<9*NQ; qq++){\n for (var rr=-9*NQ; rr<9*NQ; rr++){\n var ss = -qq - rr;\n var x = w/2 + r_max * (Math.sqrt(3) * qq + Math.sqrt(3)/2 * rr);\n var y = h/2 + r_max * ( 3./2 * rr);\n if (d3.polygonContains(maskpoly, [x, y])){\n hexes.push({q:qq, \n r:rr, \n s:ss, \n x:x, \n y:y});\n }\n }\n }\n \n return hexes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"unionPolygon = {\n var myPolyUnion = hex2poly(hexData[0], r_max);\n for (var pp=1; pp