30:T498,drawBox = () => { const canvas = document.getElementById("canvas1"); const w = canvas.width = 320; const h = canvas.height = 320; const ctx = canvas.getContext('2d'); const baseWidth = 32; const baseHeight = 32; // ctx.drawImage(img, baseWidth * randomBody.x, baseHeight * randomBody.y, baseWidth, baseHeight, 0,0, 320,320); // sky // ctx.fillStyle = 'lightblue'; // ctx.fillRect(0, 0, w, h/2); // earth // ctx.fillStyle = 'green'; // ctx.fillRect(0, h/2, w, h); ctx.imageSmoothingEnabled = false; //ctx.drawImage(image, baseWidth * 10, baseHeight*10, baseWidth, baseHeight, 0,0, 320, 320) //ctx.drawImage(image, baseWidth * 12, baseHeight*14, baseWidth, baseHeight, 0,0, 32, 32) //ctx.drawImage(image, baseWidth * 63, baseHeight*1, baseWidth, baseHeight, 0,0, 32, 32) let cols = 64; let rows = 95; for(let i =0; i< 32; i++){ for(let j =0; j < 32; j++){ let rndCol = Math.floor(Math.random() * cols); let rndRow = Math.floor(Math.random() * rows); //ctx.drawImage(image, baseWidth * rndCol, baseHeight*rndRow, baseWidth, baseHeight, i*32,j*32, 32, 32) } } }31:[{"id":"fad190d71ed5ff01095cfc60b695fcea63e605f39888eb2a3099103b27137c06d287f0e37b8855ba9da8e0fce24e5e95cb95f2e19bd2d1e4e6c5f4b04206f4a6","href":"https://static.observableusercontent.com/files/fad190d71ed5ff01095cfc60b695fcea63e605f39888eb2a3099103b27137c06d287f0e37b8855ba9da8e0fce24e5e95cb95f2e19bd2d1e4e6c5f4b04206f4a6","name":"ProjectUtumno_full.png","type":"image/png","lastModified":1615268942201.694,"size":4274658}] 2e:{"title":"RPG Paint","cells":[{"id":0,"value":"md`# RPG Paint`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"view = {\n let canvas = html`\n

\n ${genViewPort()} \n

\n\n

Tiles

\n ${genPallette()}\n

\n Chosen\n

\n`\n yield canvas;\n image.querySelector(\"img\").setAttribute('crossOrigin', 'anonymous');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`Click a tile in the tools. The chosen tile shows up below. Click in the view to place a tile. Hold down \"SHIFT\" while clicking to place a tile without snapping to the grid.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import {Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"genViewPort = () =>{\n let vp = html`

`;\n let ctx = vp.getContext(\"2d\");\n \n let gridOptions = {\n color: '#f2f2f2',\n GridSize: 32,\n LinesSize: 1\n };\n let Height = vp.height;\n let Width = vp.width;\n ctx.strokeStyle = gridOptions.color;\n ctx.lineWidth = parseInt(gridOptions.LinesSize);\n let GridSize = 0;\n GridSize = parseInt(gridOptions.GridSize);\n for (let i = 0; i < Height; i += GridSize) {\n ctx.moveTo(0, i);\n ctx.lineTo(Width, i);\n ctx.stroke();\n }\n for (let i = 0; i < Width; i += GridSize) {\n ctx.moveTo(i, 0);\n ctx.lineTo(i, Height);\n ctx.stroke();\n }\n \n vp.addEventListener(\"click\", (e)=>{\n applyTileToView(e);\n })\n \n \n \n return vp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"genPallette = () => {\n let pallette = html`

`\n let rows = 95;\n let cols = 64;\n const baseWidth = 32;\n const baseHeight = 32;\n const img = image.querySelector(\"img\");\n \n for(let i = 0; i < rows; i++){\n for(let j = 0; j < cols; j++){\n let can = html`

`;\n let ctx = can.getContext(\"2d\")\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(img, baseWidth * j, baseHeight*i, baseWidth, baseHeight, 0,0, 64, 64)\n can.addEventListener(\"click\", ()=>{\n selectedTile(can.dataset.row, can.dataset.col, can)\n })\n pallette.appendChild(can);\n }\n }\n \n return pallette;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"selectedTile = (row, col, can) => {\n const ccanvas = document.querySelector(\"#chosencanvas\");\n let ctx= ccanvas.getContext(\"2d\");\n ctx.imageSmoothingEnabled = false;\n ctx.clearRect(0, 0, ccanvas.width, ccanvas.height);\n\n ctx.drawImage(can, 0,0,64,64, 0,0,64,64)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"applyTileToView = (e) => {\n const ccanvas = document.querySelector(\"#chosencanvas\");\n const vp = document.querySelector(\"#canvas1\");\n const elemLeft = vp.offsetLeft + vp.clientLeft;\n const elemTop = vp.offsetTop + vp.clientTop;\n let x = e.pageX - elemLeft - 14;\n let y = e.pageY - elemTop - 72;\n if(!e.shiftKey) {\n x = snapToGrid(x-16,32);\n y = snapToGrid(y-16,32);\n console.log(x,y)\n }\n \n let ctx = vp.getContext(\"2d\");\n ctx.drawImage(ccanvas, 0,0,64,64, x,y,32,32)\n genDownloadLink();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"genDownloadLink = () => {\n var dlImg = document.querySelector(\"#canvas1\").toDataURL(\"image/png\");\n var dlLink = document.getElementById(\"downloadable\");\n dlLink.download = \"rp-paint-save.png\";\n dlLink.href = dlImg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"snapToGrid = (val,gridSize) => {\n return gridSize * Math.round(val/gridSize);\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"image = html`\n

${await FileAttachment(\"ProjectUtumno_full.png\").image()}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"{\n let i = 0;\n // while (cycle) {\n //yield Promises.tick(1000, drawBox());\n // }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`## Credits \n\nRPG Image Tiles courtesy: https://opengameart.org/content/dungeon-crawl-32x32-tiles-supplemental\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}