30:T80a,{ let { n, speed, angleDrift, sizeDriftA, sizeDriftB } = config; let { background, fill, fillColor, fillOpacity, stroke, strokeColor, strokeOpacity, lineWidth } = colorConfig; let { octaves, amplitude } = noiseConfig; let size = 750; let ctx = DOM.context2d(size, size); let pos = []; let d = size / n; for (let i = 0; i <= n; i++) { pos.push([]); for (let j = 0; j <= n; j++) { pos[i].push([i * d, j * d]); } } let t = 0; let noiseFunction = octave(perlin3, octaves); let noise = (i, j, k) => noiseFunction((i / n) * amplitude, (j / n) * amplitude, k); let refresh = () => { t += 0.0001 * speed; let pos = []; for (let i = 0; i <= n; i++) { pos.push([]); for (let j = 0; j <= n; j++) { let [x, y] = [i * d, j * d]; /*if (i != 0 && j != 0 && i != n && j != n)*/ { x += d * angleDrift * noise(i, j, -t); y += d * angleDrift * noise(i, j, t); } pos[i].push([x, y]); } } ctx.fillStyle = background; ctx.fillRect(0, 0, size, size); ctx.fillStyle = fillColor + ("0" + (~~(fillOpacity * 255)).toString(16)).slice(-2); ctx.strokeStyle = strokeColor + ("0" + (~~(strokeOpacity * 255)).toString(16)).slice(-2); ctx.lineJoin = "round"; ctx.lineWidth = lineWidth; for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { let m = noise(i, j, t) * sizeDriftA + sizeDriftB; let vtx = [pos[i][j], pos[i + 1][j], pos[i + 1][j + 1], pos[i][j + 1]]; let [cx, cy] = vtx.reduce(([x0, y0], [x1, y1]) => [x0 + x1, y0 + y1]); cx /= 4; cy /= 4; ctx.beginPath(); vtx = vtx.map(([x, y]) => [x + (cx - x) * m, y + (cy - y) * m]); ctx.moveTo(vtx[0][0], vtx[0][1]); vtx.forEach(([x, y]) => ctx.lineTo(x, y)); ctx.closePath(); if (fill) ctx.fill(); if (stroke) ctx.stroke(); } } }; for (;;) { await visibility(); refresh(); yield ctx.canvas; } }31:[] 2e:{"title":"Drifting squares","cells":[{"id":0,"value":"md`# Drifting squares\n\nFun with noise on a square grid. Many parameters to fiddle with...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"viewof reset = button(\"reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"viewof config = {\n reset;\n return combo({\n n: number({ title: \"Grid size\", min: 2, max: 50, value: 20, step: 1 }),\n speed: number({ title: \"Speed\", min: 1, max: 1000, value: 100, step: 1 }),\n angleDrift: number({\n title: \"Angle drift\",\n min: 0,\n max: 100,\n value: 1,\n step: 0.1\n }),\n sizeDriftA: number({\n title: \"Size drift (A)\",\n min: 0,\n max: 10,\n value: 1,\n step: 0.1\n }),\n sizeDriftB: number({\n title: \"Size drift (B)\",\n min: -10,\n max: 10,\n value: 0.5,\n step: 0.1\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof colorConfig = {\n reset;\n return combo({\n background: color({ title: \"Background\", value: \"#ffffff\" }),\n\n sep2: html`

`,\n\n fill: checkbox({ title: \"Fill\", options: [\"y\"], value: [\"y\"] }),\n fillColor: color({ title: \"Color\", value: \"#000000\" }),\n fillOpacity: number({\n title: \"Opacity\",\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n }),\n\n sep: html`

`,\n\n stroke: checkbox({ title: \"Stroke\", options: [\"y\"], value: [\"y\"] }),\n strokeColor: color({ title: \"Color\", value: \"#777777\" }),\n strokeOpacity: number({\n title: \"Opacity\",\n value: 0.5,\n min: 0,\n max: 1,\n step: 0.01\n }),\n lineWidth: number({\n title: \"Line width\",\n value: 2,\n min: 0.1,\n max: 100,\n step: 0.1\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"viewof noiseConfig = {\n reset;\n return combo({\n octaves: select({\n title: \"Noise octaves\",\n options: [1, 2, 3, 4],\n value: 1\n }),\n amplitude: number({\n title: \"Amplitude\",\n min: 0.1,\n max: 100,\n value: 2,\n step: 0.1\n })\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"(\"0\" + (~~(0.66 * 255)).toString(16)).slice(-2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"mutable debug = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { octave, perlin2, perlin3 } from \"@mbostock/perlin-noise\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"import { tabbed, paged, combo } from \"@esperanc/aggregated-inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {\n select,\n text,\n slider,\n number,\n button,\n color,\n checkbox\n} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}