2e:null 2f:["$","title",null,{"children":"Example 1 | Michael Bricknell | Observable"}] 34:T4a2,viewof tileSettings = Inputs.form({ gridTileWidth: Inputs.range([50, 1200], { value: 250, step: 1, label: "Grid Tile Width:" }), gridTileHeight: Inputs.range([50, 1200], { value: 250, step: 1, label: "Grid Tile Height:" }), width: Inputs.range([0, 500], { value: 25, step: 1, label: "Width:" }), height: Inputs.range([0, 500], { value: 50, step: 1, label: "Height:" }), columns: Inputs.range([1, 20], { value: 20, step: 1, label: "Columns:" }), rows: Inputs.range([1, 20], { value: 20, step: 1, label: "Rows:" }), color: Inputs.color({ value: "#2e39d1", label: "Color:" }), strokeWidth: Inputs.range([0, 10], { value: 1, step: 0.5, label: "Stroke Width:" }), displayColumns: Inputs.range([1, 20], { value: 7, step: 1, label: "Display Columns:" }), displayRows: Inputs.range([1, 20], { value: 7, step: 1, label: "Display Rows:" }), gridDx: Inputs.range([-100, 100], { value: 0, step: 1, label: "Grid X Offset:" }), gridDy: Inputs.range([-100, 100], { value: 0, step: 1, label: "Grid Y Offset:" }) })35:Td49,vectorTool = { // Explicitly reference tileSettings to ensure reactivity const settings = tileSettings; // Grid display controls (separate from pattern generation) const gridCols = settings.gridCols || 4; const gridTileWidth = settings.gridTileWidth || 50; const gridTileHeight = settings.gridTileHeight || 50; const gridDx = settings.gridDx || 0; const gridDy = settings.gridDy || 0; return html`

${wp.patternTypes.map((type) => { // Clear parameter mapping for createTile const tileConfig = { // Pattern generation parameters type: type, width: settings.width || 100, // Pattern tile width height: settings.height || 100, // Pattern tile height columns: settings.columns || 2, // Pattern repetition X rows: settings.rows || 2, // Pattern repetition Y displayColumns: settings.displayColumns || 4, // How many pattern tiles to show X displayRows: settings.displayRows || 4, // How many pattern tiles to show Y dx: settings.gridDx || 0, // Pattern offset X dy: settings.gridDy || 0, // Pattern offset Y // Visual styling color: settings.color || "#e74c3c", strokeWidth: settings.strokeWidth || 0.5 }; const codeString = `createTile(font[fontIndex][${selectedFont}], ${JSON.stringify( tileConfig, null, 2 )})`; const titleDiv = html`

${type}

`; titleDiv.onclick = async (e) => { try { await navigator.clipboard.writeText(codeString); const originalText = e.target.textContent; e.target.textContent = `${originalText} ✓ Copied!`; e.target.style.color = "#28a745"; setTimeout(() => { e.target.textContent = originalText; e.target.style.color = "#0066cc"; }, 2000); } catch (err) { // Fallback for browsers that don't support clipboard API const textArea = document.createElement("textarea"); textArea.value = codeString; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); const originalText = e.target.textContent; e.target.textContent = `${originalText} ✓ Copied!`; e.target.style.color = "#28a745"; setTimeout(() => { e.target.textContent = originalText; e.target.style.color = "#0066cc"; }, 2000); } }; return html`

${titleDiv}

${createTile(font[fontIndex][selectedFont], tileConfig)}

`; })}

`; }36:Taa6,viewof solidShapeSettings = Inputs.form({ shapeType: Inputs.select( [ "rect", "triangle", "square", "diamond", "pentagon", "hexagon", "arrowup", "arrowdown", "star4", "house", "trapezoid", "kite", "chevronup" ], { value: "chevronup", label: "Shape Type:" } ), width: Inputs.range([10, 200], { value: 30, // 300/5 step: 1, label: "Width:" }), height: Inputs.range([10, 200], { value: 20, // 100/5 step: 1, label: "Height:" }), type: Inputs.select(wp.patternTypes, { value: wp.patternTypes[15], label: "Wallpaper Type:" }), rows: Inputs.range([1, 30], { value: 13, step: 1, label: "Rows:" }), columns: Inputs.range([1, 30], { value: 12, step: 1, label: "Columns:" }), useFillColor: Inputs.toggle({ value: true, label: "Use Fill Color:" }), colorScheme: Inputs.select( [ "None", // Categorical "Category10", "Accent", "Dark2", "Paired", "Pastel1", "Pastel2", "Set1", "Set2", "Set3", "Tableau10", // Sequential single-hue "Blues", "Greens", "Greys", "Oranges", "Purples", "Reds", // Sequential multi-hue "BuGn", "BuPu", "GnBu", "OrRd", "PuBuGn", "PuBu", "PuRd", "RdPu", "YlGnBu", "YlGn", "YlOrBr", "YlOrRd", // Perceptually uniform "Viridis", "Inferno", "Magma", "Plasma", "Cividis", "Warm", "Cool", // Diverging "BrBG", "PiYG", "PRGn", "PuOr", "RdBu", "RdGy", "RdYlBu", "RdYlGn", "Spectral", // Cyclical "Rainbow", "Sinebow" ], { value: "Category10", label: "Color Scheme:" } ), numColors: Inputs.range([1, 10], { value: 4, step: 1, label: "Number of Colors:" }), colorStartIndex: Inputs.range([0, 9], { value: 0, step: 1, label: "Color Start Position:" }), strokeWidth: Inputs.range([0, 10], { value: 0, step: 0.5, label: "Stroke Width:" }), strokeColor: Inputs.color({ value: "#ffffff", label: "Stroke Color:" }), displayColumns: Inputs.range([1, 50], { value: 10, step: 1, label: "Display Columns:" }), displayRows: Inputs.range([1, 50], { value: 13, step: 1, label: "Display Rows:" }), dx: Inputs.range([-100, 100], { value: -60, step: 1, label: "X Offset (dx):" }), dy: Inputs.range([-100, 100], { value: 0, step: 1, label: "Y Offset (dy):" }) })37:T143c,shapeTool = { // Convert color scheme selection to actual colors const colorSchemes = { None: null, Category10: d3.schemeCategory10, Accent: d3.schemeAccent, Dark2: d3.schemeDark2, Paired: d3.schemePaired, Pastel1: d3.schemePastel1, Pastel2: d3.schemePastel2, Set1: d3.schemeSet1, Set2: d3.schemeSet2, Set3: d3.schemeSet3, Tableau10: d3.schemeTableau10, // Sequential single-hue Blues: d3.schemeBlues[9], Greens: d3.schemeGreens[9], Greys: d3.schemeGreys[9], Oranges: d3.schemeOranges[9], Purples: d3.schemePurples[9], Reds: d3.schemeReds[9], // Sequential multi-hue BuGn: d3.schemeBuGn[9], BuPu: d3.schemeBuPu[9], GnBu: d3.schemeGnBu[9], OrRd: d3.schemeOrRd[9], PuBuGn: d3.schemePuBuGn[9], PuBu: d3.schemePuBu[9], PuRd: d3.schemePuRd[9], RdPu: d3.schemeRdPu[9], YlGnBu: d3.schemeYlGnBu[9], YlGn: d3.schemeYlGn[9], YlOrBr: d3.schemeYlOrBr[9], YlOrRd: d3.schemeYlOrRd[9], // Perceptually uniform Viridis: d3.quantize(d3.interpolateViridis, 10), Inferno: d3.quantize(d3.interpolateInferno, 10), Magma: d3.quantize(d3.interpolateMagma, 10), Plasma: d3.quantize(d3.interpolatePlasma, 10), Cividis: d3.quantize(d3.interpolateCividis, 10), Warm: d3.quantize(d3.interpolateWarm, 10), Cool: d3.quantize(d3.interpolateCool, 10), // Diverging BrBG: d3.schemeBrBG[9], PiYG: d3.schemePiYG[9], PRGn: d3.schemePRGn[9], PuOr: d3.schemePuOr[9], RdBu: d3.schemeRdBu[9], RdGy: d3.schemeRdGy[9], RdYlBu: d3.schemeRdYlBu[9], RdYlGn: d3.schemeRdYlGn[9], Spectral: d3.schemeSpectral[9], // Cyclical Rainbow: d3.quantize(d3.interpolateRainbow, 10), Sinebow: d3.quantize(d3.interpolateSinebow, 10) }; // Explicitly reference solidShapeSettings to ensure reactivity const settings = solidShapeSettings; // Grid display controls (separate from pattern generation) const gridCols = settings.gridCols || 4; const gridTileWidth = settings.gridTileWidth || 150 * 1.5; const gridTileHeight = settings.gridTileHeight || 150 * 1.5; const selectedScheme = colorSchemes[settings.colorScheme]; const fillColor = settings.useFillColor && selectedScheme ? selectedScheme.slice( settings.colorStartIndex, settings.colorStartIndex + settings.numColors ) : null; return html`

${wp.patternTypes.map((patternType) => { // Clear parameter mapping for createSolidShape const shapeConfig = { width: settings.width, height: settings.height, type: patternType, // Use the pattern type from iteration rows: settings.rows, columns: settings.columns, fillColor: fillColor, strokeWidth: settings.strokeWidth, strokeColor: settings.strokeColor, className: "customClassOddEven", displayColumns: settings.displayColumns, displayRows: settings.displayRows, dx: settings.dx, dy: settings.dy }; const codeString = `createSolidShape("${ settings.shapeType }", ${JSON.stringify(shapeConfig, null, 2)})`; const titleDiv = html`

${patternType}

${titleDiv}

${createSolidShape(settings.shapeType, shapeConfig)}

`; })}

`; }38:[] 32:{"id":"e824c61f75db7f28","slug":"wallpaper-demo","title":"Example 1","thumbnail":"5667e6ca8b0553367cf785d2d2a9ef95cff9552109e86618ea855123be892c2c","access_level":"public","create_time":"$D2025-08-29T15:14:38.186Z","update_time":"$D2026-04-30T11:01:29.408Z","view_time":null,"first_public_time":"$D2025-08-29T15:18:20.110Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":1909,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"868bd20896c9e454","slug":"wallpaper","title":"Wallpaper Groups","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Example 1","cells":[{"id":72,"value":"# Example 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1159,"value":"J1 = {\n await visibility();\n return createTile(font[fontIndex].J, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"*disclaimer* \nSome patterns are unfortunate and hate symbols have no place.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"https://github.com/eskimoblood/wallpaper-groups\n\nhttps://en.wikipedia.org/wiki/Wallpaper_group\n\nhttps://observablehq.com/@mbrickmaps/make-a-wallpaper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":982,"value":"# Intro\n\nThere is a lot going on in this page, I plan on returning to add more documentation Sept 2. 2025","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"primitives = font[3] //0-9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import {\n createTile,\n createSolidShape,\n compositeTiles,\n primitives as p,\n alpha,\n font,\n num,\n wp\n} from \"@mbrickmaps/make-a-wallpaper\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"createTile","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"wp.patternTypes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"wp.patternTypes[5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"params = ({\n type: \"p1\",\n width: 100,\n height: 100,\n columns: 2,\n rows: 2,\n color: \"#e74c3c\",\n strokeWidth: 0,\n displayColumns: 4,\n displayRows: 4\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tile0 = {\n await visibility();\n return createTile(p.slash, {\n ...params,\n color: \"green\",\n type: wp.patternTypes[5],\n strokeWidth: 5\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"tile1 = {\n await visibility();\n return createSolidShape(\"triangle\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", { ...params, strokeWidth: 1 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"tile2 = createSolidShape(\"rect\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n ...params,\n type: wp.patternTypes[4],\n rows: 3,\n columns: 3,\n className: \"customClassGradient\",\n strokeWidth: 1\n }); // :(\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"colorScale = d3\n .scaleLinear()\n .domain([0, 100]) // Your data's min and max\n .range([\"#fef0d9\", \"#b30000\"]) // A light-to-dark color gradient","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"d3.selectAll(\".customClassGradient\").style(\"fill\", function (d, i) {\n if (i % 2 === 0) {\n return \"blue\";\n } else {\n return \"red\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"{\n await visibility();\n return compositeTiles(\"none\", tile0, tile1); //top -> bottom\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"rects = {\n await visibility();\n return createSolidShape(\"rect\", {\n ...params,\n fillColor: \"red\",\n strokeWidth: 1\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"{\n await visibility();\n return createSolidShape(\"rect\", {\n ...params,\n fillColor: [\"red\", \"blue\", \"green\", \"none\"]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"{\n await visibility();\n return createSolidShape(\"rect\", {\n ...params,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[0],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 4,\n displayRows: 4\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[1],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 4,\n displayRows: 4\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[2],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 4,\n displayRows: 4\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[3],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 4,\n displayRows: 4\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[4],\n rows: 8,\n columns: 8,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 9,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[5],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[6],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[7],\n rows: 10,\n columns: 9,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 12,\n displayRows: 10\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 40,\n type: wp.patternTypes[8],\n rows: 10,\n columns: 5,\n fillColor: [\"white\", \"black\", \"orange\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 9\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[9],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"t6 = {\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 50,\n type: wp.patternTypes[10],\n rows: 4,\n columns: 4,\n fillColor: [\"cyan\", \"magenta\", \"yellow\", \"black\"],\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"primitives","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 75,\n height: 100,\n type: wp.patternTypes[12],\n rows: 7,\n columns: 4,\n fillColor: d3.schemeCategory10.slice(0, 4),\n strokeWidth: 1,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"{\n await visibility();\n return createSolidShape(\"triangle\", {\n width: 50,\n height: 30,\n type: wp.patternTypes[13],\n rows: 5,\n columns: 4,\n fillColor: d3.schemeCategory10.slice(0, 4),\n strokeWidth: 0,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 8,\n displayRows: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"tes = (createSolidShape,\n\"rect\",\n{\n width: 20 * 3,\n height: 33 * 3,\n type: wp.patternTypes[14],\n rows: 10,\n columns: 16,\n fillColor: d3.schemeCategory10.slice(0, 4),\n strokeWidth: 0,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 16,\n displayRows: 4\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"(createSolidShape,\n\"triangle\",\n{\n width: 300 / 5,\n height: 100 / 5,\n type: wp.patternTypes[15],\n rows: 13,\n columns: 12,\n fillColor: d3.schemeCategory10.slice(0, 4),\n strokeWidth: 0,\n strokeColor: \"white\",\n className: \"customClassOddEven\",\n displayColumns: 16,\n displayRows: 40,\n dx: 0,\n dy: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"/*\nd3.selectAll(\".customClass\").each(function (d, i) {\n d3.select(this).style(\"fill\", colorScale(i));\n})*/\nd3.selectAll(\".customClassOddEven\").style(\"fill\", function (d, i) {\n if (i % 2 === 0) {\n return \"blue\";\n } else {\n return \"red\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"a2 = createTile(p.leaf, {\n width: 65,\n height: 40,\n columns: 7,\n rows: 7,\n color: \"green\",\n strokeWidth: 2,\n displayColumns: 8,\n displayRows: 8,\n primitive: \"leaf\",\n type: \"p4\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"a1 = createTile(p.hexagon, {\n type: \"p4mm\",\n color: \"green\",\n strokeWidth: 1,\n width: 68,\n height: 51,\n dx: 0,\n dy: 0,\n rows: 3,\n columns: 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"# Vectors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"viewof selectedPrimitive = Inputs.select(Object.keys(p), {\n value: \"wave\", // Default selection\n label: \"Select Primitive:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"viewof selectedNum = Inputs.select(Object.keys(num), {\n value: \"zero\", // Default selection\n label: \"Selected Number:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"Not all fonts have all encodings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1467,"value":"viewof selectedFont = Inputs.select(Object.keys(font[2]), {\n value: \"A\", // Default selection\n label: \"Selected Font:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1712,"value":"viewof fontIndex = Inputs.number({ value: 1, label: \"Font Index\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"# Shapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"viewof shapeToolWithControls = html`

\n ${viewof solidShapeSettings}\n

\n ${shapeTool}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"createSolidShape(\"chevronup\", {\n width: 30,\n height: 20,\n type: \"p6\",\n rows: 13,\n columns: 12,\n fillColor: [\"#1f77b4\", \"#ff7f0e\", \"#2ca02c\", \"#d62728\"],\n strokeWidth: 0,\n strokeColor: \"#ffffff\",\n className: \"customClassOddEven\",\n displayColumns: 10,\n displayRows: 13,\n dx: -60,\n dy: 0\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"createSolidShape(\"kite\", {\n width: 25,\n height: 20,\n type: \"p31m\",\n rows: 7,\n columns: 10,\n fillColor: [\"#bd3786\", \"#d8576b\", \"#ed7953\", \"#fb9f3a\"],\n strokeWidth: 0.5,\n strokeColor: \"#303030\",\n className: \"customClassOddEven\",\n displayColumns: 7,\n displayRows: 8,\n dx: 9,\n dy: 36\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"# Alphabet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":970,"value":"createTile(alpha.A, {\n type: \"p4mm\",\n color: \"green\",\n strokeWidth: 1,\n width: 68,\n height: 51,\n dx: 0,\n dy: 0,\n rows: 3,\n columns: 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"# Numerical","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":972,"value":"createTile(num.six, {\n type: \"p4mm\",\n color: \"green\",\n strokeWidth: 1,\n width: 68,\n height: 51,\n dx: 0,\n dy: 0,\n rows: 3,\n columns: 3\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"# Font","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1032,"value":"viewof range = Inputs.range([0, 10], {\n label: \"Scale\",\n step: 0.01,\n value: 2.95\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"scale = range","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"function fontParams(color) {\n return {\n type: \"p4mm\",\n color: color || \"green\",\n strokeWidth: 0.5,\n width: 8 * scale,\n height: 8 * scale,\n dx: 0,\n dy: 0,\n rows: 10,\n columns: 10,\n displayColumns: 30,\n displayRows: 24\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"A = {\n await visibility();\n return createTile(font[fontIndex].A, fontParams(\"orange\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"B = {\n await visibility();\n return createTile(font[fontIndex].B, fontParams(\"purple\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"b = {\n await visibility();\n return createTile(font[fontIndex].b, fontParams(\"maroon\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"C = {\n await visibility();\n return createTile(font[fontIndex].C, fontParams(\"black\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"D = {\n await visibility();\n return createTile(font[fontIndex].D, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"E = {\n await visibility();\n return createTile(font[fontIndex].E, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1106,"value":"F = {\n await visibility();\n return createTile(font[fontIndex].F, fontParams())}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"G = {\n await visibility();\n return createTile(font[fontIndex].G, fontParams())}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"H = {\n await visibility();\n return createTile(font[fontIndex].H, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"I = {\n await visibility();\n return createTile( font[fontIndex].I, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"K = {\n await visibility();\n return createTile(font[fontIndex].K, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"L = {\n await visibility();\n return createTile(font[fontIndex].L, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"M = {\n await visibility();\n return createTile(font[fontIndex].M, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"N = {\n await visibility();\n return createTile(font[fontIndex].N, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"O = {\n await visibility();\n return createTile(font[fontIndex].O, fontParams(\"red\"));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"P = {\n await visibility();\n return createTile(font[fontIndex].P, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"Q = {\n await visibility();\n return createTile(font[fontIndex].Q, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"R = {\n await visibility();\n return createTile(font[fontIndex].R, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"S = {\n await visibility();\n return createTile(font[fontIndex].S, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"T = {\n await visibility();\n return createTile(font[fontIndex].T, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"U = {\n await visibility();\n return createTile(font[fontIndex].U, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"V = {\n await visibility();\n return createTile(font[fontIndex].V, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"W = {\n await visibility();\n return createTile(font[fontIndex].W, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"X = {\n await visibility();\n return createTile(font[fontIndex].X, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"Y = {\n await visibility();\n return createTile(font[fontIndex].Y, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"Z = {\n await visibility();\n return createTile(font[fontIndex].Z, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"a = {\n await visibility();\n return createTile(font[fontIndex].a, fontParams());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"{\n await visibility();\n return createTile(font[2][\"B\"], {\n type: \"p3m1\",\n width: 26,\n height: 48,\n columns: 20,\n rows: 20,\n displayColumns: 7,\n displayRows: 7,\n dx: -60,\n dy: -49,\n color: \"#454a87\",\n strokeWidth: 0.5\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"{\n await visibility();\n return createTile(font[2][\"C\"], {\n type: \"p31m\",\n width: (26 / 2) * Math.E,\n height: (48 / 2) * Math.E,\n columns: 20,\n rows: 20,\n displayColumns: 7,\n displayRows: 7,\n dx: -40,\n dy: -40,\n color: \"#454a87\",\n strokeWidth: 0.5\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"{\n await visibility();\n return createTile(font[1][\"C\"], {\n type: \"p6\",\n width: 26,\n height: 48,\n columns: 20,\n rows: 20,\n displayColumns: 7,\n displayRows: 7,\n dx: -40,\n dy: -40,\n color: \"#454a87\",\n strokeWidth: 0.5\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"{\n await visibility();\n return createTile(font[1][\"F\"], {\n type: \"p6\",\n width: 26,\n height: 48,\n columns: 20,\n rows: 20,\n displayColumns: 7,\n displayRows: 7,\n dx: -40,\n dy: -40,\n color: \"#454a87\",\n strokeWidth: 0.5\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"pattern = {\n await visibility();\n return createTile(font[1][\"R\"], {\n type: \"p6\",\n width: 26,\n height: 48,\n columns: 20,\n rows: 20,\n displayColumns: 7,\n displayRows: 7,\n dx: -40,\n dy: -40,\n color: \"#454a87\",\n strokeWidth: 0.5\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"