3e:null 3f:["$","title",null,{"children":"Structure de Quadrilatères | Evan Lyons | Observable"}] 45:T4bc,md`# Structure de Quadrilatères ![Black squares on a white background, overlaid in messier ways towards the top of the image.](https://i.pinimg.com/736x/31/81/67/318167bbac0731152deed7b7c31793f1--generative-art-resultat.jpg) Recently, I was at the ["Artistes et Robots"](https://www.grandpalais.fr/fr/evenement/artistes-robots) exhibition at the Grand Palais in Paris, and I stumbled across a lovely artwork by [Vera Molnár](https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r). Molnár was a pioneer of computer art, and on the wall in the gallery was one of her Structure de Quadrilatères, created with an algorithm, a plotter and pen. I can't find a picture of the exact one displayed in the exhibition on the web, but it looked a bit like the image above. I loved its simplicity and purity, and it seemed like it might be both fun and a good level of challenge to replicate to teach myself how Observable works. This notebook is me puzzling my way through that process, step-by-step. Scroll down to [see it in action](#eight_columns). I also [added some animation](#nine). If you have any questions or ideas for improvement then please drop me a line at [@duncangeere](http://www.twitter.com/duncangeere).`46:[] 43:{"id":"3516967aa4e5aa8a","slug":null,"title":"Structure de Quadrilatères","thumbnail":"5c96755cb059ec0f4f56b42ae0a6ad47a9bf796a904fc75549a0e07bfee51c19","access_level":"public","create_time":"$D2023-02-04T19:24:52.582Z","update_time":"$D2023-02-04T19:24:52.582Z","view_time":null,"first_public_time":"$D2023-02-04T19:24:52.582Z","has_unpublished_edits":null,"fork":{"id":"93882932ca4b792e","slug":"structure-de-quadrilateres","title":"Structure de Quadrilatères","owner":{"id":"c607a53945075181","login":"duncangeere","name":"Duncan Geere"}},"stars":0,"starred":false,"owner":{"type":"team","id":"144a295b8498cc0a","login":"e-lyons","name":"Evan Lyons","avatar_url":"https://avatars-next.observableusercontent.com/ccd7e9c97fa218e39a1918776acd8f39a4695753a9aab0e5292d4ec3d409a5ff","tier":"starter_2024","bio":"","following":false},"version":817,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e05ffd07deeb0dff","login":"e-lyons","name":"Evan Lyons","avatar_url":"https://avatars-next.observableusercontent.com/ccd7e9c97fa218e39a1918776acd8f39a4695753a9aab0e5292d4ec3d409a5ff","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e05ffd07deeb0dff","login":"e-lyons","name":"Evan Lyons","avatar_url":"https://avatars-next.observableusercontent.com/ccd7e9c97fa218e39a1918776acd8f39a4695753a9aab0e5292d4ec3d409a5ff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Structure de Quadrilatères","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"one = md`## 1. Squares\nFirst let's draw some regular squares on an svg.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"two = md`## 2. Programmatic Squares\nSo far, so hardcoded. Let's see if I can make this a bit more programmatic. I'll define some variables and then plot those.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Width of the SVG\ntwo_svgWidth = 440","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Height of the SVG\ntwo_svgHeight = 440","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"// Margin size between the squares\ntwo_margin = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"// Size of square we want\ntwo_squareSize = (two_svgWidth - (3*two_margin))/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"three = md`## 3. Generative Squares\nThat worked, and I can adjust the parameters easily enough. But I'm still hand-coding each square. Let's try and make it more generative, assuming two squares per line. First let's set the number of squares I want, their size and the margin, and generate the size of the SVG from that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// How many squares we want to plot\nthree_squares = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// How big the squares should be\nthree_squareSize = 160","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// Margin size\nthree_margin = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`Then the following are calculated from those variables:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"// Width of the SVG\nthree_svgWidth = (2 * three_squareSize) + (3 * three_margin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"// Height of the SVG. We use Math.ceil() here so we don't get remainders\nthree_svgHeight = ((Math.ceil(three_squares / 2)) * three_squareSize) + ((Math.ceil(three_squares / 2) + 1) * three_margin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`Now I need to calculate the positions of all the squares. Let's make an array of arrays! I'll need different code for odd and even squares, and I'll use a for loop to create the positions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"three_squarePositions = {\n let squarePositions = []\n for (let i = 0; i < three_squares; i++) {\n if (i % 2 == 0) { \n let x = three_margin;\n let y = ((Math.floor(i/2) + 1) *three_margin) + ((Math.floor(i/2) * three_squareSize)); \n squarePositions.push([x, y]);\n } else {\n let x = (three_margin*2) + three_squareSize;\n let y = ((Math.floor(i/2) + 1) * three_margin) + ((Math.floor(i/2) * three_squareSize));\n squarePositions.push([x, y]);\n } \n }\n return squarePositions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`Time to plot it! Here I'm going to use a charting library called D3 that makes the code much cleaner.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"three_svg = {\n const svg = DOM.svg(three_svgWidth, three_svgHeight);\n \n d3.select(svg)\n .selectAll(\"rect\")\n .data(three_squarePositions)\n .enter().append(\"rect\")\n .attr(\"x\", coords => coords[0])\n .attr(\"y\", coords => coords[1])\n .attr(\"width\", three_squareSize)\n .attr(\"height\", three_squareSize)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"four = md`## 4. Generative Squares v2 \nNice! That worked well, and the code is pretty simple thanks to D3. You'll notice I used the DOM module from the [Observable standard libraries](https://github.com/observablehq/notebook-stdlib#dom) in that last code block, rather than the HTML template literals as I did before, mostly because it's cleaner. \n\nBut maybe a better approach would be to define how many rows and columns I want, and then take advantage of Observable's knowledge of the screen width to fit them horizontally, and then generate the vertical sizes I need.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// Here's the page width\nwidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"// Number of rows\nfour_rows = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"// Number of columns\nfour_columns = 15","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"// Size of the margin\nfour_margin = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`Time to calculate the rest of the variables I need`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"// Calculate the size of each square based on the width, margin and number of columns\nfour_squareSize = (width - ((four_columns + 1) * four_margin)) / four_columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"// Calculate the height of the SVG based on the square size and number of rows we want\nfour_svgHeight = (four_squareSize * four_rows) + (four_margin * (four_rows + 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"md`Now I'll figure out the X and Y coords of all of those squares. An array of arrays could get complex with so many columns, so I'll make an array of objects instead, using a two nested for loops.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"four_squarePositions = {\n let squarePositions = [] ;\n for (let i = 0; i < four_columns; i++) {\n for (let j = 0; j < four_rows; j++) {\n // At this point in the code i represents the column number and j is the row number\n let square = {column: i, row: j, \n x: (four_margin * (i + 1) + four_squareSize * i),\n y: (four_margin * (j + 1) + four_squareSize * j)\n };\n squarePositions.push(square);\n }\n }\n return squarePositions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"md`Looks good. Time to plot it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"four_svg = {\n const svg = DOM.svg(width, four_svgHeight);\n \n d3.select(svg)\n .selectAll(\"rect\")\n .data(four_squarePositions)\n .enter().append(\"rect\")\n .attr(\"x\", square => square.x)\n .attr(\"y\", square => square.y)\n .attr(\"width\", four_squareSize)\n .attr(\"height\", four_squareSize)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"five = md`## 5. SVG Paths\nBeautiful! So I've got clean code that delivers as many squares of whatever size as I want. Now it's time to add some distortion as we go down the page. But there's a problem - by using SVG squares, they'll always be square and I want some non-90-degree angles. I need to recreate the previous code as SVG paths instead. Let's just make a few small squares using paths quickly to see how that's done.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`Now it's a simple enough matter to use the same variables from section four and modify the calculation code to figure out all four vertices of the paths rather than just the top left corner.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"five_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < four_columns; i++) {\n for (let j = 0; j < four_rows; j++) {\n // At this point in the code i represents the column number and j is the row number\n let square = {column: i, row: j, \n x1: (four_margin * (i + 1) + four_squareSize * i),\n y1: (four_margin * (j + 1) + four_squareSize * j),\n x2: (four_margin * (i + 1) + four_squareSize * (i + 1)),\n y2: (four_margin * (j + 1) + four_squareSize * j),\n x3: (four_margin * (i + 1) + four_squareSize * (i + 1)),\n y3: (four_margin * (j + 1) + four_squareSize * (j + 1)),\n x4: (four_margin * (i + 1) + four_squareSize * i),\n y4: (four_margin * (j + 1) + four_squareSize * (j + 1)) \n };\n squarePositions.push(square);\n }\n }\n return squarePositions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`Time to draw. Again, I'm just using a slightly modified version of the code from before.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"five_svg = {\n const svg = DOM.svg(width, four_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(five_squarePositions)\n .enter().append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"six = md`## 6. Distortion\nNow it's time to get those lines a bit jiggly. Let's write a function that perturbs the vertices of the square randomly with a magnitude based on the column number.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"perturber = (square) => {\n let magnitude = square.column * 2 // This line defines how the randomness spreads across the image\n let perturb = () => ((Math.random() - 0.5) * (magnitude * 3)); // The line defines the size of the randomness\n let wonkySquare = {column: square.column, row: square.row,\n x1: square.x1 + perturb(),\n x2: square.x2 + perturb(),\n x3: square.x3 + perturb(),\n x4: square.x4 + perturb(),\n y1: square.y1 + perturb(),\n y2: square.y2 + perturb(),\n y3: square.y3 + perturb(),\n y4: square.y4 + perturb() \n };\n return wonkySquare;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`Now let's modify our squarePositions array from the last step. You can run this cell multiple times to change the randomness.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"six_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < five_squarePositions.length; i++) {\n squarePositions.push(perturber(five_squarePositions[i]));\n };\n return squarePositions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`Time to draw them!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"six_svg = {\n const svg = DOM.svg(width, four_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(six_squarePositions)\n .enter()\n .append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"seven = md`## 7. Overlaid Squares\nFantastic! I've got squares that distort more the further you get along the columns. There's only one thing left to do, which is overlay the drawing multiple times as the column number increases.\n\nThe best way to do this is probably to add additional squares to the squarePositions array, so let's have a go at modifying that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"seven_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < five_squarePositions.length; i++) {\n squarePositions.push(perturber(five_squarePositions[i]))\n // This is the new bit - a for loop that runs a number of times equal to the column number minus one.\n for (let j = 0; j < five_squarePositions[i].column; j++) {\n squarePositions.push(perturber(five_squarePositions[i]));\n }\n };\n return squarePositions;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`Time to draw again!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"seven_svg = {\n const svg = DOM.svg(width, four_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(seven_squarePositions)\n .enter()\n .append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"eight = md`## 8. Inputs\nI've accomplished my goals, but it's a pain to scroll up to change the inputs when I want to change how the squares look and non-coders won't be able to find them easily, so I'll add some input sliders from Jeremy Ashkenas' [Grand Inputs Bazaar](https://beta.observablehq.com/@jashkenas/inputs).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`One of the joyful things about Observable notebooks is that you can put the cells in any order and they'll still work. This means I can get the variables, then draw the image, then calculate all the numbers that we need to draw the image, which sounds crazy but functions perfectly, look:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof eight_columns = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 10, \n title: \"Columns\", \n description: \"Number of columns to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"viewof eight_rows = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 4, \n title: \"Rows\", \n description: \"Number of rows to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"viewof eight_margin = slider({\n min: 1, \n max: 80, \n step: 1, \n value: 20, \n title: \"Margin\", \n description: \"Width of the gaps between the squares\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"eight_svg = {\n const svg = DOM.svg(width, eight_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(eight_perturbedSquares)\n .enter()\n .append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`Here are the numbers calculated from the variables above. The code is essentially unchanged from above, but you can click the arrow in the left column to see it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"eight_squareSize = (width - ((eight_columns + 1) * eight_margin)) / eight_columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"eight_svgHeight = (eight_squareSize * eight_rows) + (eight_margin * (eight_rows + 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"eight_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < eight_columns; i++) {\n for (let j = 0; j < eight_rows; j++) {\n let square = {column: i, row: j, \n x1: (eight_margin * (i + 1) + eight_squareSize * i),\n y1: (eight_margin * (j + 1) + eight_squareSize * j),\n x2: (eight_margin * (i + 1) + eight_squareSize * (i + 1)),\n y2: (eight_margin * (j + 1) + eight_squareSize * j),\n x3: (eight_margin * (i + 1) + eight_squareSize * (i + 1)),\n y3: (eight_margin * (j + 1) + eight_squareSize * (j + 1)),\n x4: (eight_margin * (i + 1) + eight_squareSize * i),\n y4: (eight_margin * (j + 1) + eight_squareSize * (j + 1)) \n };\n squarePositions.push(square);\n }\n }\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"eight_perturbedSquares = {\n let squarePositions = [];\n for (let i = 0; i < eight_squarePositions.length; i++) {\n squarePositions.push(perturber(eight_squarePositions[i]))\n for (let j = 0; j < eight_squarePositions[i].column; j++) {\n squarePositions.push(perturber(eight_squarePositions[i]));\n }\n };\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"nine = md`## 9 Animation\nFinally, let's have some fun and introduce some animation to the piece. The following recalculates itself every 100 milliseconds:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"changing = {\n while (true) {\n yield Promises.delay(100, Math.random());\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`Then I just use that number as well as Math.random() in my perturber function. This forces the function to regenerate a new math.Random every 100ms.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"nine_perturber = (square) => {\n let magnitude = square.column * 2 // This line defines how the randomness spreads across the image\n let perturb = () => ((changing + Math.random() - 1) * (magnitude * 2)); // The line defines the size of the randomness\n let wonkySquare = {column: square.column, row: square.row,\n x1: square.x1 + perturb(),\n x2: square.x2 + perturb(),\n x3: square.x3 + perturb(),\n x4: square.x4 + perturb(),\n y1: square.y1 + perturb(),\n y2: square.y2 + perturb(),\n y3: square.y3 + perturb(),\n y4: square.y4 + perturb() \n };\n return wonkySquare;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`Now the variables are constantly changing, look!\n* x1: \\`${nine_perturbedSquares[nine_perturbedSquares.length-1].x1}\\`\n* y1: \\`${nine_perturbedSquares[nine_perturbedSquares.length-1].y1}\\`\n* x2: \\`${nine_perturbedSquares[nine_perturbedSquares.length-1].x2}\\`\n* y2: \\`${nine_perturbedSquares[nine_perturbedSquares.length-1].y1}\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`Let's get some more inputs and draw it again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"viewof nine_columns = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 10, \n title: \"Columns\", \n description: \"Number of columns to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"viewof nine_rows = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 4, \n title: \"Rows\", \n description: \"Number of rows to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"viewof nine_margin = slider({\n min: 1, \n max: 80, \n step: 1, \n value: 20, \n title: \"Margin\", \n description: \"Width of the gaps between the squares\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"nine_svg = {\n const svg = DOM.svg(width, nine_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(nine_perturbedSquares)\n .enter()\n .append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"nine_squareSize = (width - ((nine_columns + 1) * nine_margin)) / nine_columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"nine_svgHeight = (nine_squareSize * nine_rows) + (nine_margin * (nine_rows + 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"nine_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < nine_columns; i++) {\n for (let j = 0; j < nine_rows; j++) {\n let square = {column: i, row: j, \n x1: (nine_margin * (i + 1) + nine_squareSize * i),\n y1: (nine_margin * (j + 1) + nine_squareSize * j),\n x2: (nine_margin * (i + 1) + nine_squareSize * (i + 1)),\n y2: (nine_margin * (j + 1) + nine_squareSize * j),\n x3: (nine_margin * (i + 1) + nine_squareSize * (i + 1)),\n y3: (nine_margin * (j + 1) + nine_squareSize * (j + 1)),\n x4: (nine_margin * (i + 1) + nine_squareSize * i),\n y4: (nine_margin * (j + 1) + nine_squareSize * (j + 1)) \n };\n squarePositions.push(square);\n }\n }\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"nine_perturbedSquares = {\n let squarePositions = [];\n for (let i = 0; i < nine_squarePositions.length; i++) {\n squarePositions.push(nine_perturber(nine_squarePositions[i]))\n for (let j = 0; j < nine_squarePositions[i].column; j++) {\n squarePositions.push(nine_perturber(nine_squarePositions[i]));\n }\n };\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md`Hmm, there's clearly some unintended behaviour here - the cells are moving/drifting together. They shouldn't be doing that... I think it's something to do with my [\\`nine_changing\\`](#nine_changing) variable being the same for all vertices, which is then being multiplied by column number and added to all the squares. Maybe I'll need to get a new random individually for each vertex every 100ms.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"ten = md`## 10. Fixing the Drift\nI appealed for some help on Twitter, and [@xangregg came to my rescue](https://twitter.com/xangregg/status/1000064449758289920). He spotted that turning Math.random() to 0 in my changing variable fixes the drifting problem. I'll fix that now - \\`ten_changing\\` will keep generating a new value every 100ms, but this time the value is always 0.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"ten_changing = {\n while (true) {\n yield Promises.delay(100, 0);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"md`Then I just need a new perturbation function to recalculate all the stuff from before:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"ten_perturber = (square) => {\n let magnitude = square.column * 2 // This line defines how the randomness spreads across the image\n let perturb = () => ((ten_changing + Math.random() - 0.5) * (magnitude * 2)); // The line defines the size of the randomness\n let wonkySquare = {column: square.column, row: square.row,\n x1: square.x1 + perturb(),\n x2: square.x2 + perturb(),\n x3: square.x3 + perturb(),\n x4: square.x4 + perturb(),\n y1: square.y1 + perturb(),\n y2: square.y2 + perturb(),\n y3: square.y3 + perturb(),\n y4: square.y4 + perturb() \n };\n return wonkySquare;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof ten_columns = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 10, \n title: \"Columns\", \n description: \"Number of columns to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"viewof ten_rows = slider({\n min: 1, \n max: 40, \n step: 1, \n value: 4, \n title: \"Rows\", \n description: \"Number of rows to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"viewof ten_margin = slider({\n min: 1, \n max: 80, \n step: 1, \n value: 20, \n title: \"Margin\", \n description: \"Width of the gaps between the squares\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"ten_svg = {\n const svg = DOM.svg(width, ten_svgHeight);\n \n d3.select(svg)\n .selectAll(\"path\")\n .data(ten_perturbedSquares)\n .enter()\n .append(\"path\")\n .attr(\"d\", square => `M${square.x1} ${square.y1} L${square.x2} ${square.y2} L${square.x3} ${square.y3} L${square.x4} ${square.y4} Z`)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\");\n \n return svg; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"ten_squareSize = (width - ((ten_columns + 1) * ten_margin)) / ten_columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"ten_svgHeight = (ten_squareSize * ten_rows) + (ten_margin * (ten_rows + 1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"ten_squarePositions = {\n let squarePositions = [];\n for (let i = 0; i < ten_columns; i++) {\n for (let j = 0; j < ten_rows; j++) {\n let square = {column: i, row: j, \n x1: (ten_margin * (i + 1) + ten_squareSize * i),\n y1: (ten_margin * (j + 1) + ten_squareSize * j),\n x2: (ten_margin * (i + 1) + ten_squareSize * (i + 1)),\n y2: (ten_margin * (j + 1) + ten_squareSize * j),\n x3: (ten_margin * (i + 1) + ten_squareSize * (i + 1)),\n y3: (ten_margin * (j + 1) + ten_squareSize * (j + 1)),\n x4: (ten_margin * (i + 1) + ten_squareSize * i),\n y4: (ten_margin * (j + 1) + ten_squareSize * (j + 1)) \n };\n squarePositions.push(square);\n }\n }\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"ten_perturbedSquares = {\n let squarePositions = [];\n for (let i = 0; i < ten_squarePositions.length; i++) {\n squarePositions.push(ten_perturber(ten_squarePositions[i]))\n for (let j = 0; j < ten_squarePositions[i].column; j++) {\n squarePositions.push(ten_perturber(ten_squarePositions[i]));\n }\n };\n return squarePositions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`Yay! That did it! I'm going to call this notebook complete now, but I'm not done with my squares. Keep an eye on [my Observable profile](https://beta.observablehq.com/@duncangeere/structure-de-quadrilateres) for more notebooks that use this code to do more creative things. Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"