Javascript 用三角法画圆的等距直线

如图所示，我需要一个数学公式，用笛卡尔坐标计算红色圆圈点，它将形成等距线。 我想这不是简单的三角学

我的目标是能够计算出半个圆周围的笛卡尔点，并从中追踪我的直线

使用p5js，我将使用Perlin噪波的随机值，将其与sin或cos（无论什么…）混合，以从这些点跟踪我的线条。一开始这是一个数学问题，其余的对我来说应该很容易，因为我已经有了一个很好的基础，但需要用这个数学优化

---

有什么线索吗？

这是角度（极坐标）和笛卡尔坐标之间的转换问题

这是一个函数

计算线（x、y、半径、距离、角度、偏移）

，它取中心坐标、圆半径、直线之间的距离、直线的角度（弧度）和直线的偏移（垂直于其方向）。它返回一个包含段的数组。线段由一对坐标确定，即

[x1，y1，x2，y2]

下面的代码段允许您使用这些参数并以交互方式查看结果：

函数计算分段（x、y、半径、距离、角度、偏移=0）{
设分段=[]；
对于（让步长=偏移-数学楼层（（半径+偏移）/距离）*距离；步长<半径；步长+=距离）{
设polar=Math.acos（步长/半径）；
let段=[
x+数学cos（角度+极坐标）*半径，
y+数学sin（角度+极坐标）*半径，
x+数学cos（角度-极坐标）*半径，
y+数学正弦（角度-极坐标）*半径
];
段。推（段）；
}
返回段；
}
//I/O管理：
让[inpRadius，inpDistance，inpAngle，inpShift]=document.querySelectorAll（“输入”）；
文件。添加的文件列表器（“输入”，刷新）；
让canvas=document.querySelector（“canvas”）；
设ctx=canvas.getContext（“2d”）；
让cx=canvas.width>>1；
设cy=canvas.height>>1；
函数画圈（x，y，r）{
ctx.beginPath（）；
弧（x，y，r，0，2*Math.PI，false）；
ctx.stroke（）；
}
函数段（[x1，y1，x2，y2]）{
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.stroke（）；
}
函数clear（）{
clearRect（0，0，canvas.width，canvas.height）；
}
函数刷新（）{
//获取当前输入
设radius=Math.max（1，+inpdius.value）；//清除输入
设距离=数学最大值（1，+inpDistance.value）；
设角度=+inpAngle.value*Math.PI/180；//转换为弧度
设移位=+inpShift.value；
//执行计算
设分段=计算分段（cx、cy、半径、距离、角度、偏移）；
//显示结果
清除（）；
拉深圆（cx、cy、半径）；
片段。forEach（drawSegment）；
}
刷新（）
input{width:5em}
画布{背景：#eee}

圆的半径：

线间距：

线的角度（度）：

班次：

给定：

(x_cntr, y_cntr) = the center of the circle, 
radius = radius of the circle, 
dist = distance between lines, 
angle = angle of lines relative to the horizontal Ox axis, 
offset = distance of first line from the border of the circle:

下面是另一个可以完成这项工作的函数。这种方法试图避免在循环中使用余弦和反正弦进行昂贵的计算，并将其替换为仅一次昂贵的sqrt计算。其余的是简单的算术运算（例如乘法和加法）。其思想是在简单的标准情况下计算点的位置，即等距水平线穿过给定半径的圆并以原点（0,0）为中心，然后旋转并平移这些点的坐标，以符合实际圆的边界，角度为直线相对于水平轴的定义角度

函数获取点（x、y、半径、距离、角度、偏移）{
让列出_点的_=[]；
设n=数学楼层（（2*半径-偏移）/距离）+1；
设cos_angle=Math.cos（angle）；
设sin_angle=Math.sin（angle）；
对于（设m=0；m
我觉得你的问题有点离题；也许更适合你的问题。它是简单的三角函数：
x=-r*cos（arcin（y/r））
你的参数是什么？具体来说，如何指定圆的位置和大小、角度、分隔和直线的起点，以及每个圆的单位是什么？或者更简单，使用模具缓冲区，这正是它的用途。我相信p5js有办法制作模具@我不是一个数学专业的证券交易所，这是一个很好的链接，谢谢你的分享。另一种可能的方法是根据你的需要放置线，然后计算它们与圆相交的位置。在这两个交点之间绘制实际直线。或者，简单地使用大多数图形库的“剪裁区域”功能，让库为您完成繁重的工作。另一个变量是线的偏移/起始位置。它有一系列不同的方式可以指定（例如，“最低正x截距”是一种方式）。@rbaryyoung补充道。该死的@trincot，它完全符合我所寻找的。正如Mike R所说，我已经在计算与圆相交的直线时做了一些工作。这使得我的动画重复太多，并且不可能实时运行它。我将研究你的解决方案，并让你知道！非常感谢你抽出时间