2b:null 2c:["$","title",null,{"children":"Lattices in the Plane | Christopher Henn | Observable"}] 31:Tbe0,{ const svg = d3.select(html` `); const drag = d3.drag() .on('start', function() { const color = this.id === 'w1' ? red : blue; this.setAttribute('fill', d3.color(color).darker(0.5).toString()); }) .on('drag', function() { const x = d3.event.x; const y = d3.event.y; const id = this.id; if (id === 'w1') { mutable w1 = [+fx.invert(x).toFixed(2), +fy.invert(y).toFixed(2)]; d3.select(this).attr('cx', x).attr('cy', y); svg.select("line.w1").attr('x2', x).attr('y2', y); svg.select("text.w1") .attr('x', x + 10) .attr('y', y) .text(`(${mutable w1[0].toFixed(2)}, ${mutable w1[1].toFixed(2)})`); } else if (id === 'w2') { mutable w2 = [+fx.invert(x).toFixed(2), +fy.invert(y).toFixed(2)]; d3.select(this).attr('cx', x).attr('cy', y); svg.select("line.w2").attr('x2', x).attr('y2', y); svg.select("text.w2") .attr('x', x + 10) .attr('y', y) .text(`(${mutable w2[0].toFixed(2)}, ${mutable w2[1].toFixed(2)})`); } }) .on('end', function() { const color = this.id === 'w1' ? red : blue; this.setAttribute('fill', color); }); svg.select("#w1").call(drag); svg.select("#w2").call(drag); return svg.node(); }32:[] 2f:{"id":"c44e40aefb11032c","slug":"what-is-a-lattice","title":"Lattices in the Plane","thumbnail":"f903229923cd3a1d7ee45ff89a61ac390d3c744ec649b136c69b28447807f4cf","access_level":"public","create_time":"$D2018-04-08T15:31:47.856Z","update_time":"$D2018-05-02T21:55:37.736Z","view_time":null,"first_public_time":"$D2018-04-08T19:48:26.010Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f3428374116cf9e8","login":"chnn","name":"Christopher Henn","avatar_url":"https://avatars-next.observableusercontent.com/78bb870dc1a41660b957b0e3e7c72e7a1393fc8fc056e370a3d26079dff4b2c9","tier":"starter_2024"},"version":706,"publish_version":706,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1d31c67ff33b8b2","login":"chnn","name":"Christopher Henn","avatar_url":"https://avatars-next.observableusercontent.com/78bb870dc1a41660b957b0e3e7c72e7a1393fc8fc056e370a3d26079dff4b2c9","tier":null}],"members":[{"type":"individual","id":"c1d31c67ff33b8b2","login":"chnn","name":"Christopher Henn","avatar_url":"https://avatars-next.observableusercontent.com/78bb870dc1a41660b957b0e3e7c72e7a1393fc8fc056e370a3d26079dff4b2c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lattices in the Plane","cells":[{"id":0,"value":"md`# Lattices in the Plane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Let ${tex`B`} be a real ${tex`2 \\times 2`} matrix with columns ${tex`\\textcolor{${red}}{\\omega_1}`} and ${tex`\\textcolor{${blue}}{\\omega_2}`}. The __lattice in ${tex`\\mathbb{R}^2`} generated by ${tex`B`}__ is the set of points\n\n${tex.block`B(\\mathbb{Z}^2) = \\{ Bx : x \\in \\mathbb{Z}^2\\} = \\{ m\\;\\textcolor{${red}}{\\omega_1} + n\\;\\textcolor{${blue}}{\\omega_2} : m, n \\in \\mathbb{Z} \\}.`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`For example, suppose that\n${tex.block`B = \\begin{pmatrix} \\textcolor{${red}}{${w1[0].toFixed(2)}} & \\textcolor{${blue}}{${w2[0].toFixed(2)}} \\\\ \\textcolor{${red}}{${w1[1].toFixed(2)}} & \\textcolor{${blue}}{${w2[1].toFixed(2)}}\\end{pmatrix}.`}\n\nThen the columns of ${tex`B`} define two vectors in the plane:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"md`These vectors are called the **generators of ${tex`B(\\mathbb{Z}^2)`}**. The lattice ${tex`B(\\mathbb{Z}^2)`} is the set of black points in the follow visualization:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"{\n const vs = [[b1[0][0], b1[1][0], red], [b1[0][1], b1[1][1], blue]];\n const ctx = planeContext();\n \n ctx.fillStyle = \"black\"; \n ctx.beginPath();\n for (let [x, y] of latticePoints(b1, 30)) {\n ctx.moveTo(fx(x), fy(y));\n ctx.arc(fx(x), fy(y), 2.5, 0, 2 * Math.PI);\n }\n ctx.fill();\n\n ctx.lineWidth = 2;\n ctx.font = `14px ${font}`;\n ctx.textBaseline = \"middle\";\n for (let [x, y, color = \"black\"] of vs) {\n ctx.strokeStyle = color;\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(fx(0), fy(0));\n ctx.lineTo(fx(x), fy(y));\n ctx.stroke();\n ctx.moveTo(fx(x), fy(y));\n ctx.arc(fx(x), fy(y), 5, 0, 2 * Math.PI);\n ctx.fill();\n }\n \n ctx.lineWidth = 4;\n ctx.strokeStyle = highlight;\n ctx.moveTo(fx(hx), fy(hy));\n ctx.beginPath();\n ctx.arc(fx(hx), fy(hy), 10, 0, 2 * Math.PI);\n ctx.stroke();\n \n ctx.fillStyle = \"black\"; \n ctx.beginPath();\n ctx.moveTo(fx(0), fy(0));\n ctx.arc(fx(0), fy(0), 2.5, 0, 2 * Math.PI);\n ctx.fill();\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`Every point in this lattice is some integer linear combination of the vectors ${tex`\\textcolor{${red}}{\\omega_1}`} and ${tex`\\textcolor{${blue}}{\\omega_2}`}. Adjust integers ${tex`m`} and ${tex`n`} below to find a point in the lattice:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"tex.block`${m}\\; \\textcolor{${red}}{\\omega_1} ${n >= 0 ? \"+\" : \"\"} ${n}\\; \\textcolor{${blue}}{\\omega_2} = \\textcolor{${highlight}}{(${hx.toFixed(2)}, ${hy.toFixed(2)})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof m = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"import { transpose, latticePoints } from \"@chnn/the-modular-flow-in-tex-mathcal-l-and-tex-mathbb-h\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"blue = \"#54a0ff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"red = \"#ee5253\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"highlight = \"#ffa801\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"mutable w1 = [0.1, 1.7]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"mutable w2 = [0.8, 0.2]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"b1 = transpose([w1, w2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"hx = b1[0][0] * m + b1[0][1] * n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"hy = b1[1][0] * m + b1[1][1] * n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"font = \"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"w = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"h = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"domain = [[-4, 4], [-4, 4]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"fx = d3.scaleLinear().domain(domain[0]).range([0, w])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"fy = d3.scaleLinear().domain(domain[1]).range([h, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"planeContext = () => {\n const ctx = DOM.context2d(w, h);\n \n ctx.strokeStyle = \"lightgray\";\n \n // x-axis\n ctx.beginPath();\n ctx.moveTo(0, fy(0));\n ctx.lineTo(w, fy(0));\n ctx.stroke();\n \n // y-axis\n ctx.beginPath();\n ctx.moveTo(fx(0), 0);\n ctx.lineTo(fx(0), h);\n ctx.stroke();\n \n return ctx;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"// {\n// const ps = [\n// {x: w1[0], y: w1[1], color: red, label: `(${w1[0]}, ${w1[1]})`},\n// {x: w2[0], y: w2[1], color: blue, label: `(${w2[0]}, ${w2[1]})`}\n// ]\n// const ctx = DOM.context2d(w, h);\n \n// ctx.strokeStyle = \"lightgray\";\n \n// // x-axis\n// ctx.beginPath();\n// ctx.moveTo(0, fy(0));\n// ctx.lineTo(w, fy(0));\n// ctx.stroke();\n \n// // y-axis\n// ctx.beginPath();\n// ctx.moveTo(fx(0), 0);\n// ctx.lineTo(fx(0), h);\n// ctx.stroke();\n\n// ctx.lineWidth = 2;\n// ctx.font = `14px ${font}`;\n// ctx.textBaseline = \"middle\";\n \n// for (const {x, y, color, label} of ps) {\n// ctx.strokeStyle = color;\n// ctx.fillStyle = color;\n// ctx.beginPath();\n// ctx.moveTo(fx(0), fy(0));\n// ctx.lineTo(fx(x), fy(y));\n// ctx.stroke();\n// ctx.moveTo(fx(x), fy(y));\n// ctx.arc(fx(x), fy(y), 5, 0, 2 * Math.PI);\n// ctx.fill();\n// ctx.fillText(fx(x), fy(y), label);\n// }\n\n// return ctx.canvas;\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"