Attempting to create a binary fractal tree in webgl, but struggling with the branch angles not aligning as desired. The approach involves plotting vertex points into an array, converting it into a float32array, and then utilizing drawArrays(LINE_STRIPE) for rendering.
This task is part of a programming assignment due soon. While I have prior experience with recursively drawing a binary fractal tree in scratch during high school, it has been a while since I delved into trigonometry.
Below is a recursive function that populates an array with vertex coordinates for use in a float32array:
function createPoints(x, y, length, depth, angle, points)
{
if(depth > 0)
{
//draws line
points.push((x + length) * Math.sin(angle));
points.push((y + length) * Math.cos(angle));
let currentx = (x + length) * Math.sin(angle);
let currenty = (y + length) * Math.cos(angle);
//draw left branch
angle += Math.PI / 4;
console.log(angle);
createPoints((x + length/2) * Math.sin(angle), (y + length/2) * Math.cos(angle), length/2, depth - 1, angle, points);
//backtrack
points.push(currentx);
points.push(currenty);
//draw right branch
angle -= Math.PI / 2;
console.log(angle);
createPoints((x + length/2) * Math.sin(angle), (y + length/2) * Math.cos(angle), length/2, depth - 1, angle, points);
return points;
}
return;
}
Expected output is a simple Y-shaped tree of recursion depth 2 with 45-degree rotated branches. However, the generated output does not align as intended:
https://i.sstatic.net/2jZZw.png
The right branch does not align at 45 degrees, despite appearing close.