2f:null 30:["$","title",null,{"children":"10 PRINT with SVG and | Claudio Esperança | Observable"}] 35:[{"id":"0031ae07a2da5a42e8d5a68fe3fec818d9ad38ca4e16b79d73d627b7d47677254946a600d6d67c923c03f68e98aab0271a62a6976dde9df6cfbe16e37c67ae99","href":"https://static.observableusercontent.com/files/0031ae07a2da5a42e8d5a68fe3fec818d9ad38ca4e16b79d73d627b7d47677254946a600d6d67c923c03f68e98aab0271a62a6976dde9df6cfbe16e37c67ae99","name":"t3.svg","type":"image/svg+xml","lastModified":1618316038163.817,"size":23556},{"id":"ba980c2f2fd5b1a473567c7f74e77900c466305ee7c4e8fc9907de4b47825e4fad2fc35fbb1148094b699f61edaa68351482c85a4f254e0bbfca2892d1c3e632","href":"https://static.observableusercontent.com/files/ba980c2f2fd5b1a473567c7f74e77900c466305ee7c4e8fc9907de4b47825e4fad2fc35fbb1148094b699f61edaa68351482c85a4f254e0bbfca2892d1c3e632","name":"t5.svg","type":"image/svg+xml","lastModified":1618316038174.804,"size":23892},{"id":"fcd1847e99f7bd7e574ab2ddbeaf795579d35328abcecf7c969771c33c2df2255beb959cb27a6a2c4bd512418df252e5e041ceeff83944cbc561c7a23615e307","href":"https://static.observableusercontent.com/files/fcd1847e99f7bd7e574ab2ddbeaf795579d35328abcecf7c969771c33c2df2255beb959cb27a6a2c4bd512418df252e5e041ceeff83944cbc561c7a23615e307","name":"t4.svg","type":"image/svg+xml","lastModified":1618316038143.068,"size":23904},{"id":"76c91e5f5004e16f1ecd218d43091c31925762835cf0341df4e43d9d95d02c068880503c1ffa9f5be988ba028ed9d46f8daa3b9dcf98879ba94a3398916ef634","href":"https://static.observableusercontent.com/files/76c91e5f5004e16f1ecd218d43091c31925762835cf0341df4e43d9d95d02c068880503c1ffa9f5be988ba028ed9d46f8daa3b9dcf98879ba94a3398916ef634","name":"t1.svg","type":"image/svg+xml","lastModified":1618316038168.967,"size":24816},{"id":"ec29443bce3470489b53f43f3b9bed93c87ca9eb49a517a37041dd7b440eb9c14de02a344e6e993555a9eb06a4d2d21724294f6eb616fa05e07a036c0d79d1e0","href":"https://static.observableusercontent.com/files/ec29443bce3470489b53f43f3b9bed93c87ca9eb49a517a37041dd7b440eb9c14de02a344e6e993555a9eb06a4d2d21724294f6eb616fa05e07a036c0d79d1e0","name":"t2.svg","type":"image/svg+xml","lastModified":1618316037801.937,"size":24276}] 33:{"id":"f340fb18659cc60b","slug":"10-print-with-svg-and-use","title":"10 PRINT with SVG and ","thumbnail":"07dd706b5f65cbd4f3da120fda582a14c38a2f97c90b7560161df2cbf1d3252b","access_level":"public","create_time":"$D2021-04-07T19:03:26.071Z","update_time":"$D2021-04-13T21:08:44.057Z","view_time":null,"first_public_time":"$D2021-04-13T14:01:32.966Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":612,"publish_version":612,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"cfe04ce599907bfc","slug":"generative-art","title":"Generative Art","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"10 PRINT with SVG and ","cells":[{"id":470,"value":"{\n const bkg = [\n FileAttachment(\"t1.svg\"),\n FileAttachment(\"t2.svg\"),\n FileAttachment(\"t3.svg\"),\n FileAttachment(\"t4.svg\"),\n FileAttachment(\"t5.svg\")\n ][~~(Math.random() * 5)];\n\n return html`

\n${md`# 10 PRINT with SVG and \\`\\``}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md` 🙄\nYes, yet another [10 PRINT](https://10print.org) notebook! The ideas of that seminal program is a favorite among creative coders and everybody should check the book. If you don't believe me, just type *10 print* in the Search box above...\n\nAnyways, here is some code that lets us explore quadrangular tilings in 10 PRINT style using transformations together with \\` tags in SVGs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`First, let us define an input for controling the size of each tile:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof sz = Range([5, 100], { label: \"Tile size\", step: 1, value: 20 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`Here's a tile containing a diagonal line:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"diag = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`We can repeat that code modifying the coordinates to create a tile with the diagonal going the other way:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`Another way of doing it is to create the second diagonal tile as a transformation of the first. For this, we can make a copy of the first tile with the \\`\\` tag. We refer to the original svg setting the \\`href\\` attribute to the id of that tile:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"svg`

`;\n let colorInput = html``;\n let checkBox = html``;\n ccombo.append(colorInput);\n ccombo.append(checkBox);\n colorInput.oninput = update;\n checkBox.oninput = update;\n colorSelectors.push(ccombo);\n });\n let colorList = SortableList(colorSelectors);\n let div = html`

`;\n div.append(colorList);\n function update() {\n div.value = colorList.value\n .filter(i => colorSelectors[i].querySelector('.checkBox').checked)\n .map(i => colorSelectors[i].querySelector('.colorInput').value);\n div.dispatchEvent(new CustomEvent('input'));\n }\n colorList.oninput = update;\n update();\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"viewof colorFunction = Radio(tileFunctions, {\n label: \"Color function\",\n format: d => d.name,\n value: tileFunctions[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"{\n let pic = svg`