31:[{"id":"ecb944dfde55a122026586a0befb77af974c68886c3cd352d110b3fb91dba47cb9014390b975c83ca9ef0fe923b595074e2fb83d02999f424d507edb3e95dedf","href":"https://static.observableusercontent.com/files/ecb944dfde55a122026586a0befb77af974c68886c3cd352d110b3fb91dba47cb9014390b975c83ca9ef0fe923b595074e2fb83d02999f424d507edb3e95dedf","name":"Screen Shot 2021-03-26 at 12.20.46 PM.png","type":"image/png","lastModified":1616786467694.291,"size":47058}] 2f:{"title":"3D Pixel Art with three-elements","cells":[{"id":0,"value":"md`# 3D Pixel Art with three-elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`Got inspired by [KenShape](https://tools.kenney.nl/kenshape/) and wondered if I could so something basic with [three-elements](https://three-elements.hmans.co/). So naturally doing it here on Observable was my next step.\n\nClick a cell and it'll render in 3d on the right. You may need to zoom out a bit on the right to see everything. Still a Work In Progress ...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"container = {\n yield html`

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html`An example:\n${await FileAttachment(\"Screen Shot 2021-03-26 at 12.20.46 PM.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"tableRow = (cols) => {\n let retVal = html``;\n for(let i = 0; i < cols; i++){\n retVal.appendChild(html``)\n }\n return retVal;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"renderLeft = () => {\n const rows = 6;\n const cols = 6;\n \n let grid = html`\n

`\n for(let i = 0; i< rows; i++){\n grid.getElementsByTagName(\"table\")[0].appendChild(tableRow(cols));\n }\n grid.querySelector(\"table\").addEventListener('click', (e)=>{\n e.target.style.backgroundColor==\"black\"? e.target.style.backgroundColor=\"white\": e.target.style.backgroundColor=\"black\";\n document.getElementsByClassName(\"right\")[0].remove();\n document.getElementsByClassName(\"container\")[0].appendChild(renderRight())\n })\n \n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"renderRight = () => {\n return html`

\n\n\n\n \n \n ${genMeshes()}\n\n \n \n \n \n \n\n \n \n\n \n \n \n \n\n\n\n\n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"genMeshes = () => {\n let retVal = html``;\n for(let i = 0; i < 6; i++){\n for (let j = 0; j < 6; j++){\n if(document.getElementsByClassName(\"grid\")[0].getElementsByTagName(\"tr\")[j].getElementsByTagName(\"td\")[i].style.backgroundColor==\"black\"){\n retVal.appendChild(genMesh(i,j,-4))\n }\n }\n }\n return retVal;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"genMesh = (x,y,z)=>{\n return html`\n\n \n \n \n \n\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"{\n yield html`\n \n\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"{\n container.innerHTML = \"\"\n container.appendChild(renderLeft())\n container.appendChild(renderRight())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import('https://unpkg.com/three-elements@0.4.0-alpha.14/dist/index.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}