30: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(); }31: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(); }32: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] ]33:[] 2e:{"title":"Shifting Grids","cells":[{"id":0,"value":"# Shifting Grids","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":797,"value":"## Monochrome","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":693,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"## Left to Right Sweep","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"## Clown Vomit","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":802,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"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"},{"id":748,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"w = width * 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W33","stdlib":"1","titling":"auto"}