28:null 29:["$","title",null,{"children":"Wallpaper Groups | Claudio Esperança | Observable"}] 2e:T860,# Wallpaper Groups

From [Wikipedia](https://en.wikipedia.org/wiki/Wallpaper_group): >A *wallpaper group* (or plane symmetry group or plane crystallographic group) is a mathematical classification of a two-dimensional repetitive pattern, based on the symmetries in the pattern. Such patterns occur frequently in architecture and decorative art, especially in textiles and tiles as well as wallpaper. >The simplest wallpaper group, Group p1, applies when there is no symmetry other than the fact that a pattern repeats over regular intervals in two dimensions. In this notebook you can explore all 17 wallpaper groups interactively. The interface lets you select the group and an image sample that is used to produce a tiling with that particular group. For added flexibility, you can use the mouse to adjust the affine transformations of both the master grid (select the *master* interaction mode) and the image itself (select the *image*). Just click and drag the origin or the arrow tips of the respective coordinate axes (blue for master and red for image). Select *none* as interaction mode if you want to observe the result without the auxiliary grid lines. The set of built-in image samples include: 1. an image with the letter "F", which is useful to compare your results with the explanations in the [Wikipedia page](https://en.wikipedia.org/wiki/Wallpaper_group), and 2. a set of handwritten doodles borrowed from the [Google "Quick, draw" project](https://github.com/googlecreativelab/quickdraw-dataset); but you can also draw yourself a pattern with a built-in hand drawing tool, or upload a custom image (use one with transparent background for better results.)2f:Tf64,{ reset; let transforms; //const width = 800; const height = (width * 9) / 16; const ctx = DOM.context2d(width, height, 1); const canvas = ctx.canvas; const center = Vec(width / 2, height / 2); let master = makeFrame(center.x - 100, center.y - 100, 200); let ref = master.clone(); let imgRefFrame = master.clone(); let imgFrame = imgRefFrame.clone(); const imgCtx = DOM.context2d(200, 200, 1); const sampleImg = imgCtx.canvas; const refresh = () => { ctx.clearRect(0, 0, width, height); const tile = mode.value == "tile"; ctx.strokeStyle = "gray"; ctx.lineWidth = 0.5; let slaves = makeTiling( master, transforms, iterations.value, -width * 1, -height * 1, width * 2, height * 2 ); let instancing = makeTransformFromDiagrams(imgRefFrame, imgFrame); //makeTransformFromDiagrams(imgFrame, master); let imgOrigin = imgRefFrame.points[0]; for (let d of slaves) { let t = makeTransformFromDiagrams(master, d).mult(instancing); ctx.save(); ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f); ctx.drawImage(sampleImg, imgOrigin.x, imgOrigin.y); ctx.restore(); if (mode.value != "none") { d.draw(ctx); } } if (mode.value == "image") { let t = makeTransformFromDiagrams(imgRefFrame, imgFrame); ctx.lineWidth = 4; ctx.strokeStyle = "white"; imgFrame.draw(ctx); ctx.lineWidth = 2; ctx.strokeStyle = "red"; imgFrame.draw(ctx); } else if (mode.value == "master") { ctx.lineWidth = 4; ctx.strokeStyle = "white"; master.draw(ctx); ctx.lineWidth = 2; ctx.strokeStyle = "blue"; master.draw(ctx); } }; async function loadImg() { let img; switch (sample.value) { case "f": img = await FileAttachment("sampleF@1.svg").image(); break; case "doodle": img = getDoodle(~~(Math.random() * 52)); //await FileAttachment("doodle.png").image(); break; case "hand drawing": img = handDrawing.value; break; case "custom": img = await customImgFile.value.image(); break; } imgCtx.clearRect(0, 0, 200, 200); imgCtx.drawImage(img, 0, 0, 200, 200); refresh(); } const groupCallback = () => { transforms = wg[group.value]; refresh(); }; groupCallback(); loadImg(); mode.addEventListener("input", refresh); iterations.addEventListener("input", refresh); group.addEventListener("input", groupCallback); invalidation.then(() => { mode.removeEventListener("input", refresh); iterations.removeEventListener("input", refresh); group.removeEventListener("input", groupCallback); }); canvas.onmousedown = (e) => mode.value == "master" ? master.mouseDown(e) : mode.value == "image" ? imgFrame.mouseDown(e) : 0; canvas.onmouseup = (e) => mode.value == "master" ? master.mouseUp(e) : mode.value == "image" ? imgFrame.mouseUp(e) : 0; canvas.onmousemove = (e) => { if (!e.buttons) return; if ( (mode.value == "master" && master.mouseMove(e)) || (mode.value == "image" && imgFrame.mouseMove(e)) ) { refresh(); } }; const sampleCallback = (e) => { loadImg(); }; const handDrawingCallback = (e) => { if (sample.value == "hand drawing") loadImg(); }; const customImageFileCallback = (e) => { if (sample.value == "custom") loadImg(); }; sample.addEventListener("input", sampleCallback); handDrawing.addEventListener("input", handDrawingCallback); customImgFile.addEventListener("input", customImageFileCallback); invalidation.then(() => { sample.removeEventListener("input", sampleCallback); handDrawing.removeEventListener("input", handDrawingCallback); customImgFile.removeEventListener("input", customImageFileCallback); }); return canvas; }30:T444,// // Returns one of the 52 doodles in https://github.com/googlecreativelab/quickdraw-dataset/raw/master/preview.jpg // getDoodle = { let d = await FileAttachment("doodlepreview.jpg").image(); let ctx = DOM.context2d(d.width, d.height, 1); ctx.drawImage(d, 0, 0); let src = ctx.getImageData(0, 0, d.width, d.height); const [rows, cols] = [4, 13]; return function (imgIndex) { let ctx = DOM.context2d(128, 128, 1); let dst = ctx.createImageData(128, 128); imgIndex = imgIndex % (rows * cols); let row = Math.trunc(imgIndex / cols); let col = imgIndex % cols; for (let y = 0; y < 128; y++) { let srcOffset = ((y + row * 128) * d.width + col * 128) * 4; let dstOffset = y * 128 * 4; for (let x = 0; x < 128; x++) { let white = (dst.data[dstOffset++] = src.data[srcOffset++]); dst.data[dstOffset++] = src.data[srcOffset++]; dst.data[dstOffset++] = src.data[srcOffset++]; dst.data[dstOffset++] = (white < 200) * src.data[srcOffset++]; } } ctx.putImageData(dst, 0, 0); return ctx.canvas; }; }31:Tb65,// // A Diagram is a drawing comprising points and vectors. This is // used to implement coordinate frames that can be adjusted with the mouse // class Diagram { constructor() { this.points = []; this.rays = []; } clone() { let d = new Diagram(); for (let p of this.points) d.addPoint(p.clone()); for (let { ipoint, v } of this.rays) d.addRay(ipoint, v.clone()); return d; } transform(m) { const d = new Diagram(); for (let p of this.points) d.addPoint(m.applyPoint(p)); for (let { ipoint, v } of this.rays) d.addRay(ipoint, m.applyVector(v)); return d; } addPoint(p) { const n = this.points.length; this.points.push(p); return n; } addRay(ipoint, v) { const n = this.rays.length; this.rays.push({ ipoint, v }); return n; } mouseDown(event) { this.selectedRay = null; this.selectedPoint = null; let mouse = Vec(event.offsetX, event.offsetY); this.mouse = mouse; for (let ray of this.rays) { let { ipoint, v } = ray; const p = this.points[ipoint]; const q = p.add(v); if (q.dist(mouse) < 8) { this.selectedRay = ray; return true; } } for (let p of this.points) { if (p.dist(mouse) < 8) { this.selectedPoint = p; return true; } } return false; } mouseMove(event) { let ray = this.selectedRay; let mouse = Vec(event.offsetX, event.offsetY); let u = mouse.sub(this.mouse); this.mouse = mouse; if (ray) { ray.v = ray.v.add(u); return true; } else { let point = this.selectedPoint; if (point) { point.set(point.add(u)); return true; } } return false; } mouseUp(event) { this.selectedRay = null; this.selectedPoint = null; } draw(ctx, options = {}) { const { pointSize = 8, arrowSize = 10, alternateArrowTypes = true } = options; let even = false; for (let { ipoint, v } of this.rays) { even = !even; const p = this.points[ipoint]; const q = p.add(v); ctx.beginPath(); if (even || !alternateArrowTypes) ctx.arc(q.x, q.y, pointSize / 2, 0, Math.PI * 2); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); if (!even || !alternateArrowTypes) { const u = v.normalize(); const u1 = u.rotate(Math.PI * 0.9).scale(arrowSize); ctx.lineTo(...q.add(u1).array()); const u2 = u.rotate(-Math.PI * 0.9).scale(arrowSize); ctx.moveTo(q.x, q.y); ctx.lineTo(...q.add(u2).array()); } ctx.stroke(); } for (let p of this.points) { ctx.beginPath(); for (let [dx, dy] of [ [-1, 1], [1, 1], [1, -1], [-1, -1] ]) { ctx.lineTo(p.x + (dx * pointSize) / 2, p.y + (dy * pointSize) / 2); } ctx.closePath(); ctx.stroke(); } } }32:T4e9,// // Creates a collection of frame diagrams starting from the master // diagram and 'flood filling' the plane with copies transformed by // transforms. The process is repeated iteration times at most, but // frames lying outside the rectangle [xmin, ymin, xmax, ymax] are discarded // function makeTiling(master, transforms, iterations, xmin, ymin, xmax, ymax) { let canonical = makeFrame(0, 0, 1); let instancing = makeTransformFromDiagrams(canonical, master); let grid = new PointMap(); let tiles = [master]; const add = (batch) => { let nextBatch = []; for (let t0 of batch) { for (let t1 of transforms) { let t = t1.mult(t0); let d = makeDiagramFromMatrix(t).transform(instancing); let p = d.points[0] .add(d.points[0].add(d.rays[0].v)) .add(d.points[0].add(d.rays[1].v)) .scale(1 / 3); if (!grid.has(p)) { if (p.x >= xmin && p.x <= xmax && p.y >= ymin && p.y <= ymax) { tiles.push(d); nextBatch.push(t); grid.set(p, d); } } } } return nextBatch; }; let batch = [new Matrix()]; for (let i = 0; i < iterations && batch.length > 0; i++) { batch = add(batch); } return tiles; }33:Tb6d,// // Wallpaper group transformation sets // wg = ({ p1: [ makeTranslation(Vec(1, 0)), makeTranslation(Vec(0, 1)), makeTranslation(Vec(-1, 0)), makeTranslation(Vec(0, -1)) ], p2: [ makeRotation(Vec(0.5, 0), 180), makeRotation(Vec(0.5, 1), 180), makeRotation(Vec(0, 0.5), 180), makeRotation(Vec(1, 0.5), 180) ], pm: [ makeTranslation(Vec(0, 1)), makeTranslation(Vec(0, -1)), makeReflection(Vec(0, 0), Vec(1, 0)), makeReflection(Vec(1, 0), Vec(1, 0)) ], pg: [ makeTranslation(Vec(0, 1)), makeTranslation(Vec(0, -1)), makeGlide(Vec(0, 0.5), Vec(1, 0.5), Vec(1, 0)), makeGlide(Vec(0, 0.5), Vec(-1, 0.5), Vec(1, 0)) ], cm: [ makeReflection(Vec(0, 0), Vec(0, 1)), makeReflection(Vec(0, 1), Vec(0, 1)), makeGlide(Vec(0, 0.5), Vec(1, 0.5), Vec(1, 0)), makeGlide(Vec(0, 0.5), Vec(-1, 0.5), Vec(1, 0)) ], pmm: [ makeRotation(Vec(0, 0), 180), makeRotation(Vec(1, 0), 180), makeRotation(Vec(0, 1), 180), makeRotation(Vec(1, 1), 180), makeReflection(Vec(0, 0), Vec(0, 1)), makeReflection(Vec(0, 0), Vec(1, 0)), makeReflection(Vec(0, 1), Vec(0, 1)), makeReflection(Vec(1, 0), Vec(1, 0)) ], pmg: [ makeRotation(Vec(0, 0.5), 180), makeRotation(Vec(1, 0.5), 180), makeReflection(Vec(0, 0), Vec(0, 1)), makeReflection(Vec(0, 1), Vec(0, 1)) ], pgg: [ makeRotation(Vec(1.5, 0.5), 180), makeRotation(Vec(-0.5, 0.5), 180), makeRotation(Vec(0.5, 1.5), 180), makeRotation(Vec(0.5, -0.5), 180), makeGlide(Vec(0, 0), Vec(1, 0), Vec(1, 0)), makeGlide(Vec(0, 1), Vec(1, 1), Vec(1, 0)), makeGlide(Vec(0, 0), Vec(0, 1), Vec(0, 1)), makeGlide(Vec(1, 0), Vec(1, 1), Vec(0, 1)) ], cmm: [ makeRotation(Vec(0, 0), 180), makeRotation(Vec(0.5, 0.5), 180), makeReflection(Vec(0, 0), Vec(1, 0)), makeReflection(Vec(0, 0), Vec(0, 1)) ], p4: [ makeRotation(Vec(0, 0), 90), makeRotation(Vec(1, 1), 90), makeRotation(Vec(1, 0), 180), makeRotation(Vec(0, 1), 180) ], p4m: [ makeRotation(Vec(0, 1), 90), makeRotation(Vec(1, 0), 90), makeReflection(Vec(0.5, 0.5), Vec(1, 1)) ], p4g: [makeReflection(Vec(0.5, 0.5), Vec(1, 1)), makeRotation(Vec(0, 0), 90)], p3: [ makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120), makeRotation(Vec(0, 0), 120) ], p3m1: [ makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120), makeRotation(Vec(0, 0), 120), makeReflection(Vec(0.5, 0), Vec(1, 0)) ], p31m: [ makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120), makeRotation(Vec(0, 0), 120), makeReflection(Vec(0.5, 0), Vec(0, 1)) ], p6: [ makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120), makeRotation(Vec(0, 0), 60) ], p6m: [ makeRotation(Vec(0.5, Math.sqrt(3) / 6), 120), makeRotation(Vec(0, 0), 60), makeReflection(Vec(0.5, 0), Vec(1, 0)), makeReflection(Vec(0.5, 0), Vec(0, 1)) ] })34:[{"id":"e9ffca87c5c9306238af50631fa197a37dcf4e69ad16e6fbc8ccf542d3364ca877fb59420d25c4bbcb98abdbbf9d16e05c61af5591b9b23c8d7c6c8c0019f042","href":"https://static.observableusercontent.com/files/e9ffca87c5c9306238af50631fa197a37dcf4e69ad16e6fbc8ccf542d3364ca877fb59420d25c4bbcb98abdbbf9d16e05c61af5591b9b23c8d7c6c8c0019f042","name":"doodlepreview.jpg","type":"image/jpeg","lastModified":1636214362847.863,"size":93486},{"id":"abb4db315651be82c6c2661146f126f5d8ad52c4d36f668822998ba065bcfc071d450f8ce7e87c28ee3592508ff0d3a0755714c57753e78a1bda40b10cad6415","href":"https://static.observableusercontent.com/files/abb4db315651be82c6c2661146f126f5d8ad52c4d36f668822998ba065bcfc071d450f8ce7e87c28ee3592508ff0d3a0755714c57753e78a1bda40b10cad6415","name":"sampleF@1.svg","type":"image/svg+xml","lastModified":1636060590894.74,"size":1176},{"id":"f3960ef66dc3c19fb7aa5bf8b8818beb82f463514049a4ed4dee47785cdc9a3cfe30a6f58f1c9ad2493693a2d43ed5f4f4b4fd6e192fb3ab325c17c5108dd957","href":"https://static.observableusercontent.com/files/f3960ef66dc3c19fb7aa5bf8b8818beb82f463514049a4ed4dee47785cdc9a3cfe30a6f58f1c9ad2493693a2d43ed5f4f4b4fd6e192fb3ab325c17c5108dd957","name":"download (6).png","type":"image/png","lastModified":1636224335450.922,"size":52540},{"id":"2c0ff7d7775aef107ea34353cf3b82e20b558280b2a22f70866f4d998cd6720a9977a9f8aedaa484874ab0b51b173bfc7fb40eda51820bc89f62da2106ac5710","href":"https://static.observableusercontent.com/files/2c0ff7d7775aef107ea34353cf3b82e20b558280b2a22f70866f4d998cd6720a9977a9f8aedaa484874ab0b51b173bfc7fb40eda51820bc89f62da2106ac5710","name":"download (4).png","type":"image/png","lastModified":1636224335622.781,"size":88093},{"id":"019212c9d224d3730a007603f6eab73f91b6cdc81e5518c751637906804232a570df31211dd356aec61a992fe07c3415cf0fcc035443cf1a256ad9c1791eab29","href":"https://static.observableusercontent.com/files/019212c9d224d3730a007603f6eab73f91b6cdc81e5518c751637906804232a570df31211dd356aec61a992fe07c3415cf0fcc035443cf1a256ad9c1791eab29","name":"download (2).png","type":"image/png","lastModified":1636224335686.17,"size":93094},{"id":"c7ee71c5224ce5b641e2c0268d3f280101c2d2921c0ea1e77e9b1ef2a971b5d1f9c9bb6ed89a866f5ca50023510e38c42747431ef0118fac45749cfe87a4ca17","href":"https://static.observableusercontent.com/files/c7ee71c5224ce5b641e2c0268d3f280101c2d2921c0ea1e77e9b1ef2a971b5d1f9c9bb6ed89a866f5ca50023510e38c42747431ef0118fac45749cfe87a4ca17","name":"download (5).png","type":"image/png","lastModified":1636224335686.601,"size":151280},{"id":"fbdacd9d808fd204745f3c69e84f27b03e5c474cf06afacd54009b47a49133ed85c868c2b92fdb2264b9bb80236d167d5f5ae42bc496840d5a932c40db47ed47","href":"https://static.observableusercontent.com/files/fbdacd9d808fd204745f3c69e84f27b03e5c474cf06afacd54009b47a49133ed85c868c2b92fdb2264b9bb80236d167d5f5ae42bc496840d5a932c40db47ed47","name":"download (7).png","type":"image/png","lastModified":1636224335751.45,"size":269015},{"id":"06f6a1a78e54307c2c7bbb345a91522caf75b599200447869f11ed35149eca8aa68307b7f4a2fefc0945204e24ed213b1d3ee68ad19921101895cca464792a2f","href":"https://static.observableusercontent.com/files/06f6a1a78e54307c2c7bbb345a91522caf75b599200447869f11ed35149eca8aa68307b7f4a2fefc0945204e24ed213b1d3ee68ad19921101895cca464792a2f","name":"download (3).png","type":"image/png","lastModified":1636224335697.617,"size":208411},{"id":"e2db0c52d1d7f0588b8848f41dd76dc87c31b136874e2dd35b7fb3da5e5706710be352082729aa8714aaf80c72db39fff46297efdb7d235477af73a1799fc314","href":"https://static.observableusercontent.com/files/e2db0c52d1d7f0588b8848f41dd76dc87c31b136874e2dd35b7fb3da5e5706710be352082729aa8714aaf80c72db39fff46297efdb7d235477af73a1799fc314","name":"download (1).png","type":"image/png","lastModified":1636224335875.827,"size":169712},{"id":"c19bccc750702be9ee89c0e19946b6b3e0d4053d7798379b6dda671b1b4baf02d9eb263c50d932c3b1bc6e452d790b4fe6e015c4fe165405d7c28eee4e4c46ae","href":"https://static.observableusercontent.com/files/c19bccc750702be9ee89c0e19946b6b3e0d4053d7798379b6dda671b1b4baf02d9eb263c50d932c3b1bc6e452d790b4fe6e015c4fe165405d7c28eee4e4c46ae","name":"download.png","type":"image/png","lastModified":1636224336256.384,"size":700075}] 2c:{"id":"f23364aaf37956ce","slug":"wallpaper-groups","title":"Wallpaper Groups","thumbnail":"3295a883dba21fa62a587daaccb59a15d1e3ca7f00148211458c27bbdcbf8300","access_level":"public","create_time":"$D2021-08-09T20:05:26.873Z","update_time":"$D2022-05-30T14:49:19.463Z","view_time":null,"first_public_time":"$D2021-11-06T18:59:14.399Z","has_unpublished_edits":null,"fork":false,"stars":6,"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":658,"publish_version":658,"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":[{"id":"986d0527eeb806ea","reply_to_id":null,"content":"this is so awesome","create_time":"$D2023-03-19T05:47:02.699Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ea758880c408a4d3","login":"strawberrys","name":"coco petals","avatar_url":"https://avatars-next.observableusercontent.com/63ba2585baf71559c9ea6dbe1e303976cbd4cafc2272a31d1d3c1c3f4f0e767c","tier":null}},{"id":"6f97fa0be2f60cd3","reply_to_id":"986d0527eeb806ea","content":"I also had a lot of fun with it!","create_time":"$D2023-03-19T14:47:04.044Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"cfe04ce599907bfc","slug":"generative-art","title":"Generative Art","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Wallpaper Groups","cells":[{"id":0,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"group = {\n let g = Inputs.radio(Object.keys(wg), {\n label: \"Wallpaper group\",\n value: \"p1\"\n });\n g.style.maxWidth = `${width + \"px\"}`;\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"mode = Inputs.radio([\"master\", \"image\", \"none\"], {\n label: \"Interaction mode\",\n value: \"master\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"sample = Inputs.radio([\"f\", \"doodle\", \"hand drawing\", \"custom\"], {\n label: \"Sample Image\",\n value: \"f\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"customImgFile = Inputs.file({\n label: \"Custom image file\",\n accept: \".png,.jpg,.jpeg,.svg\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nhandDrawing = {\n let md = miniDraw({ width: 200, height: 200 });\n md.style.width = \"800px\";\n md.style.top = \"-20px\";\n md.style.left = \"20px\";\n md.value.style.background = \"white\";\n let button = HideInput(\"hand drawing tool\", md, {\n pop: true\n });\n button.children[2].style.visibility = \"hidden\";\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"\n### (some additional controls)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof reset = Inputs.button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"iterations = Inputs.range([1, 100], {\n label: \"Iterations\",\n step: 1,\n value: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"
\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"getDoodle(~~(Math.random()*52))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"//\n// Builds a diagram with one point and two vectors\n//\nfunction makeDiagramFromFrame(p, u, v) {\n const d = new Diagram();\n const o = d.addPoint(p);\n d.addRay(0, u);\n d.addRay(0, v);\n return d;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"//\n// Builds a diagram from a Matrix\n//\nfunction makeDiagramFromMatrix(M) {\n return makeDiagramFromFrame(Vec(M.e, M.f), Vec(M.a, M.b), Vec(M.c, M.d));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"//\n// Builds a Matrix from a frame diagram\n//\nfunction makeMatrixFromDiagram(d) {\n return makeMatrix(d.points[0], d.rays[0].v, d.rays[1].v);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"function makeFrame(x0, y0, sz) {\n return makeDiagramFromFrame(Vec(x0, y0), Vec(sz, 0), Vec(0, sz));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"//\n// Returns a Matrix where the columns are u, v and p respectively\n//\nfunction makeMatrix (p, u, v) {\n return new Matrix(u.x, u.y, v.x, v.y, p.x, p.y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"//\n// Returns a Matrix that transforms point p0, vectors u0 and v0 into\n// point p1, vectors u1 and v1\n//\nfunction makeTransform(p0, u0, v0, p1, u1, v1) {\n let A = makeMatrix(p0, u0, v0);\n let B = makeMatrix(p1, u1, v1);\n return B.mult(A.inverse());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"//\n// Assuming src and dst are diagrams with one point for the origin and two vectors\n// for the two axes, returns a transformation thant maps src into dst\n//\nfunction makeTransformFromDiagrams(src, dst) {\n return makeTransform(\n src.points[0],\n src.rays[0].v,\n src.rays[1].v,\n dst.points[0],\n dst.rays[0].v,\n dst.rays[1].v\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"//\n// A n matrix that effects a translation by vector v\n//\nfunction makeTranslation(v) {\n return Matrix.translate(v.x, v.y);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"//\n// A rotation matrix around a point\n//\nfunction makeRotation(p, degrees) {\n const ang = (degrees / 180) * Math.PI;\n return Matrix.translate(p.x, p.y)\n .mult(Matrix.rotate(ang))\n .mult(Matrix.translate(-p.x, -p.y));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"//\n// A reflection matrix with p as a fixed point and mapping\n// vector axis to -axis\n//\nfunction makeReflection(p, axis) {\n let axis2 = Vec(-axis.y, axis.x);\n return makeTransform(p, axis, axis2, p, axis.scale(-1), axis2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"//\n// A glide reflection matrix, i.e, a composition of a reflection about an axis\n// and a translation\nfunction makeGlide(p, q, axis) {\n let axis2 = Vec(-axis.y, axis.x);\n return makeTransform(p, axis, axis2, q, axis, axis2.scale(-1));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"//\n// A hash map of points\n//\nclass PointMap extends Map {\n constructor(...args) {\n super(...args);\n }\n static hash(point) {\n return Math.round(point.x * 1000) + \",\" + Math.round(point.y * 1000);\n }\n has(point) {\n return super.has(PointMap.hash(point));\n }\n set(point, value) {\n return super.set(PointMap.hash(point), value);\n }\n get(point) {\n return super.get(PointMap.hash(point));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"//mutable debug = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { Vec, Matrix } from \"@esperanc/2d-geometry-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"import { miniDraw } from \"@esperanc/mini-draw\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"import { HideInput } from \"@esperanc/range-input-variations\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"