2e:null 2f:["$","title",null,{"children":"Shifting Grids | Joses W. Ho | Observable"}] 34:T445,board02 = { let svg = d3.create("svg").attr("width", w).attr("height", w); let boundaries = d3.range(0, w, w / squaresPerSide); let corners = []; //let colorScaleFill = d3.interpolateViridis; //let colorScaleFill = d3.interpolateSpectral; //let colorScaleFill = d3.interpolateGreys; for (let i = 0; i < boundaries.length; i++) { for (let j = 0; j < boundaries.length; j++) { corners.push({ x: boundaries[i], y: boundaries[j] //color: getRandomInt(-1, 1) }); } } svg .selectAll("rect") .data(corners) .join("rect") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("width", boundaries[1]) .attr("height", boundaries[1]) .attr("fill", (d, i) => interpolator(squareColors02[i])); //.attr("fill", (d, i) => colorScaleFill(Math.sin(now / 5000))); // .attr("fill", (d, i) => // colorScaleFill(Math.sin(now / 1000) + i / corners.length) // ); //.attr("fill", (d, i) => colorScaleFill(Math.sin(i / corners.length))); //.attr("fill", d => colorScaleFill(d.color)) return svg.node(); }35:T446,board03 = { let svg = d3.create("svg").attr("width", w).attr("height", w); let boundaries = d3.range(0, w, w / squaresPerSide); let corners = []; //let colorScaleFill = d3.interpolateViridis; //let colorScaleFill = d3.interpolateSpectral; //let colorScaleFill = d3.interpolateGreys; for (let i = 0; i < boundaries.length; i++) { for (let j = 0; j < boundaries.length; j++) { corners.push({ x: boundaries[i], y: boundaries[j] //color: getRandomInt(-1, 1) }); } } svg .selectAll("rect") .data(corners) .join("rect") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("width", boundaries[1]) .attr("height", boundaries[1]) //.attr("fill", (d, i) => colorScaleFill(squareColors02[i])); //.attr("fill", (d, i) => colorScaleFill(Math.sin(now / 5000))); .attr("fill", (d, i) => interpolator(Math.cos(now / 1000) + i / corners.length) ); //.attr("fill", (d, i) => colorScaleFill(Math.sin(i / corners.length))); //.attr("fill", d => colorScaleFill(d.color)) return svg.node(); }36:T570,interpolatorArray = [ ["Blues", d3.interpolateBlues], ["Greens", d3.interpolateGreens], ["Greys", d3.interpolateGreys], ["Oranges", d3.interpolateOranges], ["Purples", d3.interpolatePurples], ["Reds", d3.interpolateReds], ["Blue-Green", d3.interpolateBuGn], ["Blue-Purple", d3.interpolateBuPu], ["Green-Blue", d3.interpolateGnBu], ["Orange-Red", d3.interpolateOrRd], ["Purple-Blue", d3.interpolatePuBu], ["Purple-Green", d3.interpolatePRGn], ["Purple-Red", d3.interpolatePuRd], ["Purple-Orange", d3.interpolatePuOr], ["Red-Blue", d3.interpolateRdBu], ["Red-Grey", d3.interpolateRdGy], ["Red-Purple", d3.interpolateRdPu], ["Yellow-Green", d3.interpolateYlGn], ["Brown-Blue-Green", d3.interpolateBrBG], ["Red-Yellow-Blue", d3.interpolateRdYlBu], ["Purple-Blue-Green", d3.interpolatePuBuGn], ["Yellow-Green-Blue", d3.interpolateYlGnBu], ["Yellow-Orange-Brown", d3.interpolateYlOrBr], ["Yellow-Orange-Red", d3.interpolateYlOrRd], ["Spectral", d3.interpolateSpectral], ["Rainbow", d3.interpolateRainbow], ["Sinebow", d3.interpolateSinebow], ["Turbo", d3.interpolateTurbo], ["Viridis", d3.interpolateViridis], ["Magma", d3.interpolateMagma], ["Plasma", d3.interpolatePlasma], ["Cividis", d3.interpolateCividis], ["Warm", d3.interpolateWarm], ["Cool", d3.interpolateCool], ["Cubehelix", d3.interpolateCubehelixDefault] ]37:[] 32:{"id":"c59dbbac6e3dbfa9","slug":"shifting-grids","title":"Shifting Grids","thumbnail":"0329a27297009df455d82414fe069cf36718472dd4757ba5c68f32877e32a0d1","access_level":"public","create_time":"$D2023-06-19T07:57:24.523Z","update_time":"$D2023-06-19T08:00:21.411Z","view_time":null,"first_public_time":"$D2023-06-19T07:58:35.046Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3e2c8f51767b407c","login":"josesho","name":"Joses W. Ho","avatar_url":"https://avatars-next.observableusercontent.com/8565084405218937f633827fd6d64cb4868e50f8ff67c9ad68a501db082d5165","tier":"starter_2024"},"version":814,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e72bc139271eb2c3","login":"josesho","name":"Joses W. Ho","avatar_url":"https://avatars-next.observableusercontent.com/8565084405218937f633827fd6d64cb4868e50f8ff67c9ad68a501db082d5165","tier":null}],"members":[{"type":"individual","id":"e72bc139271eb2c3","login":"josesho","name":"Joses W. Ho","avatar_url":"https://avatars-next.observableusercontent.com/8565084405218937f633827fd6d64cb4868e50f8ff67c9ad68a501db082d5165","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ff705428d77bd41f","slug":"generative-art","title":"Generative Art","owner":{"id":"3e2c8f51767b407c","login":"josesho","name":"Joses W. Ho"}},"type":"notebook","body":{"title":"Shifting Grids","cells":[{"id":0,"value":"# Shifting Grids","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"viewof squaresPerSide = Inputs.range(\n [3, Math.floor(Math.sqrt(interpolatorArrayForGrid.length))],\n {\n step: 1,\n value: 6,\n label: \"Number of squares per side\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"## Monochrome","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"board01 = {\n let svg = d3.create(\"svg\").attr(\"width\", w).attr(\"height\", w);\n\n let boundaries = d3.range(0, w, w / squaresPerSide);\n let corners = [];\n\n let colorScaleFill = d3.interpolateGreys;\n\n for (let i = 0; i < boundaries.length; i++) {\n for (let j = 0; j < boundaries.length; j++) {\n corners.push({\n x: boundaries[i],\n y: boundaries[j]\n //color: getRandomInt(-1, 1)\n });\n }\n }\n\n svg\n .selectAll(\"rect\")\n .data(corners)\n .join(\"rect\")\n .attr(\"x\", (d) => d.x)\n .attr(\"y\", (d) => d.y)\n .attr(\"width\", boundaries[1])\n .attr(\"height\", boundaries[1])\n .attr(\"fill\", (d, i) => colorScaleFill(squareColors01[i]));\n //.attr(\"fill\", (d, i) => colorScaleFill(Math.sin(now / 5000)));\n\n // .attr(\"fill\", (d, i) =>\n // colorScaleFill(Math.sin(now / 1000) + i / corners.length)\n // );\n\n //.attr(\"fill\", (d, i) => colorScaleFill(Math.sin(i / corners.length)));\n //.attr(\"fill\", d => colorScaleFill(d.color))\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof interpolator = Inputs.select(new Map(interpolatorArray), {\n label: \"Color scheme\",\n value: d3.interpolateTurbo\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"## Left to Right Sweep","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"## Clown Vomit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":752,"value":"board04 = {\n let svg = d3.create(\"svg\").attr(\"width\", w).attr(\"height\", w);\n\n let boundaries = d3.range(0, w, w / squaresPerSide);\n let corners = [];\n\n for (let i = 0; i < boundaries.length; i++) {\n for (let j = 0; j < boundaries.length; j++) {\n corners.push({\n x: boundaries[i],\n y: boundaries[j]\n //color: getRandomInt(-1, 1)\n });\n }\n }\n\n svg\n .selectAll(\"rect\")\n .data(corners)\n .join(\"rect\")\n .attr(\"x\", (d) => d.x)\n .attr(\"y\", (d) => d.y)\n .attr(\"width\", boundaries[1])\n .attr(\"height\", boundaries[1])\n .attr(\"fill\", (d, i) => interpolatorArrayForGrid[i][1](squareColors02[i]));\n\n // .attr(\"fill\", (d, i) =>\n // colorScaleFill(Math.sin(now / 1000) + i / corners.length)\n // );\n\n //.attr(\"fill\", (d, i) => colorScaleFill(Math.sin(i / corners.length)));\n //.attr(\"fill\", d => colorScaleFill(d.color))\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"squareColors01 = {\n //let choices = [true, false, true, false, false, false];\n\n let out = [];\n\n let totalSquares = squaresPerSide ** 2;\n\n let interval = 0.05;\n\n // init starting color\n for (let i = 0; i < totalSquares; i++) {\n out.push(getRandomInt(0, 2));\n }\n\n //await Promises.delay(250);\n do {\n // lodash function to sample a specified number of objects from an Array.\n let squaresToFlip = _.sampleSize(\n d3.range(totalSquares),\n totalSquares * 0.5\n );\n\n for (let j = 0; j < squaresToFlip.length; j++) {\n let squareID = squaresToFlip[j];\n //let thisChoice = sampleArray(choices);\n\n if (out[squareID] < 1) {\n while (out[squareID] < 1 + interval) {\n out[squareID] = out[squareID] + interval;\n yield out;\n }\n } else {\n while (out[squareID] > -interval) {\n out[squareID] = out[squareID] - interval;\n yield out;\n }\n }\n }\n //await Promises.delay(500);\n } while (true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"squareColors02 = {\n let out = [];\n\n let totalSquares = squaresPerSide ** 2;\n\n let interval = 0.08;\n\n // init starting color\n for (let i = 0; i < totalSquares; i++) {\n out.push(getRandomInt(0, 2));\n }\n\n do {\n let squaresToFlip = _.sampleSize(\n d3.range(totalSquares),\n totalSquares * 0.8\n );\n\n for (let j = 0; j < squaresToFlip.length; j++) {\n let squareID = squaresToFlip[j];\n //let thisChoice = sampleArray(choices);\n\n if (out[squareID] < 1) {\n while (out[squareID] < 1 + interval) {\n out[squareID] = out[squareID] + interval;\n yield out;\n }\n } else {\n while (out[squareID] > -interval) {\n out[squareID] = out[squareID] - interval;\n yield out;\n }\n }\n }\n } while (true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"interpolatorArrayForGrid = _.shuffle(\n interpolatorArray\n .concat(interpolatorArray)\n .concat(interpolatorArray)\n .concat(interpolatorArray)\n .concat(interpolatorArray)\n .concat(interpolatorArray)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"w = width * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function getRandomInt(min, max) {\n // Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min) + min); // The maximum is exclusive and the minimum is inclusive\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"