31:T1505,draftOverview = { const resMult = 1; const numWarp = 24; const numShafts = 4; const idealMargin = 20*resMult; const margin = {top: 84*resMult + idealMargin, bottom: idealMargin, left: idealMargin, right: 76*resMult + idealMargin} const innerMargin = 10*resMult; const gridSize = 20*resMult; const gridWeight = [1*resMult,3*resMult]; // [inner lines, outer lines] // threading pattern let threadingPattern = Array(numWarp).fill(0).map((x,i) => ((i < (numWarp/3) || i >= (numWarp*2/3)) ? i : (numWarp+numShafts/2-1-i)) % numShafts); // peg tie up const tieUp = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]] const numTreadles = tieUp[0].length; // twill let treadlingPattern = [[0,1],[1,2],[2,3],[3,0]] treadlingPattern = treadlingPattern.concat(treadlingPattern) const numWeft = treadlingPattern.length const context = drawDraft(threadingPattern, tieUp, treadlingPattern, true, gridSize, margin, innerMargin, false, gridWeight); //---------------------- // colored blocks const opacity = .8 // warp threading label context.fillStyle = `rgba(255,100,100,${opacity})` context.fillRect(margin.left + gridWeight[1]/2, margin.top + gridWeight[1]/2, numWarp*gridSize - gridWeight[1], numShafts*gridSize - gridWeight[1]) // tie up label context.fillStyle = `rgba(255,250,100,${opacity})` context.fillRect(margin.left + numWarp*gridSize + innerMargin + gridWeight[1]/2, margin.top + gridWeight[1]/2, tieUp[0].length*gridSize - gridWeight[1], numShafts*gridSize - gridWeight[1]) // fabric label context.fillStyle = `rgba(70,255,250,${opacity})` context.fillRect(margin.left + gridWeight[1]/2, margin.top + innerMargin + numShafts*gridSize + gridWeight[1]/2, numWarp*gridSize - gridWeight[1], treadlingPattern.length*gridSize - gridWeight[1]) // treadle label context.fillStyle = `rgba(255,150,255,${opacity})` context.fillRect(margin.left + numWarp*gridSize + innerMargin + gridWeight[1]/2, margin.top + innerMargin + numShafts*gridSize + gridWeight[1]/2, tieUp[0].length*gridSize - gridWeight[1], treadlingPattern.length*gridSize - gridWeight[1]) //---------------------- // colored block: labels const fontSizeBlocks = 18*resMult; const fontSize = 15*resMult; const xMidCol1 = margin.left + numWarp*gridSize/2; const xMidCol2 = margin.left+innerMargin + (numWarp + numTreadles/2)*gridSize; const yMidRow1 = margin.top + numShafts*gridSize/2; const yMidRow2 = margin.top + innerMargin + (numShafts + numWeft/2)*gridSize; context.fillStyle = "black"; context.font = `${ fontSizeBlocks }px Tahoma`; context.textBaseline = "middle"; context.textAlign = "center"; context.fillText('warp threading', xMidCol1, yMidRow1); context.fillText('tie-up', xMidCol2, yMidRow1); context.fillText('fabric preview', xMidCol1, yMidRow2); context.fillText('treadle', xMidCol2, yMidRow2 - fontSizeBlocks/2); context.fillText('pattern', xMidCol2, yMidRow2 + fontSizeBlocks/2); //---------------------- // treadle/shaft labels const labelOffset = 20*resMult; const lineLength = labelOffset - innerMargin + gridWeight[1]; let xLabel, yLabel_t = [0,0], yLabel_s = [0,0] context.font = `${ fontSize }px Tahoma`; xLabel = margin.left + innerMargin + (numWarp + numTreadles) * gridSize; yLabel_t[0] = margin.top + (-4.5 + .5)*gridSize; yLabel_t[1] = margin.top + (-1.5 + .5) * gridSize; yLabel_s[0] = margin.top + gridSize/2; yLabel_s[1] = margin.top + (numShafts - .5) * gridSize; // text context.textAlign = "start"; context.fillText('treadle 0', xLabel + labelOffset, yLabel_t[0]) context.fillText('treadle 3', xLabel + labelOffset, yLabel_t[1]) context.fillText('shaft 3', xLabel + labelOffset, yLabel_s[0]) context.fillText('shaft 0', xLabel + labelOffset, yLabel_s[1]) // lines from tie-up block to text context.strokeStyle="black"; context.lineWidth = 2*resMult; context.beginPath(); // lines to treadle labels context.moveTo(xLabel - (numTreadles - .5)*gridSize, margin.top) context.lineTo(xLabel - (numTreadles - .5)*gridSize, yLabel_t[0]) context.lineTo(xLabel + lineLength, yLabel_t[0]) context.moveTo(xLabel - gridSize/2, margin.top) context.lineTo(xLabel - gridSize/2, yLabel_t[1]) context.lineTo(xLabel + lineLength, yLabel_t[1]) // lines to shaft labels context.moveTo(xLabel, yLabel_s[0]); context.lineTo(xLabel + lineLength, yLabel_s[0]); context.moveTo(xLabel, yLabel_s[1]); context.lineTo(xLabel + lineLength, yLabel_s[1]); context.stroke(); // ellipses between text const rEllipsis = 1.5*resMult; const yEllipsis = Array(3).fill(0).map((x,i) => (i-1) * .5); // positions as fraction of gridSize context.beginPath(); yEllipsis.forEach(x => context.ellipse(xLabel + labelOffset*2, (yLabel_s[1]+yLabel_s[0])/2 + x*gridSize, rEllipsis, rEllipsis,0,Math.PI*2,0)); yEllipsis.forEach(x => context.ellipse(xLabel + labelOffset*2, (yLabel_t[1]+yLabel_t[0])/2 + x*gridSize, rEllipsis, rEllipsis,0,Math.PI*2,0)); context.fill() return context.canvas }32:T503,md`--- ## Tie-up pattern Dark grid squares mean that the shaft (row number) is connected to the treadle (column number). Light/white squares mean that there is no connection. ### Data config: In the code, the tie up is represented as an array of arrays. Consider this 2-shaft, 2-treadle example: [[1,0],[0,1]]. ${ drawStandaloneGrid_solid(20,[[1,0],[0,1]].reverse()) } The inner array [1,0] represents the bottom row in the diagram, connections from the first shaft to the treadles. In this case, shaft 0 is connected to treadle 0. Shaft 1, represented by [0,1], is connected to treadle 1. A shaft can be connected to multiple treadles. As a more complicated example, consider: [[1,0,0,0,1,0],[0,1,0,0,0,1],[0,0,1,0,1,0],[0,0,0,1,0,1]]. ${ drawStandaloneGrid_solid(20,[[1,0,0,0,1,0],[0,1,0,0,0,1],[0,0,1,0,1,0],[0,0,0,1,0,1]].reverse()) } There is a linear mapping between the shafts and the first 4 treadles (treadle 0 raises shaft 0, treadle 1 raises shaft 1, etc). However, the inner array [1,0,0,0,1,0] (the bottom row in the tie-up diagram) reveals that shaft 0 is connected to treadles 0 and 4. The right 2 columns reveal that treadle 4 raises both shafts 0 and 2 and treadle 5 raises shafts 1 and 3. `33:T40c,md`--- ## Fabric preview Sometimes, the fabric representation is just solid blocks, and sometimes it's more clear that the block is warp-facing or weft-facing. The following 2 are equivalent: ${ drawStandaloneGrid_solid(20, computeCloth([0,1,2,3,0,1,2,3], [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]], [0,1,2,3,0,1,2,3].map(x => [x]))) } ${ drawStandaloneGrid(20, computeCloth([0,1,2,3,0,1,2,3], [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]], [0,1,2,3,0,1,2,3].map(x => [x])), drawWarp(), drawWeft()) } ### Data config: The fabric preview is represented as an array of arrays of boolean values, where 'true' means that the warp-weft intersection is warp-facing, and 'false' means that the intersection is weft-facing. This data is computed from the three inputs: warp threading, tie-up, and weft treadle pattern. `34:Tb49,function drawDraft (threadingPattern, tieUp, treadlingPattern, fabricIsGrid = false, gridSize = 20, margin, innerMargin=6, returnCanvas = true, gridWeight = [1,2], backgroundColor = "#f6f6f6", drawWarp_f = drawWarp(), drawWeft_f = drawWeft()) { if (!margin) margin = {top: 2, bottom: 2, left: 2, right: 2}; // default // calculate dimensions const numWarp = threadingPattern.length; const numWeft = treadlingPattern.length; const numShafts = tieUp.length; const numTreadles = tieUp[0].length; const width = margin.left + margin.right + innerMargin + (numWarp + numTreadles) * gridSize; const height = margin.top + margin.bottom + innerMargin + (numShafts + numWeft) * gridSize; // define context let context = DOM.context2d(width,height) // compute info const fabric = computeCloth(threadingPattern, tieUp, treadlingPattern); const threadingGrid = expandWarpThreading(threadingPattern, numShafts); const treadlingGrid = expandWeftTreadling(treadlingPattern, numTreadles); if (backgroundColor) { context.fillStyle = backgroundColor; context.fillRect(0,0,width,height); } //------------------------------------ // draw sections const xCol2 = margin.left + innerMargin + numWarp*gridSize; const yCol2 = margin.top + innerMargin + numShafts*gridSize; // threading pattern fillGridSquares_solid(context, margin.left, margin.top, gridSize, threadingGrid, "darkgrey", "white") drawGridLines(context, margin.left, margin.top, gridSize, numShafts, numWarp, ...gridWeight) // tie up // make a copy of tieUp to prevent mutating the orig data let tempTieUp = Array(tieUp.length).fill(0).map((x,i) => tieUp[i]) fillGridSquares_solid(context, xCol2, margin.top, gridSize, tempTieUp.reverse(), "darkgrey", "white") drawGridLines(context, xCol2, margin.top, gridSize, numShafts, numTreadles, ...gridWeight) // treadling pattern fillGridSquares_solid(context, xCol2, yCol2, gridSize, treadlingGrid, "darkgrey", "white") drawGridLines(context, xCol2, yCol2, gridSize, numWeft, numTreadles, ...gridWeight) // fabric if (fabricIsGrid) { fillGridSquares_solid(context, margin.left, yCol2, gridSize, fabric, "darkgrey", "white") drawGridLines(context, margin.left, yCol2, gridSize, numWeft, numWarp, ...gridWeight) } else { fillGridSquares(context, margin.left, yCol2, gridSize, fabric, drawWarp_f, drawWeft_f) drawGridLines(context, margin.left, yCol2, gridSize, numWeft, numWarp, 0, gridWeight[1]) } //------------------------------------ // output if (returnCanvas) { // return the canvas for immediate display return context.canvas; } else { // return the DOM element for further additions/edits return context; } }35:[] 2f:{"title":"Generate a weaving draft","cells":[{"id":0,"value":"md`# Generate a weaving draft\n\nA piece of woven fabric can be simplified into a series of intersections of warp and weft threads; the over-under pattern of the threads is what locks the threads together and creates a solid piece of cloth (see: [Weaving imagery](/@lemonnish/weaving-imagery)).\n\nA weaving draft is a 2-dimensional set of instructions for weaving patterned fabric.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"{\n const numWarp = 32;\n const numShafts = 4;\n \n const idealMargin = 6;\n const margin = {top: idealMargin, bottom: idealMargin, \n left: idealMargin, right: idealMargin}\n const innerMargin = 10;\n const gridSize = 17;\n \n // threading pattern\n let threadingPattern = Array(numWarp).fill(0)\n .map((x,i) => ((i < (numWarp/4) || ((i >= (numWarp*2/4)) && i < (numWarp*3/4)))\n ? i\n : (numWarp+numShafts/2-1-i)) % numShafts);\n \n // peg tie up\n const tieUp = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]\n \n // twill\n let treadlingPattern_a = [[0,1],[1,2],[2,3],[3,0]]\n treadlingPattern_a = treadlingPattern_a.concat(treadlingPattern_a)\n let treadlingPattern_b = [[1,2],[0,1],[3,0],[2,3]]\n treadlingPattern_b = treadlingPattern_b.concat(treadlingPattern_b)\n \n let treadlePattern = treadlingPattern_a.concat(treadlingPattern_b)\n \n return drawDraft(threadingPattern, tieUp, treadlePattern, false, gridSize, margin, innerMargin);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## Layout of a weaving draft\n\nA weaving draft is comprised of 4 sections:\n\n- A **warp threading pattern** dictates which warp thread is tied to which shaft. Each column is a single warp thread, and each row is a different shaft.\n- A **tie-up diagram** shows how each shaft is connected to treadles. A treadle might activate a single shaft, or it might activate multiple shafts. Each shaft can be connected to multiple treadles (although this also depends on the type of loom).\n- A **treadle pattern** tells the weaver how to manipulate the treadles for each weft throw.\n- A **fabric preview** is a representation of the woven fabric, and tells whether each intersection of warp and weft threads is warp-facing or weft-facing.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"DOM.download(await canvasToBlob(draftOverview),\"weavingDraftLayout.png\",\"Download diagram as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`\n**Note:** all the labels are 0-indexed. For example, if there are 4 shafts, they are numbered 0, 1, 2, and 3.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`---\n## Warp threading pattern\nEach column is represents one warp thread. The dark square denotes which shaft the warp thread is attached to.\n\n### Data config:\nThe warp threading pattern is entered as one long array, where each element in the array represents one warp thread and the shaft number.\n\nFor example, consider this pattern using 4 shafts: [0,1,2,3,0,1,2,3,0,1,2,3]. \n${ drawStandaloneGrid_solid(20,expandWarpThreading([0,1,2,3,0,1,2,3,0,1,2,3],4)) }\n\nThis is an example of a \"straight-threaded warp\". This warp has 12 threads, with the shaft number incrementing from one warp thread to the next. After reaching the largest-numbered shaft, the next warp thread is threaded through shaft 0.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`---\n## Treadle pattern\nFor each row in the treadle patter, the dark squares represent the treadle/s that should be activated to raise the appropriate shafts (and therefore lay the weft thread in the appropriate shed). Multiple treadles can be activated at the same time.\n\n### Data config:\nThe treadle pattern is represented as an array of arrays, where the outer array represents each weft row in the final fabric, in top-down order. The inner arrays contain the treadle numbers that are activated for that row.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"md`---\n## Example weaving drafts\n\n### Plain weave:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"{\n const warp = [0,1,0,1,0,1,0,1]\n const tieUp = [[1,0],[0,1]]\n const weft = [0,1,0,1,0,1].map(x => [x])\n return drawDraft(warp, tieUp, weft)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`### 2x2 twill between plain weave rows:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"{\n const warp = [0,1,2,3,0,1,2,3]\n const tieUp = [[0,0,1,1,0,1],[0,1,1,0,1,0],[1,1,0,0,0,1],[1,0,0,1,1,0]]\n const weft = [5,4,5,4,0,1,2,3,0,1,2,3,4,5,4,5].map(x => [x])\n return drawDraft(warp, tieUp, weft)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md`### Waffle weave:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"{\n const warp = [0,1,2,3,4,3,2,1,0,1,2,3,4,3,2,1,0]\n const tieUp = [[0,1,1,1,1],[1,0,1,1,1],[0,1,0,1,1],[0,0,1,0,1],[0,0,0,1,0]]\n const weft = warp.map(x => [x])\n return drawDraft(warp, tieUp, weft)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"md`---\n## Try it for yourself\nDefine three arrays representing the warp threading order, tieUp pattern, and treadle pattern:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"md`### Warp threading:\n${ warpOrder.length > 0 && warpOrder.map(x => Number.isInteger(x)).reduce((a,b) => a && b) ? '' \n : `Error! Every element of the array must be an integer.`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"warpOrder = [0,1,2,3,0,1,2,3,0,1,2,3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`### Tie up:\n${ !!tieUp && tieUp.length > 0 ? '' : 'Define the variable tieUp below.' }\n${ !!tieUp && (tieUp.length > warpOrder.max) ? `Error! the number of shafts used in warpOrder is larger than the number of shafts in tieUp.` : '' }\n${ tieUp.length===0 || tieUp.map(x => x.length === tieUp[0].length).reduce((a,b) => a && b) ? '' : 'Error! the rows in tieUp have different lengths.' }\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"tieUp = [[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"md`### Treadle pattern:\n${ treadlePattern.map(x => x.map(y => y < tieUp[0].length).reduce((a,b) => a && b)).reduce((a,b) => a && b)\n ? ''\n : 'Error! the treadles cannot exceed the number of treadles in the tie up pattern.'}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"treadlePattern = [[0],[1],[2],[3],[0,1,2],[3,0,1],[2,3,0],[1,2,3],[0],[1],[2],[3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"exampleDraft = drawDraft(warpOrder, tieUp, treadlePattern)","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"DOM.download(await canvasToBlob(exampleDraft),\"weavingDraft.png\",\"Download diagram as PNG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`---\n\n---\n\n---\n\nTo draw a weaving draft in another Observable notebook, import the main function:\n\nimport { drawDraft } from \"@lemonnish/generate-a-weaving-draft\"\n\n---\n\n---\n\n---\n\n## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`### Compute the final fabric`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"function computeCloth (threadingPattern, tieUp, treadlingPattern) {\n // return an array of arrays of boolean values\n // output[x][y] = true: the intersection of weft row x and warp thread y is warp-facing\n // output[x][y] = false: the intersection of weft row x and warp thread y is weft-facing\n let cloth = Array(treadlingPattern.length).fill(0).map(x => Array(threadingPattern.length).fill(0))\n for (let warp = 0; warp < threadingPattern.length; warp++) {\n for (let weft = 0; weft < treadlingPattern.length; weft++) {\n cloth[weft][warp] = treadlingPattern[weft].map(x => !!tieUp[threadingPattern[warp]][x])\n .reduce((a,b) => a || b);\n }\n }\n return cloth\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`### Manipulate warp/weft threading for drawing the draft`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"function expandWarpThreading (input, numShafts) {\n // input: N-element array\n // intermediate calc: an array of 'numShafts' elements, each an N-element array of 'true'/'false' values\n // intermedArr[x][y] = 'true': input[y] appears on shaft x\n // intermedArr[x][y] = 'false': input[y] does not appear on shaft x\n // return: invert the shaft ordering of the intermediate calculated value\n let arr = Array(numShafts).fill(0).map(x => Array(input.length).fill(false))\n for (let i = 0; i < input.length; i++) {\n arr[input[i]][i] = true;\n }\n return arr.reverse();\n \n // need to arr.reverse() -- destructive function\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"function expandWeftTreadling (input, numTreadles) {\n let arr = Array(input.length).fill(0).map(x => Array(numTreadles).fill(false))\n for (let row = 0; row < input.length; row++) {\n for (let i = 0; i < input[row].length; i++) {\n arr[row][input[row][i]] = true;\n }\n }\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`### Draw 2D grids with different patterns (solid/warp/weft)\nThese are used to draw the different sections of the draft.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"function drawGridLines (context, x, y, gridSize, numRows, numCols, innerWeight=1, outerWeight=2, color=\"black\") {\n // Draw a 2D grid (numRows x numCols) of squares (side length = gridSize)\n // The top-left corner is situated at (x,y)\n // Lines have width of innerWeight / outerWeight\n \n if (innerWeight > 0) {\n context.strokeStyle = color;\n context.lineWidth = innerWeight;\n context.beginPath();\n for (let row=1; row < numRows; row++) {\n context.moveTo(x, y + row*gridSize)\n context.lineTo(x + numCols*gridSize, y + row*gridSize)\n }\n for (let col=1; col < numCols; col++) {\n context.moveTo(x + col*gridSize, y)\n context.lineTo(x + col*gridSize, y + numRows*gridSize)\n }\n context.closePath();\n context.stroke();\n }\n if (outerWeight > 0) {\n context.lineWidth = outerWeight;\n context.strokeRect(x, y, numCols * gridSize, numRows * gridSize)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"function fillGridSquares_solid (context, x, y, gridSize, pattern, tColor = \"darkgrey\", fColor = null) {\n // Pattern is an array (representing rows) of arrays of boolean values (representing a column of the row)\n // 'true' = fill the square with tColor\n // 'false' = fill the square with fColor (or do nothing, if value is null)\n // Individual squares in the grid have side length = gridSize\n // The top-left corner is situated at (x,y)\n \n let fillSquare_t, fillSquare_f\n let fillSquare = color => {\n return (cxt, posX, posY, size) => {\n cxt.fillStyle = color;\n cxt.fillRect(posX, posY, size, size);\n }\n }\n \n // function for filling square\n if (tColor === null) {\n fillSquare_t = () => {};\n } else {\n fillSquare_t = fillSquare(tColor);\n }\n \n if (fColor === null) {\n fillSquare_f = () => {};\n } else {\n fillSquare_f = fillSquare(fColor);\n }\n \n fillGridSquares(context, x, y, gridSize, pattern, fillSquare_t, fillSquare_f)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function fillGridSquares (context, x, y, gridSize, pattern, tPattern, fPattern) {\n // pattern is an array (representing rows) of arrays of boolean values (representing a column of the row)\n // 'true' = fill the square with tPattern\n // 'false' = fill the square with fPattern\n // tPattern and fPattern are functions that take as input (context, x, y, gridSize) and \n // draw the appropriate pattern at (x,y) on context\n // Individual squares in the grid have side length = gridSize\n // The top-left corner is situated at (x,y)\n \n for (let row = 0; row < pattern.length; row++) {\n for (let col = 0; col < pattern[row\n ].length; col++) {\n if (pattern[row][col]) {\n tPattern(context, x + col*gridSize, y + row*gridSize, gridSize);\n } else {\n fPattern(context, x + col*gridSize, y + row*gridSize, gridSize);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"md`The functions drawStandaloneGrid() and drawStandaloneGrid_solid() generate canvas elements that get inserted directly into the text, to illustrate examples of the weaving draft sections.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"function drawStandaloneGrid_solid (gridSize, pattern, tColor = \"darkgrey\", fColor = \"white\",\n margin = {top:1,bottom:1,left:5,right:5}, \n backgroundColor = null, gridWeight = [1,2]) {\n // gridWeight = [inner weight, outer weight]\n const width = margin.left + margin.right + pattern[0].length * gridSize;\n const height = margin.top + margin.bottom + pattern.length * gridSize;\n \n const context = DOM.context2d(width,height);\n \n if (backgroundColor) {\n context.fillStyle = backgroundColor;\n context.fillRect(0,0,width, height);\n }\n fillGridSquares_solid(context, margin.left, margin.top, gridSize, pattern, tColor, fColor)\n drawGridLines(context, margin.left, margin.top, gridSize, pattern.length, pattern[0].length, ...gridWeight)\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"function drawStandaloneGrid (gridSize, pattern, tPattern, fPattern, \n margin = {top:1,bottom:1,left:5,right:5},\n backgroundColor = null, gridWeight = [0,2]) {\n // gridWeight = [inner weight, outer weight]\n const width = margin.left + margin.right + pattern[0].length * gridSize;\n const height = margin.top + margin.bottom + pattern.length * gridSize;\n \n const context = DOM.context2d(width,height);\n \n if (backgroundColor) {\n context.fillStyle = backgroundColor;\n context.fillRect(0,0,width,height);\n }\n fillGridSquares(context, margin.left, margin.top, gridSize, pattern, tPattern, fPattern)\n drawGridLines(context, margin.left, margin.top, gridSize, pattern.length, pattern[0].length, ...gridWeight)\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`The functions drawWarp() and drawWeft() can be customized to change what gets drawn at a warp-facing or weft-facing thread intersection. The code could even be modified to show a more realistic fabric preview, like the blue/pink diagram towards the top of the page (generated [here](/@lemonnish/weaving-imagery))\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"function drawWarp (color, borderWidth = .25) {\n color = color ? color : \"lightgreen\";\n let borderColor = d3.color(color).darker(.75);\n return (context, x, y, gridSize) => {\n context.fillStyle = color;\n context.fillRect(x, y, gridSize, gridSize);\n \n context.fillStyle = borderColor;\n context.fillRect(x, y, gridSize * borderWidth, gridSize);\n context.fillRect(x + (1-borderWidth)*gridSize, y, gridSize * borderWidth, gridSize);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"function drawWeft (color, borderWidth = .25) {\n color = color ? color : \"green\";\n let borderColor = d3.color(color).darker(.75);\n return (context, x, y, gridSize) => {\n context.fillStyle = color;\n context.fillRect(x, y, gridSize, gridSize);\n \n context.fillStyle = borderColor;\n context.fillRect(x, y, gridSize, gridSize * borderWidth);\n context.fillRect(x, y + (1-borderWidth)*gridSize, gridSize, gridSize * borderWidth);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`### Draw the full weaving draft`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`---\n## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { canvasToBlob } from \"@lemonnish/weaving-imagery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"d3 = require('d3-color')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}