31:T1509,{ restart; let polygon = [], centroid = [], mean = []; const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("width", width) .attr("height", height) .on("mousemove", function(){ const p = d3.mouse(this); const vertexVirtual = svg.selectAll(".vertex-virtual") .data([p]) vertexVirtual.enter().append("circle") .attr("class", "vertex-virtual") .attr("r", 4) .merge(vertexVirtual) .attr("transform", d => `translate(${d})`) .raise(); const sidesVirtualData = polygon.length > 0 ? [[polygon[polygon.length - 1], p], [p, polygon[0]]] : [[[0, 0], [0, 0]], [[0, 0], [0, 0]]]; const sidesVirtual = svg.selectAll(".side-virtual") .data(sidesVirtualData) sidesVirtual.enter().append("line") .attr("class", "side-virtual") .merge(sidesVirtual) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]) .raise(); const verticesVirtual = [...polygon, p], ghostCentroid = geometric.polygonCentroid(verticesVirtual), ghostMean = geometric.polygonMean(verticesVirtual); if (centroid[0]){ const centroidMove = svg.selectAll(".centroid-move") .data([[centroid, ghostCentroid]]); centroidMove.enter().append("line") .attr("class", "centroid-move") .merge(centroidMove) .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); } if (mean[0]){ const meanMove = svg.selectAll(".mean-move") .data([[mean, ghostMean]]); meanMove.enter().append("line") .attr("class", "mean-move") .merge(meanMove) .style("display", showMean ? "unset" : "none") .attr("x1", d => d[0][0]) .attr("y1", d => d[0][1]) .attr("x2", d => d[1][0]) .attr("y2", d => d[1][1]); } const centroidVirtual = svg.selectAll(".centroid-virtual") .data([ghostCentroid]) centroidVirtual.enter().append("circle") .attr("class", "centroid-virtual") .attr("r", 5) .merge(centroidVirtual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .raise(); const meanVirtual = svg.selectAll(".mean-virtual") .data([ghostMean]) meanVirtual.enter().append("circle") .attr("class", "mean-virtual") .attr("r", 5) .merge(meanVirtual) .attr("transform", d => `translate(${!polygon.length ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none") .raise(); }) .on("click", function(event){ d3.select(".centroid-move").remove(); d3.select(".mean-move").remove(); polygon.push(d3.pointer(event)); const vertexActual = svg.selectAll(".vertex") .data(polygon) vertexActual.enter().append("circle") .attr("class", "vertex") .attr("r", 4) .attr("cx", d => d[0]) .attr("cy", d => d[1]); const sidesActual = svg.selectAll("polygon") .data([polygon]) sidesActual.enter().append("polygon") .merge(sidesActual) .attr("points", d => d.join(" ")); mean = geometric.polygonMean(polygon); const meanActual = svg.selectAll(".mean") .data([mean]); meanActual.enter().append("circle") .attr("class", "mean") .attr("r", 5) .merge(meanActual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none"); const meanLabel = svg.selectAll(".mean-label") .data([mean]) meanLabel.enter().append("text") .attr("class", "mean-label") .attr("dy", 14) .text("Mean") .merge(meanLabel) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`) .style("display", showMean ? "unset" : "none"); centroid = geometric.polygonCentroid(polygon); const centroidActual = svg.selectAll(".centroid") .data([centroid]); centroidActual.enter().append("circle") .attr("class", "centroid") .attr("r", 5) .merge(centroidActual) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`); const centroidLabel = svg.selectAll(".centroid-label") .data([centroid]) centroidLabel.enter().append("text") .attr("class", "centroid-label") .attr("dy", -6) .text("Centroid") .merge(centroidLabel) .attr("transform", d => `translate(${isNaN(d[0]) ? [-10, -10] : d})`); vertexActual.raise(); }); return svg.node(); }32:T488,{ const svg = d3.select(DOM.svg(width, height)) svg.append("rect") .style("isolation", "isolate") .attr("width", width) .attr("height", height); const polygon = geometric.polygonRegular(5, geometric.polygonArea([[0, 0], [width, 0], [width, height], [0, height]]) / 8, [width / 2, height / 2]); const centroid = geometric.polygonCentroid(polygon); const mean = geometric.polygonMean(polygon); svg.append("polygon") .attr("points", polygon.join(" ")); const blendMode = "lighten"; svg.append("circle") .attr("r", 5) .attr("class", "centroid") .attr("transform", `translate(${centroid})`); svg.append("circle") .attr("r", 5) .attr("class", "mean") .style("mix-blend-mode", blendMode) .attr("transform", `translate(${mean})`); svg.append("text") .attr("class", "centroid-label") .attr("dy", -6) .attr("transform", `translate(${centroid})`) .text("Centroid"); svg.append("text") .attr("class", "mean-label") .attr("dy", 14) .attr("transform", `translate(${mean})`) .text("Mean"); return svg.node(); }33:T5a1,{ const svg = d3.select(DOM.svg(width, height)); svg.append("rect") .attr("width", width) .attr("height", height); const center = [width / 2, height / 2]; const polygon = [ [center[0] - 100, center[1]], [center[0] - 30, center[1]], [center[0] - 30, center[1] - 40], [center[0] - 10, center[1] - 97], [center[0] - 2, center[1] - 100], [center[0], center[1] - 130], [center[0] + 2, center[1] - 100], [center[0] + 10, center[1] - 97], [center[0] + 30, center[1] - 40], [center[0] + 30, center[1]], [center[0] + 100, center[1]], [center[0] + 100, center[1] + 120], [center[0] - 100, center[1] + 120] ]; const centroid = geometric.polygonCentroid(polygon); const mean = geometric.polygonMean(polygon); svg.append("polygon") .attr("points", polygon.join(" ")); svg.append("circle") .attr("r", 5) .attr("class", "centroid") .attr("transform", `translate(${centroid})`); svg.append("circle") .attr("r", 5) .attr("class", "mean") .attr("transform", `translate(${mean})`); svg.append("text") .attr("class", "centroid-label") .attr("dy", -6) .attr("transform", `translate(${centroid})`) .text("Centroid"); svg.append("text") .attr("class", "mean-label") .attr("dy", 14) .attr("transform", `translate(${mean})`) .text("Mean"); return svg.node(); }34:[] 2f:{"title":"geometric.polygonCentroid, geometric.polygonMean","cells":[{"id":0,"value":"md`# geometric.polygonCentroid, geometric.polygonMean`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`Click anywhere to start drawing!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"viewof showMean = Inputs.toggle({ label: \"Show mean:\", value: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"viewof restart = Inputs.button(\"Restart\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`In geometry, a centroid is a polygon's center of mass, while the mean center is the average of its vertices. [Geometric.js](https://github.com/HarryStevens/geometric) provides functions for calculating these: [geometric.polygonCentroid](https://github.com/HarryStevens/geometric#polygonCentroid)(polygon) and [geometric.polygonMean](https://github.com/HarryStevens/geometric#polygonMean)(polygon).\n\nDepending upon the polygon, these points could be close to each other or far away. For instance, in a regular polygon, the centroid and mean center are the same.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`But if the polygon is irregular, and in particular if many of its vertices cluster near each other, the centroid and mean are quite different.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`## Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"geometric = require(\"geometric@3\");","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}