32:Ta7c,p5(sketch => { sketch.setup = function() { sketch.createCanvas(width, height); sketch.colorMode(sketch.HSB, 360, 100, 100, 100); sketch.noStroke(); sketch.rect(0, 0, width, height); }; function gradient(x, y, w, h, c1, c2) { var ctx = sketch.drawingContext; // global canvas context p5.js var var grd = ctx.createLinearGradient(x, y, x, y + h); grd.addColorStop(0, c1.toString()); grd.addColorStop(1, c2.toString()); ctx.fillStyle = grd; ctx.fillRect(x, y, w, h); } sketch.draw = function() { sketch.noLoop(); sketch.background(0); var counter = 0; const maxHeight = 150; const minHeight = 5; const maxWidth = width / 4; const minWidth = 1; const rowsY = randomIntFromInterval(minHeight, maxHeight); const rowsX = randomIntFromInterval(1, 15); let randomRectangles = []; // go thorugh the rows for (let gridY = 0; gridY < rowsY; gridY++) { let gridYHeight = randomIntFromInterval(minHeight, maxHeight); randomRectangles.push({ row: gridY, height: gridYHeight, grid_rect : gridYHeight, prev_grid_rect : 0, width: 0 }) let previousHeight = 0; if (gridY > 0) { previousHeight = d3.sum(randomRectangles.filter((d, i) => i < gridY), d => d.height); randomRectangles[gridY].prev_grid_rect = randomRectangles[gridY - 1].prev_grid_rect; } else if (gridY === rowsY - 1) { gridYHeight = height - previousHeight + randomRectangles[gridY - 1].prev_grid_rect / 2; randomRectangles[gridY].height = gridYHeight; } // go through every column in the row for (let gridX = 0; gridX < rowsX; gridX++) { let gridXWidth = randomIntFromInterval(minWidth, maxWidth); const posY = previousHeight - randomRectangles[gridY].prev_grid_rect / 2; let posX = randomRectangles[gridY].width; if (gridX === rowsX - 1) { gridXWidth = width - randomRectangles[gridY].width; } randomRectangles[gridY].width = randomRectangles[gridY].width + gridXWidth; if (posX > width) { posX = 0; gridXWidth = 0; } const index = counter % colour_count; const colour = sketch.color(hueValues[index], saturationValues[index], brightnessValues[index]); var colour_start = sketch.color(0, 0, 0, 25); // gradient(x, y, w, h, col1, col2); // sketch.fill(colour); gradient(posX, posY, gridXWidth, gridYHeight, colour_start, colour); counter++; } } } })33:T7ca,function createPalette() { const hues = []; const brightness = []; const saturations = []; const distance = 30; const distance_2 = 5; const mainHue_analogous = randomIntFromInterval(distance, 360 - distance); const mainHue_chromatic = randomIntFromInterval(0, 360); // all colours and values and brightness are considered for (var i = 0; i < colour_count; i++) { if (selected_type === 'random') { hues[i] = randomIntFromInterval(0, 360); saturations[i] = randomIntFromInterval(0, 100); brightness[i] = randomIntFromInterval(0, 100); } else if (selected_type === 'Analogous') { const mainSaturation = randomIntFromInterval(25, 95); const mainBrightness = randomIntFromInterval(85, 95); hues[i] = randomIntFromInterval(mainHue_analogous - distance, mainHue_analogous + distance); saturations[i] = randomIntFromInterval(mainSaturation - distance_2, mainSaturation + distance_2); brightness[i] = randomIntFromInterval(mainBrightness - distance_2, mainBrightness + distance_2); } else if (selected_type === 'Monochromatic') { hues[i] = mainHue_chromatic; saturations[i] = randomIntFromInterval(20, 100); brightness[i] = randomIntFromInterval(50, 95); } else if (selected_type === 'Complementary') { let second_hue; if (mainHue_analogous >= 180) { second_hue = mainHue_analogous - 180; } else { second_hue = mainHue_analogous + 180; } const value = randomIntFromInterval(0, 10); if (value%2 == 0) { hues[i] = mainHue_analogous; } else { hues[i] = second_hue; } saturations[i] = randomIntFromInterval(20, 100); brightness[i] = randomIntFromInterval(50, 95); } } return [hues, saturations, brightness] }34:[] 30:{"title":"Generative design Notebook 5: colour palettes from rules","cells":[{"id":0,"value":"md`# Generative design Notebook 5: colour palettes from rules`","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_1_2_3 from the book Generative Design by Benedikt Gross and Hartmut Bohnhacker.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"md`Code based on http://www.generative-gestaltung.de/2/sketches/?01_P/P_1_2_3_01, http://www.generative-gestaltung.de/2/sketches/?01_P/P_1_2_3_02 and http://www.generative-gestaltung.de/2/sketches/?01_P/P_1_2_3_03`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof object_palettes = {\n const palettes = html`\n

Select a combination

\n \n \n \n `;\n\n palettes.onclick = event => {\n mutable selected_type = event.target.id;\n };\n \n return palettes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"createPalette();","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"mutable selected_type = 'random'","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"hueValues = createPalette()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"saturationValues = createPalette()[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"brightnessValues = createPalette()[2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"function createWidth() {\n const columns = [];\n for (var i = 0; i < colour_count; i++) {\n columns.push({\n width: randomIntFromInterval(1, colour_count)\n })\n }\n return columns;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"columns = createWidth();","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"colour_count = 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"height = width * 9 / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"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":163,"value":"d3 = require(\"d3-array@2\", \"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}