2e:null 2f:["$","title",null,{"children":"3D Pixel Art with three-elements | Andrew Wooldridge | Observable"}] 34:[{"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}] 32:{"id":"13b1641b6731db97","slug":"3d-pixel-art-with-three-elements","title":"3D Pixel Art with three-elements","thumbnail":"acf9d6f054acc6dd48a1d4a45a8b0c295ae40fd372c1393084c7f62c582a3560","access_level":"public","create_time":"$D2021-02-22T19:30:04.372Z","update_time":"$D2021-03-26T19:21:50.155Z","view_time":null,"first_public_time":"$D2021-02-22T19:44:38.564Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":116,"publish_version":116,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9b043a8a59100213","slug":"three-elements","title":"Three Elements","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"3D Pixel Art with three-elements","cells":[{"id":0,"value":"md`# 3D Pixel Art with three-elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"container = {\n yield html`

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"genMesh = (x,y,z)=>{\n return html`\n\n \n \n \n \n\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n yield html`\n \n\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n container.innerHTML = \"\"\n container.appendChild(renderLeft())\n container.appendChild(renderRight())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"