javascript - 使用三 Angular 函数绘制穿过圆的等距平行线

Question

如图所示，我需要一个数学公式来计算带有笛卡尔坐标的红色圆圈点，该点将形成等距线。
我猜这不是简单的三 Angular 学......
我的目标是能够计算圆的一半周围的笛卡尔点并从中跟踪我的线条。
使用 p5js，我将使用来自 Perlin 噪声的随机值将其与 sin 或 cos(无论如何……)混合，以从这些点跟踪我的线条。一开始这是一个数学问题，其余的对我来说应该很容易，因为我已经有了一个很好的基础，但需要用这个数学来优化。
任何线索？

Answer 1

这是 Angular (极坐标)和笛卡尔坐标之间的转换问题。
这是一个函数 calculateLines(x, y, radius, dist, angle, shift)它采用中心坐标、圆的半径、线之间的距离、线的 Angular (以弧度为单位)和线的位移(垂直于它们的方向)。它返回一个带段的数组。段由一对坐标确定，即 [x1, y1, x2, y2] .
下面的代码片段允许您使用这些参数并以交互方式查看结果:

function calculateSegments(x, y, radius, dist, angle, shift=0) {
    let segments = [];
    for (let step = shift - Math.floor((radius + shift) / dist) * dist; step < radius; step += dist) {
        let polar = Math.acos(step / radius);
        let segment = [
            x + Math.cos(angle + polar) * radius,
            y + Math.sin(angle + polar) * radius,
            x + Math.cos(angle - polar) * radius,
            y + Math.sin(angle - polar) * radius
        ];
        segments.push(segment);
    }
    return segments;
}

// I/O management:

let [inpRadius, inpDistance, inpAngle, inpShift] = document.querySelectorAll("input");

document.addEventListener("input", refresh);

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let cx = canvas.width >> 1;
let cy = canvas.height >> 1;

function drawCircle(x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI, false);
    ctx.stroke();
}

function drawSegment([x1, y1, x2, y2]) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function refresh() {
    // Get current input
    let radius = Math.max(1, +inpRadius.value); // sanitise input
    let distance = Math.max(1, +inpDistance.value);
    let angle = +inpAngle.value * Math.PI / 180; // convert to radians
    let shift = +inpShift.value;
    
    // Perform the calculation
    let segments = calculateSegments(cx, cy, radius, distance, angle, shift);

    // Display result
    clear();
    drawCircle(cx, cy, radius);
    segments.forEach(drawSegment);
}

refresh();

input { width: 5em }
canvas { background: #eee }

<div style="float: left">
Radius of circle: <input type="number" id="radius" value="50" min="1"><br>
Distance between lines: <input type="number" id="distance" value="14" min="1"><br>
Angle of lines (degrees): <input type="number" id="angle" value="120"><br>
Shift: <input type="number" id="shift" value="0"><br>
</div>
<canvas width="180" height="180"></canvas>