const canvas  = document.getElementById("tree-canvas")
const context = canvas.getContext("2d")

let angle = undefined

function tree(length, n) {
    if (n === 0)
        return
    context.beginPath()
    context.moveTo(0, 0)
    context.lineTo(0, -length)
    context.stroke()

    context.save()
    context.translate(0, -length)

    context.save()
    context.rotate(angle)
    tree(length / 2, n - 1)
    context.restore()

    context.save()
    context.rotate(-angle)
    tree(length / 2, n - 1)
    context.restore()

    context.restore()
}

const depth_input = document.getElementById("depth")
const angle_input = document.getElementById("angle")

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.save()
    context.translate(canvas.width / 2, canvas.height)
    angle = 2 * Math.PI * (parseInt(angle_input.value) / 360)
    tree(canvas.height / 2, parseInt(depth_input.value))
    context.restore()
}

depth_input.addEventListener("input", draw)
angle_input.addEventListener("input", draw)

function updateCanvas() {
    const canvas_size = Math.min(window.innerWidth, window.innerHeight - 255)
    canvas.width  = canvas_size
    canvas.height = canvas_size
    context.strokeStyle = "#DDDDDD"
    context.lineWidth = 0.7
    draw()
}

window.addEventListener("resize", updateCanvas)
updateCanvas()