31:T6dd,p5((sketch) => { const w = 600; const h = 600; const res = n_a; // the higher the number, the bigger the symbol (and the less it takes to calculate) const scale = 1; const palette = randomIntFromInterval(0, 2); const this_palette = colors[palette]; let grid; let init_pt; const n_bkg = Math.round(Math.random()); sketch.setup = function () { sketch.createCanvas(w * scale, h * scale); sketch.background(bkg[n_bkg]); sketch.noiseDetail(1); const info = init_grid(sketch, w, h, res, "random"); grid = info[0]; init_pt = info[1]; sketch.scale(scale); // drawGrid(sketch, grid, w / grid.length); // console.log(grid); sketch.noLoop(); }; sketch.draw = function () { sketch.scale(scale); // added code from last sketch // line const n_steps = num_steps_a; const step_length = w * step_length_b; sketch.noFill(); const grid_lines = n_a; let step = 1; if (radios_start_positions_a === "Random selection") { step = Math.round(randomIntFromInterval(1, 30) / 10); } let n = 0; const total = grid.length * grid.length; const this_colors = createRandomPal(total, this_palette); sketch.strokeCap(sketch.PROJECT); for (var i = 0; i < grid.length; i = i + step) { for (var j = 0; j < grid.length; j = j + step) { sketch.stroke(this_colors[n]); // sketch.drawingContext.setLineDash([ // 0.5 * step_length, // 0.25 * step_length // ]); drawOneCurve( sketch, i, j, grid, init_pt, n_steps, step_length, w, h, this_palette ); n = n + 1; } } }; })32:T4ff,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 * range_angle, row * range_angle), 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:T495,function drawOneCurve( sketch, x0, y0, grid, init_pt, n_steps, step_length, w, h, this_palette ) { let x = x0 * init_pt.res; let y = y0 * init_pt.res; const stroke = randomIntFromInterval(init_pt.res / 10, init_pt.res * 0.45); sketch.strokeWeight(stroke); sketch.beginShape(); for (var i = 0; i < n_steps; i++) { sketch.curveVertex(x, y); const x_offset = x - init_pt.left_x; const y_offset = y - init_pt.top_y; let column_index = sketch.int(x_offset / init_pt.res); let row_index = sketch.int(y_offset / init_pt.res); console.log(column_index, grid); // NOTE: normally you want to check the bounds here if (x < 0 || x > w || y < 0 || y > h) { // finish shape sketch.endShape(); sketch.beginShape(); x = x < 0 || x > w ? randomIntFromInterval(0, w) : x; y = y < 0 || y > h ? randomIntFromInterval(0, h) : y; break; } const grid_angle = grid[column_index][row_index].angle; const x_step = step_length * sketch.cos(grid_angle); const y_step = step_length * sketch.sin(grid_angle); x = x + x_step; y = y + y_step; } sketch.endShape(); }34:[] 2f:{"title":"Genuary2022, the next Fidenza","cells":[{"id":0,"value":"# Genuary2022, the next Fidenza","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"Entry for the 4th challenge called \"the next [Fidenza](https://tylerxhobbs.com/fidenza)\".\n\nAlthough I would say my attempt was a bit of a failure (I was trying to get very close to the original algorithm with not much luck), I had fun trying. I learned how to do flow fields for the first time following the instructions given in https://tylerxhobbs.com/essays/2020/flow-fields, for more info about the flow fields check https://observablehq.com/d/c4ed8ace00cd6463","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"https://genuary.art/prompts#jan4","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"viewof num_steps_a = Inputs.range([4, 100], {\n label: \"Select number of steps (the more, the longer the curve)\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"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"},{"id":26,"value":"viewof step_length_b = Inputs.range([0.01, 1], {\n label: \"Select length of steps of the curve\",\n step: 0.01,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof n_a = Inputs.range([0.01, 1], {\n label: \"Resolution\",\n step: 0.01,\n value: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"First grid","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"viewof range_angle = Inputs.range([0.001, 0.01], {\n label: \"Amount of randomness in angle\",\n value: 0.002,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"colors = [\n [\"#19b663\", \"#f7b509\", \"#076be3\", \"#fff\"],\n [\"#f7b509\", \"#076be3\", \"#fff\", \"#d54d03\"],\n [\"#19b663\", \"#f7b509\", \"#fff\", \"#d54d03\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"createRandomPal(10, colors[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"function createRandomPal(n, colors) {\n const array = [];\n\n for (var i = 0; i <= n; i++) {\n const palette = randomIntFromInterval(0, 3);\n\n if (i === 0) {\n array.push(colors[palette]);\n } else {\n const this_color = array.filter((d) => d === colors[palette]);\n\n if (palette === 1 && this_color.length < n * 0.5) {\n array.push(colors[palette]);\n } else if (palette === 2 && this_color.length < n * 0.25) {\n array.push(colors[palette]);\n } else if (palette === 3 && this_color.length < n * 0.1) {\n array.push(colors[palette]);\n } else {\n array.push(colors[palette]);\n }\n }\n }\n\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"bkg = [\"#0B0D0C\", \"#fff\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"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"},{"id":235,"value":"margin = ({\n l: 10,\n top: 10,\n right: 10 * 2,\n bottom: 10 * 2\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"Draw curve","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"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":3,"value":"import { p5 } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}