p5js - 不同长度的径向线绘制不正确

Question

我正在做一个 p5js 项目，绘制不同长度的径向线。我在循环中使用此代码段来映射和绘制线条：

var x1 = (this.mapR1)*Math.cos(i*2*Math.PI/this.numberLines);
var y1 = (this.mapR1)*Math.sin(i*2*Math.PI/this.numberLines);
var x2 = (this.mapR1 + this.mapRMinLen + (plot*this.mapRMaxLen*shift))*Math.cos(i*2*Math.PI/this.numberLines + skew);
var y2 = (this.mapR1 + this.mapRMinLen + (plot*this.mapRMaxLen*shift))*Math.sin(i*2*Math.PI/this.numberLines + skew)
p5.line(this.lines[i].x1, this.lines[i].y1, this.lines[i].x2, this.lines[i].y2);;

Plot是一个简单的钟形曲线分布（在0和1之间）使线平滑地改变长度而shift是一个随机生成的数字来随机分散第二个半径并改变长度.

歪斜是事情出错的地方。通过倾斜，我从中心倾斜线条。没有移位，倾斜效果很好，但是一旦我分散了线的长度，计算外半径位置的数学就会变得......好吧，倾斜（附图片）。

这是一个 link 代码笔，您可以在其中明白我的意思：https://codepen.io/chazthetic/pen/KKQNKaM。有没有更好的方法来计算线将排列的第二个点位置？

Answer 1

一个想法是基于x1和y1来计算x2和y2；有点用它们作为计算线段终点的起点。

含义：

var x2 = x1  + (rMinLen + (plot*rMaxLen*shift))*Math.cos(theta + skew);
var y2 = y1  + (rMinLen + (plot*rMaxLen*shift))*Math.sin(theta + skew);

https://codepen.io/lecrte/pen/JjpbwOV

p5js - 不同长度的径向线绘制不正确

p5js - Radial lines of different lengths not drawing correctly

javascript

p5.js