30:T5bf,flag = { const {cos,sin,sqrt,round,min,PI}=Math; const {aspect,nstripe,aspect2,unionStripes,npoints,sratio}=design; const w=min(800,width); const h=round(w/aspect); let {red,white,blue} = colors; red = d3.color(d3.color(red).formatHsl()); blue = d3.color(d3.color(blue).formatHsl()); red.h += design.redAdjust, red=red.formatHex(); blue.h += design.blueAdjust, blue=blue.formatHex(); const c=DOM.context2d(w,h); c.fillStyle=white; c.fillRect(0,0,w,h); // Stripes. c.fillStyle=red; const stripeHeight=h/nstripe; for(let s=0; sPI*i/npoints); const xStar = phi.map((x,i)=>starRadius[i%2]*sin(x)); const yStar = phi.map((x,i)=>starRadius[i%2]*cos(x)); c.fillStyle=white; stars.map(([nx,dx,ny,dy])=>d3.cross(spacing(nx,dx),spacing(ny,dy))).flat() .forEach(([x,y])=>{ const [xc,yc] = [x*unionWidth, y*unionHeight]; c.beginPath(); c.moveTo(xc+xStar[n2-1], yc-yStar[n2-1]); for(let i=0; i\n ${inputs.map(I=>html`\n

\n ${I.label}\n \n \n

`)}\n `;\n form.randomize = ()=>{\n inputs.forEach(I=>form.elements[I.name].value=d3.randomUniform(I.min,I.max)());\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n form.reveal = ()=>{\n inputs.forEach(I=>form.elements[I.name].value=I.val);\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n const getValues= ()=>Object.fromEntries(inputs.map(I=>[I.name,parseFloat(form.elements[I.name].value)]));\n form.addEventListener(\"submit\", e=>e.preventDefault());\n form.addEventListener(\"change\", ()=>form.dispatchEvent(new CustomEvent(\"input\")));\n form.addEventListener(\"input\", ()=>form.value=getValues());\n form.randomize();\n form.value = getValues();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"more=md`Save your best guess before revealing the answer. Randomize to try again.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"save=DOM.download(await new Promise(resolve => flag.toBlob(resolve)), \"myflag.png\", \"Save PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"buttons=Inputs.button([\n [\"Randomize\", (viewof design).randomize],\n [\"Reveal Answer\", (viewof design).reveal]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"inputs=[\n {name:\"aspect\", label:\"width / height\", min:1.2, max:2.4, step:0.1, val:1.9},\n {name:\"nstripe\", label:\"# of stripes\", min:9, max:17, step:1, val:13},\n {name:\"aspect2\", label:\"blue width\", min:0.3, max:0.7, step:0.05, val:0.4},\n {name:\"unionStripes\", label:\"blue height\", min:4, max:10, step:1, val:7},\n {name:\"npoints\", label:\"star points\", min:4, max:11, step:1, val:5},\n {name:\"sratio\", label:\"star size\", min:0.4, max:1.0, step:0.05, val:0.8},\n {name:\"nstar1\", label:\"stars on top edge\", min:4, max:8, step:1, value:6},\n {name:\"nstar2\", label:\"stars on left edge\", min:4, max:8, step:1, value:5},\n {name:\"redAdjust\", label:\"red hue\", min:-15, max:30, step:5, value:0},\n {name:\"blueAdjust\", label:\"blue hue\", min:-20, max:25, step:5, value:0},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"function randomize() {\n document.querySelectorAll(\"form\").forEach(form=>{\n if(form.elements[1]?.name == \"range\") {\n const {min,max}=form.elements[1];\n form.value = d3.randomUniform(min,max)();\n form.dispatchEvent(new Event(\"input\"));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"spacing = (n,start) => Array.from({length:n},(_,i) => start + i).filter(i=>ii/n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"stars=[\n [design.nstar1,0.5,design.nstar2,0.5],\n [design.nstar1,1,design.nstar2,1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"colors = ({red: \"#bb133e\", white:\"#ffffff\", blue:\"#002147\"})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}