31: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); } } } })32:[] 2f:{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":243,"value":"md`Tab on the white rectangle below or mouse over it to initialize the design.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"tilecount = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"rect_width = width / tilecount;","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"rect_height = height / tilecount;","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`Create array for grid`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"mutable grid = createGrid();","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":69,"value":"mutable selected_stroke = 'ROUND'","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"mutable selected_colour = 'BYN'","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"mutable selected_orientation = 'Fixed'","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`## Create random colour palette`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":133,"value":"mutable colours = createPalette();","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}