From e27387ba1610620e2a2bff2caa75137f54443503 Mon Sep 17 00:00:00 2001 From: kgalvin Date: Wed, 8 Nov 2023 12:03:27 -0800 Subject: [PATCH] update angle coloring --- src/components/ContourData.tsx | 6 +-- src/utils/MarchingSquares.js | 81 ++++++++++++++++++++++------------ 2 files changed, 56 insertions(+), 31 deletions(-) diff --git a/src/components/ContourData.tsx b/src/components/ContourData.tsx index 3e423b6..03e4f01 100644 --- a/src/components/ContourData.tsx +++ b/src/components/ContourData.tsx @@ -29,7 +29,7 @@ const ContourData: React.FC = ({title, matrixData, cx, cy, col setTolerance(0); } }, [showDataModal]); - + return ( <> setShowDataModal(true)} selected={showDataModal} width={"16rem"} height={"2rem"} @@ -59,9 +59,9 @@ const ContourData: React.FC = ({title, matrixData, cx, cy, col fontSize={11} tooltip={"tolerance of contour smoothing"} knobValue={tolerance} - step={0.01} + step={0.1} min={0} - max={1} + max={10} onKnobInput={setTolerance} />

download link diff --git a/src/utils/MarchingSquares.js b/src/utils/MarchingSquares.js index d7f6459..852a5ba 100644 --- a/src/utils/MarchingSquares.js +++ b/src/utils/MarchingSquares.js @@ -54,14 +54,11 @@ export class MarchingSquares { let src = audioContext.createBufferSource(); src.buffer = audioBuffer; - //console.log('contour: ', JSON.stringify(this.contour.length)); - // this.drawContour(this.contour, "red"); const simplified = simplify(this.contour, this.tolerance, true); const directionList = this.calculateDirectionList(simplified); console.log("directionList ", directionList); console.log('redrawing with tolerance', this.tolerance); - //this.ctx?.clearRect(0, 0, this.inputValues.length, this.inputValues.length); - if (this.ctx) this.drawContour(this.ctx, simplified, "blue"); + if (this.ctx) this.drawContour(this.ctx, simplified); console.log('simplified contour length: ', simplified.length); @@ -91,47 +88,75 @@ export class MarchingSquares { calculateDirectionList(coords) { let directions = []; coords.forEach((coord, index) => { - if (index < coords.length - 2) { - directions.push(this.calcDir(coord, coords[index + 1], coords[index + 2])); - } else if (index === coords.length - 2) { - directions.push(this.calcDir(coord, coords[index + 1], coords[0])); + if (index === 0) { + directions.push(this.calcDir(coords[coords.length - 1], coord, coords[index + 1])); + } else if (index <= coords.length - 2) { + directions.push(this.calcDir(coords[index - 1], coord, coords[index + 1])); } else if (index === coords.length - 1) { - directions.push(this.calcDir(coord, coords[0], coords[1])); + directions.push(this.calcDir(coords[index - 1], coord, coords[0])); } }); return directions; } - calcDir(p0, p1, p2) { - return (Math.atan2(p2.y - p0.y, p2.x - p0.x) - Math.atan2(p1.y - p0.y, p1.x - p0.x)) * 180 / Math.PI; + calcDir(a, b, c) { + let angle = (Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x)) * 180 / Math.PI; + console.log("angle ", angle); + return angle; + /*let vector_b_to_a = {x: a.x - b.x, y: a.y - b.y}; + let vector_b_to_c = {x: c.x - b.x, y: b.y - b.y}; + let length_b_to_a = Math.sqrt(vector_b_to_a.x * vector_b_to_a.x + vector_b_to_a.y * vector_b_to_a.y); + let length_b_to_c = Math.sqrt(vector_b_to_c.x * vector_b_to_c.x + vector_b_to_c.y * vector_b_to_c.y); + let dot_product = vector_b_to_a.x * vector_b_to_c.x + vector_b_to_a.y * vector_b_to_c.y; + let angle = Math.acos(dot_product / (length_b_to_a * length_b_to_c)); + console.log("angle ", angle); + return angle * 180 / Math.PI;*/ + /*const AB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2)); + const BC = Math.sqrt(Math.pow(B.x - C.x, 2) + Math.pow(B.y - C.y, 2)); + const AC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2)); + const angle = Math.acos((BC * BC + AB * AB - AC * AC) / (2 * BC * AB)); + console.log("angle ", angle * 180 / Math.PI); + return angle * 180 / Math.PI;*/ + /*const crossproduct = (c.x - b.x) * (b.y - a.y) - (c.y - b.y) * (b.x - a.x) + const dotproduct = (c.x - b.x) * (b.x - a.x) + (c.y - b.y) * (b.y - a.y) + const angle = Math.atan2(crossproduct, dotproduct) + console.log("angle", angle * 180 / Math.PI); + return angle * 180 / Math.PI;*/ } - drawContour(ctx, pointList, color) { - //this.ctx?.clearRect(0, 0, this.inputValues.length, this.inputValues.length); + drawContour(ctx, pointList) { ctx.beginPath(); ctx.lineWidth = 1; - //ctx.strokeStyle = color; console.log('pointList: ', pointList.length); pointList.forEach((point, index) => { - if (index < pointList.length - 2) { - let shade = 0; - const rawShade = this.calcDir(point, pointList[index + 1], pointList[index + 2]); - console.log('shade: ', rawShade); - if (rawShade < 0) { - shade = rawShade / 2 + 180; - } else { - shade = rawShade / 2; - } - ctx.beginPath(); - ctx.lineWidth = 1; - ctx.strokeStyle = `hsl(${shade}, 100%, 50%)`; - this.line(ctx, point, pointList[index + 1]); - } else if (index === pointList.length - 1) this.line(ctx, point, pointList[0]); + let a, c; + let b = point; + if (index === 0) { + a = pointList[pointList.length - 1]; + c = pointList[index + 1]; + } else if (index <= pointList.length - 2) { + a = pointList[index - 1]; + c = pointList[index + 1]; + } else if (index === pointList.length - 1) { + a = pointList[index - 1]; + c = pointList[0]; + } + const angle = this.calcDir(a, b, c); + const shade = this.getColorFromAngle(angle); + ctx.beginPath(); + ctx.lineWidth = 1; + ctx.strokeStyle = `hsl(${shade}, 100%, 50%)`; + this.line(ctx, b, c); ctx.stroke(); }); } + getColorFromAngle(angle) { + //return angle < 0 ? angle / 2 + 180 : angle / 2; + return angle + 360 / 2; + } + traceContour(x, y) { /*