2b:null 2c:["$","title",null,{"children":"Flow fields | Irene de la Torre | Observable"}] 31:T582,p5((sketch) => { const w = 100; const h = 100; const res = n_a; // the higher the number, the bigger the symbol (and the less it takes to calculate) const scale = 5; const angle = sketch.PI * 0.25; let grid; let init_pt; sketch.setup = function () { sketch.createCanvas(w * scale, h * scale, sketch.WEBGL); sketch.background("white"); // sketch.angleMode(sketch.DEGREES); sketch.noiseDetail(1); const info = init_grid(sketch, w, h, res, "random"); grid = info[0]; init_pt = info[1]; sketch.translate(-(w * scale) / 2, -(h * scale) / 2); sketch.scale(scale); drawGrid(sketch, grid, w / grid.length); sketch.noLoop(); }; sketch.draw = function () { sketch.translate(-(w * scale) / 2, -(h * scale) / 2); sketch.scale(scale); // added code from last sketch // line const n_steps = num_steps_a; const step_length = w * step_length_b; sketch.blendMode(sketch.MULTIPLY); sketch.noFill(); sketch.stroke("rgba(255, 0, 0, 0.5)"); const grid_lines = n_a; let step = 1; if (radios_start_positions_a === "Random selection") { step = Math.round(randomIntFromInterval(1, 30) / 10); } for (var i = 0; i < grid.length; i = i + step) { for (var j = 0; j < grid.length; j = j + step) { drawOneCurve(sketch, i, j, grid, init_pt, n_steps, step_length, w, h); } } }; })32:T4f2,init_grid = function (sketch, w, h, res, angle) { const left_x = sketch.int(w * -0.5); const right_x = sketch.int(w * 1.5); const top_y = sketch.int(h * -0.5); const bottom_y = sketch.int(h * 1.5); const resolution = sketch.int(w * res); const num_columns = (right_x - left_x) / resolution; const num_rows = (bottom_y - top_y) / resolution; const grid = []; for (var column = 0; column < num_columns; column++) { grid.push(column); grid[`${column}`] = []; for (var row = 0; row < num_rows; row++) { let default_angle = (row / num_rows) * sketch.PI; if (angle > 0) { default_angle = angle; } else if (angle === "random") { default_angle = sketch.map( sketch.noise(column * 0.005, row * 0.005), 0, 1, 0, 720 ); } grid[`${column}`].push(row); grid[`${column}`][`${row}`] = { x: column, row: row, angle: Math.round(default_angle * 1000) / 1000, size: resolution }; } } return [ grid, { left_x: left_x, right_x: right_x, top_y: top_y, bottom_y: bottom_y, res: resolution, num_columns: num_columns, num_rows: num_rows } ]; }33:[] 2f:{"id":"c4ed8ace00cd6463","slug":"flow-fields","title":"Flow fields","thumbnail":"47b5e9db4dd0d2d325b53eeacb6a2db58b05c23432fb0dc54213587a3044a685","access_level":"public","create_time":"$D2022-01-02T11:28:09.098Z","update_time":"$D2022-01-03T20:14:56.223Z","view_time":null,"first_public_time":"$D2022-01-03T20:15:37.108Z","fork":false,"stars":3,"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"},"version":659,"publish_version":659,"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}],"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":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"5ac5d5776609fdcf","slug":"generative-design-exercises","title":"Generative Design","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"title":"Flow fields","cells":[{"id":0,"value":"# Flow fields","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"https://tylerxhobbs.com/essays/2020/flow-fields","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":13,"value":"canvas_height = width < 400 ? width : 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"canvas_width = width < 400 ? width : 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"## Process","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"> *Let's assume we've got an image that's 1000 x 1000 pixels, and we want to give ourselves 50% extra margin outside the bounds of the image. We can initialize our grid like this (pseudocode):*\n\nFrom https://tylerxhobbs.com/essays/2020/flow-fields\n\nFor tests, width and height are ${100 * 5} x ${100 * 5} px","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"p5((sketch) => {\n const w = 100;\n const h = 100;\n const res = 0.07; // the higher the number, the bigger the symbol (and the longer it takes to calculate)\n const scale = 5;\n const angle = sketch.PI * 0.25;\n\n let grid;\n sketch.setup = function () {\n sketch.createCanvas(w * scale, h * scale, sketch.WEBGL);\n sketch.background(\"white\");\n grid = init_grid(sketch, w, h, res, angle)[0];\n\n sketch.translate(-(w * scale) / 2, -(h * scale) / 2);\n sketch.scale(scale);\n\n const grid_size = w / grid.length;\n\n // grid\n drawGrid(sketch, grid, grid_size);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"> *We now have a usable field. Sadly, like this it would only draw straight lines. We'll work on that. For now, let's just make it turn a bit as it moves down the image by doing this:*\n> \n```\nfor (column in num_columns) {\n for (row in num_rows) {\n angle = (row / float(num_rows)) * PI\n grid[column][row] = angle\n }\n}\n```\n\nIn test, this part has been added in `default_angle`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":155,"value":"p5((sketch) => {\n const w = 100;\n const h = 100;\n const res = 0.07; // the higher the number, the bigger the symbol (and the longer it takes to calculate)\n const scale = 5;\n const angle = sketch.PI * 0.25;\n\n let grid;\n sketch.setup = function () {\n sketch.createCanvas(w * scale, h * scale, sketch.WEBGL);\n sketch.background(\"white\");\n grid = init_grid(sketch, w, h, res)[0];\n\n sketch.translate(-(w * scale) / 2, -(h * scale) / 2);\n sketch.scale(scale);\n\n const grid_size = w / grid.length;\n\n // grid\n // c\n drawGrid(sketch, grid, grid_size);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"> *Now we're going to use the grid to draw a curve. Here's the basic concept. We pick a starting point. We find a corresponding nearby point in the grid. We take the angle from that point in the grid, and take a small step in the direction of that angle. In our new location, we perform another lookup in the grid, and then repeat this process in a loop.*\n> \n> (...)\n> \n> *We need to pick values for a few key parameters of how we draw the curves: the step_length, num_steps, and the starting position (x, y). The simplest is the step_length. Typically, this should be small enough that you don't see any sharp points on the curve. For me, that's usually around 0.1% to 0.5% of the image width. I go larger for quicker render speeds, and smaller if there are tight turns that need to be clean.*\n>\n> ### Step length","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":226,"value":"viewof step_length_a = Inputs.range([0, 1], {\n label: \"Select number of steps of the curve (best between 0.1 and 0.5)\",\n step: 0.1,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"p5((sketch) => {\n const w = 100;\n const h = 100;\n const res = 0.07; // the higher the number, the bigger the symbol (and the longer it takes to calculate)\n const scale = 5;\n const angle = sketch.PI * 0.25;\n\n let grid;\n let init_pt;\n\n sketch.setup = function () {\n sketch.createCanvas(w * scale, h * scale, sketch.WEBGL);\n sketch.background(\"white\");\n const info = init_grid(sketch, w, h, res);\n grid = info[0];\n init_pt = info[1];\n\n sketch.translate(-(w * scale) / 2, -(h * scale) / 2);\n sketch.scale(scale);\n\n // dots\n const grid_size = w / grid.length;\n\n // grid\n drawGrid(sketch, grid, grid_size);\n\n // added code from last sketch\n // line\n const n_steps = 20;\n const step_length = w * step_length_a;\n\n sketch.noFill();\n sketch.stroke(\"red\");\n sketch.strokeWeight(2);\n drawOneCurve(sketch, 10, 5, grid, init_pt, n_steps, step_length, w, h);\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"### Values For num_steps\n\n> *The value of num_steps will affect the texture of the result. Short curves may look more like \"fur\". Long curves are more fluid. Here's an example of the same program run with two different values for num_steps. First, with short curves:*\n>","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":264,"value":"### Selecting Starting Positions\n\n> *All of your curves have to start somewhere. Usually, I use one of three options for picking the starting points:*\n> - *Use a regular grid for starting points*\n> - *Use uniformly random selection to pick the points*\n> - *Use circle packing*\n> \n> *The regular grid is the simplest, but sometimes it can feel overly stiff. Uniformly random selection has a looser feeling, but it will leave some clumps and some sparse areas, which are not always what you want. The circle packing approach has a nice balance: things are pretty evenly spaced out, but with enough random variation that it's more relaxed.*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":252,"value":"viewof num_steps_a = Inputs.range([1, 100], {\n label: \"Select number of steps (the more, the longer the curve)\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":361,"value":"viewof radios_start_positions_a = Inputs.radio(\n [\"Regular grid\", \"Random selection\"],\n {\n label: \"Select one\",\n value: \"Regular grid\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"viewof step_length_b = Inputs.range([0.01, 0.5], {\n label: \"Select length of steps of the curve\",\n step: 0.01,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"viewof n_a = Inputs.range([0.01, 0.1], {\n label: \"Resolution\",\n step: 0.01,\n value: 0.07\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"drawGrid = function (sketch, grid, grid_size) {\n for (var c = 0; c < grid.length; c++) {\n for (var r = 0; r < grid.length; r++) {\n sketch.noFill();\n sketch.stroke(\"black\");\n const radius = grid_size / 2;\n const init = [c * grid_size, r * grid_size];\n\n // var x = cos(angle * i) * radius;\n // var y = sin(angle * i) * radius;\n sketch.line(\n init[0],\n init[1],\n 0,\n init[0] + sketch.cos(grid[c][r].angle) * radius,\n init[1] + sketch.sin(grid[c][r].angle) * radius,\n 0\n );\n\n sketch.noStroke();\n sketch.fill(\"black\");\n sketch.circle(init[0], init[1], grid_size * 0.25);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"function drawOneCurve(\n sketch,\n x0,\n y0,\n grid,\n init_pt,\n n_steps,\n step_length,\n w,\n h\n) {\n let x = x0 * init_pt.res;\n let y = y0 * init_pt.res;\n\n // console.log(init_pt);\n\n sketch.beginShape();\n\n for (var i = 0; i < n_steps; i++) {\n sketch.curveVertex(x, y);\n\n const x_offset = x - init_pt.left_x;\n const y_offset = y - init_pt.top_y;\n\n let column_index = sketch.int(x_offset / init_pt.res);\n let row_index = sketch.int(y_offset / init_pt.res);\n\n // NOTE: normally you want to check the bounds here\n if (x < 0 || x > w || y < 0 || y > h) {\n // x = sketch.random(w * 1.2);\n // y = sketch.random(h);\n break;\n }\n\n const grid_angle = grid[column_index][row_index].angle;\n\n const x_step = step_length * sketch.cos(grid_angle);\n const y_step = step_length * sketch.sin(grid_angle);\n\n x = x + x_step;\n y = y + y_step;\n }\n sketch.endShape();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":365,"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"},{"id":9,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"