31:T44c,mainview = { const ctx = DOM.context2d(width, height, 1); let tiles = selectedTiles; let s = tileSize; let nx = ~~(width/s); let ny = ~~(height/s); let xmargin = (width-nx*s)/2; let ymargin = (height-ny*s)/2; let n = nx*ny; let m = []; let randomTile = () => [tiles[~~(Math.random()*tiles.length)], ~~(Math.random()*4)*Math.PI/2]; let newpic = function () { for (let i = 0; i < n; i++) { m [i] = randomTile(); } } newpic(); ctx.resetTransform(); for (let f = 0; ; f++) { // ctx.fillStyle = "#40ffff"; // ctx.fillRect (0,0,width,height); let i = 0; for (let ix = 0; ix < nx; ix++) { let x = xmargin+ix*s; for (let iy = 0; iy < ny; iy++) { let y = ymargin+iy*s; //if (Math.random()<0.0002) m[i] = randomTile(); let [t,a] = m [i++]; ctx.translate (x+s/2,y+s/2); ctx.rotate(a); ctx.translate (-(x+s/2),-(y+s/2)); ctx.drawImage (t, x, y, s, s); ctx.resetTransform(); } } yield ctx.canvas; await Promises.delay(delay*1000); newpic(); } }32:T5f4,function tile(drawing = "B M 0 0 L 1 0 L 0 1 F",width = tileSize, height = tileSize) { const ctx = DOM.context2d(width, height,1); ctx.fillStyle = backgroundColor; ctx.fillRect(0,0,width,height); ctx.fillStyle = foregroundColor; ctx.translate(width/2,height/2); ctx.scale(width/2,height/2); let cmds = drawing.split(" "); while (cmds.length > 0) { let c = cmds.shift().toUpperCase(); if (c == "B") { ctx.beginPath(); } else if (c == "M") { ctx.moveTo(parseFloat(cmds.shift()),parseFloat(cmds.shift())); } else if (c == "L") { ctx.lineTo(parseFloat(cmds.shift()),parseFloat(cmds.shift())); } else if (c == "A") { ctx.arc(parseFloat(cmds.shift()), // x parseFloat(cmds.shift()), // y parseFloat(cmds.shift()), // r parseFloat(cmds.shift())/180*Math.PI, // start angle parseFloat(cmds.shift())/180*Math.PI // end angle ); } else if (c == "C") { ctx.arc(parseFloat(cmds.shift()), // x parseFloat(cmds.shift()), // y parseFloat(cmds.shift()), // r parseFloat(cmds.shift())/180*Math.PI, // start angle parseFloat(cmds.shift())/180*Math.PI, // end angle true ); } else if (c == "F") { ctx.fill();} } return ctx.canvas; }33:[] 2f:{"title":"Homage to Athos Bulcão","cells":[{"id":0,"value":"md`# Homage to Athos Bulcão\n\nMade this inspired in a Google's doodle you can find [here](https://www.google.com/doodles/athos-bulcaos-100th-birthday)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"viewof backgroundColor = color({\n value: \"#aaffff\",\n title: \"Background Color\",\n //description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof foregroundColor = color({\n value: \"#404080\",\n title: \"Foreground Color\",\n //description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof tileSize = slider({\n min: 24, \n max: 96, \n step: 1, \n value: 60, \n title: \"Tile Size\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"viewof delay = slider({\n min: 1, \n max: 200, \n step: 1, \n value: 5, \n title: \"Refresh Delay\", \n description: \"Delay before computing another picture (in seconds)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof tileCheck = {\n let div = html``; \n let checks = [];\n function getValue () {\n div.value = [];\n for (let c of checks) {\n if (c.checked) div.value.push (+c.value)\n }\n mutable checkedTiles = div.value;\n }\n \n div.value = mutable checkedTiles.slice(0);\n \n let i = 1;\n for (let t of allTiles) {\n let checkdiv = html`

`;\n let checked = div.value.indexOf(i) >= 0 ? \"checked\" : \"\";\n let check = html``;\n checks.push(check);\n checkdiv.append(check);\n check.onclick = getValue;\n let label = html``;\n checkdiv.append(label);\n const ctx = DOM.context2d(tileSize+20, tileSize+5);\n ctx.drawImage(t, 0, 0, tileSize, tileSize);\n label.append(ctx.canvas);\n div.append(checkdiv);\n i++;\n }\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"mutable checkedTiles = [10,11] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"inputstyle = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"allTiles = [a,c,b,b2,d,d3,d4,d2,e,f,g,g2,g3,g4,h,i,z]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"selectedTiles = {\n let r = [];\n for (let i of tileCheck) {\n r.push (allTiles[i-1])\n }\n return r;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"a = tile()","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"b = tile(\"B M -0.2 -1 L 0.2 -1 L 0.2 1 L -0.2 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"b2 = tile(\"B M 0 -1 L 1 -1 L 1 1 L 0 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"c = tile(\"B M -1 -1 L -1 1 L 1 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"d = tile(\"B M -0.2 -1 L 0.2 -1 L 0.2 -0.2 L 1 -0.2 L 1 0.2 L -0.2 0.2 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"d4 = tile(\"B M -0.2 -1 L 1 -1 L 1 0.2 L -0.2 0.2 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"d2 = tile(\"B M 0 -1 L 1 -1 L 1 0 L 0 0 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"d3 = tile(\"B M -0.2 -1 L 0.2 -1 L 0.2 -0.2 L 1 -0.2 L 1 0.2 L 0.2 0.2 L 0.2 1 L -0.2 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"e = tile (\"B M 0 1 A 0 0 1 -90 90 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"f = tile (\"B M 1 0 A 1 0 1 90 270 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"g = tile (\"B M -1 -1 A -1 -1 2 0 90 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"g2 = tile (\"B M 1 1 A -1 -1 2 0 90 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"g3 = tile (\"B M 0.8 -1 A -1 -1 2 0 90 L -1 0.8 C -1 -1 1.8 90 0 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"g4 = tile (\"B M 0.8 -1 A 0 -1 1 0 180 L -0.8 -1 C 0 -1 0.8 180 0 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"h = tile (\"B M 0.5 0.5 A 0.5 0.5 0.5 0 360 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"i = tile (\"B M 1.1 1.1 A 2 0 1.41412 140 225 F M -1 -1 L -0.5 1 L -1 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"i2 = tile (\"B M 1 1 A 2 0 1.41412 135 224 F M -1 -1 L -0.5 1 L -1 1 F\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"z = tile(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"height = ~~(width * 9 / 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"import {slider,color,checkbox} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}