3e:I[132969,["$2"],"IconMark"] 34:["$","title",null,{"children":"Generative design Notebook 7: alignment in a grid | Irene de la Torre | Observable"}] 3c:T6bf,p5(sketch => { const angle = sketch.TWO_PI / width; sketch.setup = function() { sketch.createCanvas(width, height); sketch.colorMode(sketch.HSB, 360, 100, 100, 100); }; sketch.draw = function() { sketch.strokeWeight(0); sketch.rect(0, 0, width, height); sketch.strokeCap(sketch[selected_stroke]); for (let i = 0; i < grid.length; i++) { let vx = 0; let vy = 0; if (selected_orientation === 'mouse') { let thisAngle = angle * sketch.mouseX; if (thisAngle > sketch.TWO_PI) { thisAngle = sketch.TWO_PI } else if (thisAngle < 0) { thisAngle = 0 } vx = sketch.cos(thisAngle) * rect_width; vy = sketch.sin(thisAngle) * rect_height; } let colour = sketch.color(100, 0, 0); if (grid[i].toggle == 0) { colour = sketch.color(100, 0, 0); if (selected_colour !== 'BYN') { colour = sketch.color(colours[0].h, colours[0].s, colours[0].b); } sketch.stroke(colour); sketch.strokeWeight(sketch.mouseX / 20); sketch.line(grid[i].posX, grid[i].posY, grid[i].posX + vx + rect_width, grid[i].posY + vy + rect_height); } if (grid[i].toggle == 1) { if (selected_colour !== 'BYN') { colour = sketch.color(colours[1].h, colours[1].s, colours[1].b); } sketch.stroke(colour); sketch.strokeWeight(sketch.mouseY / 20); sketch.line(grid[i].posX, grid[i].posY + vx + rect_width, grid[i].posX + vy + rect_height, grid[i].posY); } } } })3d:[] 38:{"id":"82e8e47c2f331082","slug":"generative-design-notebook-7-alignment-in-a-grid","title":"Generative design Notebook 7: alignment in a grid","thumbnail":"979dabb7836685eb11eedd12b9972e043a3f74e0a13ba1e1bac55b9982335fc4","access_level":"public","create_time":"$D2020-04-13T11:19:47.613Z","update_time":"$D2020-04-13T15:50:31.744Z","view_time":null,"first_public_time":"$D2020-04-13T14:33:58.712Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024","bio":"Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen","followed_by_you":false,"follows_you":false},"version":245,"publish_version":245,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"bio":"Data visualization designer. Now Digital Designer at the Financial Times. Before at UCB Biopharma, BBC News & the Senseable City Lab. I like making dots move on the screen","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4c47031b73e1a8a2","slug":"p5-js","title":"P5.js","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"titling":"auto","title":"Generative design Notebook 7: alignment in a grid","cells":[{"id":0,"value":"md`# Generative design Notebook 7: alignment in a grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`One of my 2020 goals is to do more Generative Design. This notebook is inspired by exercise \nP_2_1_1 from the book Generative Design by Benedikt Gross and Hartmut Bohnhacker.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"md`Code inspired by http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_1_01 and http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_1_02`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof object_strokes = {\n const strokes = html`\n

Select a type of stroke

\n \n \n `;\n\n strokes.onclick = event => {\n mutable selected_stroke = event.target.id;\n };\n \n return strokes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof object_palette = {\n const colour_sel = html`\n

Select a colour palette

\n \n `;\n\n colour_sel.onclick = event => {\n mutable selected_colour = event.target.id;\n };\n \n return colour_sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof object_rotation = {\n const rotation_sel = html`\n

Select one orientation

\n \n `;\n\n rotation_sel.onclick = event => {\n mutable selected_orientation = event.target.id;\n };\n \n return rotation_sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof restart = {\n const restart_btn = html`\n `;\n\n restart_btn.onclick = event => {\n mutable grid = createGrid();\n mutable colours = createPalette();\n };\n \n return restart_btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`Tab on the white rectangle below or mouse over it to initialize the design.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"tilecount = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"rect_width = width / tilecount;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"rect_height = height / tilecount;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`Create array for grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"mutable grid = createGrid();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function createGrid() {\n const thisGrid = [];\n \n for (let gridY = 0; gridY < tilecount; gridY++) {\n for (let gridX = 0; gridX < tilecount; gridX++) {\n const posX = width / tilecount * gridX;\n const posY = height / tilecount * gridY;\n const toggle = Math.round(Math.random());\n thisGrid.push({\n toggle: toggle,\n posX: posX,\n posY: posY\n })\n }\n }\n return thisGrid;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"mutable selected_stroke = 'ROUND'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"mutable selected_colour = 'BYN'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"mutable selected_orientation = 'Fixed'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`## Create random colour palette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"function createPalette() {\n const mainHue_chromatic = randomIntFromInterval(0, 360);\n let second_hue;\n \n if (mainHue_chromatic >= 180) {\n second_hue = mainHue_chromatic - 180;\n } else {\n second_hue = mainHue_chromatic + 180;\n }\n \n const colours = [{\n h: mainHue_chromatic,\n s: randomIntFromInterval(80, 100),\n b: randomIntFromInterval(80, 95)\n }, {\n h: second_hue,\n s: randomIntFromInterval(80, 100),\n b: randomIntFromInterval(80, 95)\n }]\n \n return colours\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"mutable colours = createPalette();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 33:null 2a:[["$","title","0",{"children":"Generative design Notebook 7: alignment in a grid | Irene de la Torre | Observable"}],["$","meta","1",{"property":"og:title","content":"Generative design Notebook 7: alignment in a grid"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Irene de la Torre"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@irenedelatorre/generative-design-notebook-7-alignment-in-a-grid"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/979dabb7836685eb11eedd12b9972e043a3f74e0a13ba1e1bac55b9982335fc4.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Generative design Notebook 7: alignment in a grid"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Irene de la Torre"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/979dabb7836685eb11eedd12b9972e043a3f74e0a13ba1e1bac55b9982335fc4.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L3e","17",{}]] 3b:null