Javascript webgl中递归分形二维树的绘制

我试图在webgl中绘制一个简单的二叉分形树，但是分支的角度不符合我的要求。我通过将顶点的点绘制成一个数组来绘制树，然后将该数组插入一个float32array，然后调用drawArray（LINE_STRIPE）

这是本周一到期的编程作业。我确实记得在高中时递归地画了一棵二元分形树，但它是用scratch完成的。我也有很长一段时间没有做任何需要三角运算的数学了

下面的函数是一个递归函数，它将顶点的坐标推送到一个数组中，该数组稍后将被传递到一个数组中

函数创建点（x、y、长度、深度、角度、点）
{
如果（深度>0）
{
//划线
点推力（（x+长度）*数学正弦（角度））；
点推力（（y+长度）*数学余弦（角度））；
设currentx=（x+长度）*数学sin（角度）；
设电流y=（y+长度）*数学cos（角度）；
//画左枝
角度+=数学PI/4；
控制台。日志（角度）；
创建点（（x+长度/2）*数学sin（角度），（y+长度/2）*数学cos（角度），长度/2，深度-1，角度，点）；
//不知何故又回到过去了
点推力（电流x）；
点。推送（当前）；
//画右枝
角度-=Math.PI/2；
控制台。日志（角度）；
创建点（（x+长度/2）*数学sin（角度），（y+长度/2）*数学cos（角度），长度/2，深度-1，角度，点）；
返回点；
}
返回；
}

预期的输出是递归深度为2的树，它只是一个简单的Y形。树枝应与树干底部旋转45度。但是，正如您在我的输出中看到的，情况并非如此：

---

右分支实际上不是45度角，尽管看起来很近。

LINE\u STRIPE

不是您想要的类型，因为线条条是一条连贯的线条。
使用基本类型

行

。因此，每个分支都会创建一条单独的线段：

该函数必须计算当前分支的端点，并将线段的两个顶点添加到点列表中：

设x2=x+length*Math.sin（角度）；
设y2=y+长度*数学cos（角度）；
点推（x，y，x2，y2）；

通过e递归调用在当前分支的末尾添加2个新分支：

createPoints（深度-1，x2，y2，长度/2，角度+Math.PI/4，点）；
创建点（深度1、x2、y2、长度/2、角度-Math.PI/4、点）；

功能的完整编码：

函数创建点（深度、x、y、长度、角度、点）{
如果（深度
线条\u线条
不是您想要的类型，因为线条是一条连贯的线条。

使用原语类型
行
。因此每个分支都会创建一个单独的线段：

该函数必须计算当前分支的端点，并将线段的两个顶点添加到点列表中：

设x2=x+length*Math.sin（角度）；
设y2=y+长度*数学cos（角度）；
点推（x，y，x2，y2）；

通过e递归调用在当前分支的末尾添加2个新分支：

createPoints（深度-1，x2，y2，长度/2，角度+Math.PI/4，点）；
创建点（深度1、x2、y2、长度/2、角度-Math.PI/4、点）；

功能的完整编码：

函数创建点（深度、x、y、长度、角度、点）{
如果（深度）为什么在你的树中，经过第一根树枝，树枝的角度大约为22.5度？我的作业要求每个树枝都以45度的角度分支。另外，我如何在作业中使用线条？TA建议我使用线条带，只是在现有线条上重新绘制，以返回到旧的顶点。我在我的树只有一半被画出来了，它也被画向一边。之所以会这样，是因为你说x2=x+length*Math.cos（角度），当它应该是sin时，y应该被cos乘以。哦，这是有道理的。我的起始角度是0，而不是pi/2。@EdmundLiang，不管怎样，我已经改变了它。现在你可以通过0。为什么在你的树中，经过第一根树枝，树枝的角度大约是22.5度？我的任务要求每个树枝都以45度的角度分支还有，我如何在作业中使用线条？助教建议我使用线条带，只是在现有的线条上重新绘制，以返回到旧的顶点。我有另一个错误，我的树只有一半被绘制，它也被绘制到侧面。发生这种情况的原因是因为你说x2=x+length*Math.cos（角度），当它应该是sin，y应该被cos乘以。哦，这是有道理的。我的起始角度是0，而不是pi/2。@EdmundLiang无论如何，我已经改变了它。现在你可以通过0了。
function createPointsStrip(depth, x, y, length, angle, points) {

    if (depth <= 0)
        return;

    // end of current line segment
    let x2 = x + length * Math.sin(angle);
    let y2 = y + length * Math.cos(angle);

    // add point
    points.push(x2, y2);

    // create 2 branches
    createPointsStrip(depth-1, x2, y2, length/2, angle+Math.PI/4, points);
    points.push(x2, y2);
    createPointsStrip(depth-1, x2, y2, length/2, angle-Math.PI/4, points);
    points.push(x2, y2);
}