2f:T75e,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; let pts = []; let lines; const palette = randomIntFromInterval(0, 2); const this_palette = colors[palette]; let grid; let init_pt; sketch.setup = function () { sketch.createCanvas(w * scale, h * scale); sketch.background(bkg); sketch.noiseDetail(1); const info = init_grid(sketch, w, h, res, "random"); grid = info[0]; init_pt = info[1]; // create array for curves let step = 1; const step_length = w * step_length_b; 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) { const one_pt = drawOneCurve( sketch, i, j, grid, init_pt, num_steps_a, step_length, w, h, this_palette ); if (one_pt.length > 0) { one_pt.forEach((d) => { pts.push(d); }); } } } const new_pts = addSimulation(pts); lines = d3.groups(new_pts, (d) => d.id); sketch.noLoop(); }; sketch.draw = function () { console.log(lines); const this_colors = createRandomPal(lines.length, this_palette); sketch.scale(scale); sketch.noFill(); lines.forEach((d, i) => { sketch.stroke(this_colors[i]); // sketch.beginShape(); // console.log(d[1][0]); for (var p = 0; p < d[1].length; p++) { sketch.strokeWeight(d[1][p].r / 2); sketch.circle(d[1][p].x, d[1][p].y, d[1][p].r); } // sketch.endShape(); }); // sketch.strokeCap(sketch.PROJECT); }; })30: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 } ]; }31:[] 2d:{"title":"Genuary2022, Fidenza challenge","cells":[{"id":0,"value":"# Genuary2022, Fidenza challenge","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"Tried to do the Fidenza challenge, but I didn't manage to get the shapes. This error below looked quite nice, so I thought about keeping it.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"You can see the entry for the challenge (with lines) in [here](https://observablehq.com/d/a7d158c9a5c70d66)","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([2, 15], {\n label: \"Select number of steps (the more, the longer the curve)\",\n step: 1,\n value: 11\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, 0.5], {\n label: \"Select length of steps of the curve\",\n step: 0.01,\n value: 0.09\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof n_a = Inputs.range([0.02, 1], {\n label:\n \"Resolution, the higher the number, the bigger the symbol (and the less it takes to calculate)\",\n step: 0.01,\n value: 0.16\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$2f","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":false,"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\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$30","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":"function drawOneCurve(\n sketch,\n x0,\n y0,\n grid,\n init_pt,\n n_steps,\n step_length,\n w,\n h,\n this_palette\n) {\n let x = x0 * init_pt.res;\n let y = y0 * init_pt.res;\n\n const stroke = randomIntFromInterval(1, (w * 5) / grid.length) / 10;\n\n const one_line = [];\n\n for (var i = 0; i < n_steps; i++) {\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 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 one_line.push({\n x: Math.round(x * 10) / 10,\n y: Math.round(y * 10) / 10,\n r: stroke,\n id: `${x0}_${y0}`\n });\n\n x = x + x_step;\n y = y + y_step;\n }\n\n return one_line;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"Create simulation array","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"foceManyBody = d3\n .forceManyBody()\n .distanceMin((d) => [10])\n .distanceMax([10 * 4])\n .strength(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"forceCollide = d3\n .forceCollide()\n .radius((d) => d.r + 2)\n .strength(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"simulation = d3\n .forceSimulation()\n .force(\"collide\", forceCollide)\n .force(\"x\", d3.forceX().strength(0.5))\n .force(\"y\", d3.forceY().strength(0.5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"function addSimulation(thisData) {\n const newArray = [];\n\n for (var i = 0; i < thisData.length; i++) {\n newArray.push({\n id: thisData[i].id,\n x: thisData[i].x,\n y: thisData[i].y,\n r: thisData[i].r\n });\n }\n\n simulation.nodes(newArray);\n\n for (let i = 0; i < 300; ++i) simulation.tick();\n\n return newArray;\n}","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":"$W31","stdlib":"1","titling":"auto"}