31:Tad1,viewof roomSVG = { const div = html`

`; // create svg element: var svg = d3.create("svg").attr("width", width).attr("height", floorHeight); div.appendChild(svg.node()); // add outer path svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", floorWidth) .attr("height", floorHeight) .attr("fill", "#c5c5c5"); //yield svg.node(); yield div; const intersections = []; if (direction === "horizontal") { for (let index = 0; index < floorHeight / (plankWidth + spacing); ++index) { const yPosition = index * (plankWidth + spacing) + (plankWidth + spacing) / 2; const line = svg .append("line") .attr("x1", 0) .attr("y1", yPosition) .attr("x2", floorWidth) .attr("y2", yPosition) .attr("stroke", "black"); intersections.push([]); } } else { for (let index = 0; index < floorWidth / (plankWidth + spacing); ++index) { const xPosition = index * (plankWidth + spacing) + (plankWidth + spacing) / 2; const line = svg .append("line") .attr("x1", xPosition) .attr("y1", 0) .attr("x2", xPosition) .attr("y2", floorHeight) .attr("stroke", "black"); intersections.push([]); } } // return div; const data = fill(intersections); div.value = data; // div.value = intersections; data.rows.forEach((row, index) => { if (direction === "horizontal") { const yPosition = index * (plankWidth + spacing); let curXPosition = 0; row.forEach((curPlankLength) => { let color = "#966F33"; let stroke = "white"; if (curPlankLength < 0) { color = "transparent"; stroke = "transparent"; } svg .append("rect") .attr("x", curXPosition) .attr("y", yPosition) .attr("width", Math.abs(curPlankLength)) .attr("height", plankWidth) .attr("stroke", stroke) .attr("fill", color); curXPosition += Math.abs(curPlankLength); }); } else { const xPosition = index * (plankWidth + spacing); let curYPosition = 0; row.forEach((curPlankLength) => { let color = "#966F33"; let stroke = "white"; if (curPlankLength < 0) { color = "transparent"; stroke = "transparent"; } svg .append("rect") .attr("x", xPosition) .attr("y", curYPosition) .attr("width", plankWidth) .attr("height", Math.abs(curPlankLength)) .attr("stroke", stroke) .attr("fill", color); curYPosition += Math.abs(curPlankLength); }); } }); //yield svg.node(); return div; }32:Tb19,function fill(rawData, data) { const intersections = JSON.parse(JSON.stringify(rawData)); if (!data) { data = { curPlankRemainingLength: 0, waste: 0, planksUsed: 0, rows: [] }; } if (data.curPlankRemainingLength < minPlankLength) { data.waste += data.curPlankRemainingLength; data.curPlankRemainingLength = 0; } // get next row const row = intersections.shift(); if (row !== undefined) { const rowPlanks = []; // check if there are intersections function add(requiredWidth) { // no intersections // scrap wood that is below minimum plank length if (data.curPlankRemainingLength < minPlankLength) { data.waste += data.curPlankRemainingLength; data.curPlankRemainingLength = 0; } // fill row with planks until full let remainingWidth = requiredWidth; if (data.curPlankRemainingLength) { if (remainingWidth - data.curPlankRemainingLength >= 0) { rowPlanks.push(data.curPlankRemainingLength); } else { rowPlanks.push(requiredWidth); } remainingWidth -= data.curPlankRemainingLength; } while (remainingWidth > 0) { data.planksUsed += 1; if (remainingWidth - plankLength <= 0) { if (remainingWidth < minPlankLength) { const toSubtractFromLastRow = minPlankLength - remainingWidth; rowPlanks[rowPlanks.length - 1] = rowPlanks[rowPlanks.length - 1] - toSubtractFromLastRow; remainingWidth = minPlankLength; data.curPlankRemainingLength += toSubtractFromLastRow; } rowPlanks.push(remainingWidth); } else { rowPlanks.push(plankLength); } remainingWidth -= plankLength; } // remaining width is 0 or negative, this is the part that will be carried over data.curPlankRemainingLength = remainingWidth * -1; } if (!row.length) { if (direction === "horizontal") { add(floorWidth); } else { add(floorHeight); } } else { if (direction === "horizontal") { add(row[1].x); rowPlanks.push((row[0].x - row[1].x) * -1); add(floorWidth - row[0].x); } else { const small = Math.min(...row.map((r) => r.y)); const large = Math.max(...row.map((r) => r.y)); // 1 = small // 2 = large add(small); rowPlanks.push((large - small) * -1); add(floorHeight - large); console.log(row, small, large); } } data.rows.push(rowPlanks); // continue with next row return fill(intersections, data); } else { if (data.curPlankRemainingLength) { data.waste += data.curPlankRemainingLength; data.curPlankRemainingLength = 0; } return data; } }33:[] 2f:{"title":"How many flooring planks do I need for my room?","cells":[{"id":0,"value":"# How many flooring planks do I need for my room?","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"md`Thinking about laminate / parquet flooring your room(s)? This little calculator helps you to find how many planks you'll need, and give you a quick visual on how the floor is going to look like!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof unit = Inputs.radio([\"inch\", \"cm\"], {\n label: \"Units\",\n value: \"cm\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof floorWidth = Inputs.range([100, 1000], {\n value: unit === 'cm' ? 600 : 250,\n step: 1,\n label: `Room width (${unit})`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof floorHeight = Inputs.range([100, 1000], {\n value: unit === \"cm\" ? 400 : 160,\n step: 1,\n label: `Room height (${unit})`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof plankLength = Inputs.range([50, 800], {\n value: unit === \"cm\" ? 128.6 : 48,\n step: 0.1,\n label: `Plank (length, ${unit})`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof plankWidth = Inputs.range([5, 30], {\n value: unit === \"cm\" ? 19.4 : 7.6,\n step: 0.1,\n label: `Plank (width, ${unit})`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof minPlankLength = Inputs.range([0, 100], {\n value: unit === \"cm\" ? 40 : 15,\n step: 1,\n label: `Min. plank length (${unit})`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof direction = Inputs.radio([\"horizontal\", \"vertical\"], {\n label: \"Direction\",\n value: \"horizontal\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`For this ${\n unit === \"cm\"\n ? ((floorHeight * floorWidth) / 10000).toFixed()\n : ((floorHeight * floorWidth) / 144).toFixed()\n} ${unit === \"cm\" ? \"m\" : \"ft\"}² room, you will need ${\n roomSVG.planksUsed\n} planks. The waste will be ${roomSVG.waste.toFixed()} ${unit}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"n_segments = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"// Source: https://bl.ocks.org/bricof/f1f5b4d4bc02cad4dea454a3c5ff8ad7\nfunction btwn(a, b1, b2) {\n if (a >= b1 && a <= b2) {\n return true;\n }\n if (a >= b2 && a <= b1) {\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// Source: https://bl.ocks.org/bricof/f1f5b4d4bc02cad4dea454a3c5ff8ad7\nfunction line_line_intersect(line1, line2) {\n var x1 = line1.x1,\n x2 = line1.x2,\n x3 = line2.x1,\n x4 = line2.x2;\n var y1 = line1.y1,\n y2 = line1.y2,\n y3 = line2.y1,\n y4 = line2.y2;\n var pt_denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);\n var pt_x_num =\n (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);\n var pt_y_num =\n (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);\n if (pt_denom == 0) {\n return \"parallel\";\n } else {\n var pt = { x: pt_x_num / pt_denom, y: pt_y_num / pt_denom };\n if (\n btwn(pt.x, x1, x2) &&\n btwn(pt.y, y1, y2) &&\n btwn(pt.x, x3, x4) &&\n btwn(pt.y, y3, y4)\n ) {\n return pt;\n } else {\n return \"not in range\";\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"// Source: https://bl.ocks.org/bricof/f1f5b4d4bc02cad4dea454a3c5ff8ad7\nfunction path_line_intersections(path, line) {\n var pathEl = path.node();\n var pathLength = pathEl.getTotalLength();\n\n var pts = [];\n for (var i = 0; i < n_segments; i++) {\n var pos1 = pathEl.getPointAtLength((pathLength * i) / n_segments);\n var pos2 = pathEl.getPointAtLength((pathLength * (i + 1)) / n_segments);\n var line1 = { x1: pos1.x, x2: pos2.x, y1: pos1.y, y2: pos2.y };\n var line2 = {\n x1: line.attr(\"x1\"),\n x2: line.attr(\"x2\"),\n y1: line.attr(\"y1\"),\n y2: line.attr(\"y2\")\n };\n var pt = line_line_intersect(line1, line2);\n if (typeof pt != \"string\") {\n pts.push(pt);\n }\n }\n\n return pts;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"spacing = 0","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}