let started = false
let player

let bgColor
let leafColors = {}
const width = 720
const height = 480

// Spiral stuff

let pos
let scalar = 5
let scalarInc = 0.3
let incSpeed = 0.03
let angle = 0

let leafs = []
let points = []
let lastLeaf
let start

let runtime = 0
let mvd = 0
let textPos = 600

let fade = 0

function setup() {
    player = createAudio('/assets/music.mp3', (audio) => {
        audio.play()
    });

    const canvas = createCanvas(width, height)
    frameRate(30)
    strokeWeight(5)

    bgColor = color(189, 180, 192)
    leafColors = {
        from: color(32, 156, 47),
        to: color(4, 56, 7)
    }

    start = createVector(width / 2, height / 2)
    pos = createVector(start.x, start.y)
    lastLeaf = createVector(start.x, start.y)

    let startButton = createButton('start');
    startButton.position(width / 2, height / 2 + 50);

    startButton.mousePressed(() => {
        canvas.elt.requestFullscreen()
        setTimeout(() => {
            player.play()
            started = true
        }, 2000)
        startButton.remove()
    })
}


let t = 0.001
let target = {
    x: 600,
    y: 350
}

function draw() {
    if (!started) {
        return
    }

    runtime += deltaTime

    if (runtime > 29000) {
        target.x = 600
        target.y = 300
        // target.x = 600
    } else if (runtime > 27000) {
        target.y = 250
        target.x = 450
    } else if (runtime > 25000) {
        target.y = 300
        target.x = 400
    } else if (runtime > 22500) {
        target.y += 10
        target.x += 10
    }

    push()
    if (runtime > 22500) {
        textPos -= 2.2
        translate(mvd -= 2, 0)

        spiral(true)
        strokeWeight(5)

        const newPos = pos.slerp(
            createVector(target.x, target.y),
            t += 0.000001
        )

        pos.x = newPos.x
        pos.y = newPos.y

        push()
        rotate(0.03, 0)
        textSize(30)
        text(
            'First demo by Razielle // Music donated by Doctor Gekil // Big thank you to the workshop team <3',
            pos.x - mvd - 400 + textPos,
            130
        );
        pop()

        addBranch(createVector(pos.x - mvd, pos.y), PI)
    } else {
        spiral()
    }
    points.forEach((p) => {
        drawPoint(p);
    })
    leafs.forEach((leaf) => {
        if (leaf.scale < leaf.maxScale) {
            leaf.scale += 0.003
        }
        drawLeaf(
            leaf.pos.x,
            leaf.pos.y,
            leaf.stem,
            leaf.scale,
            leaf.angle,
            lerpColor(
                leafColors.from,
                leafColors.to,
                map(frameCount - leaf.born, 0, 800, 0, 1)
            )
        )
    })

    pop()
    if (runtime > 50000) {
        if (player.volume() > 0.1) {
            player.volume(player.volume() - 0.01)
        } else {
            player.stop()
        }
        // push()
        fill(0,0,0, fade += 3)
        rect(0, 0, width, height);
        // pop()
    }
}

function addBranch(pos, angle = null, dist = 150) {
    addPoint(pos);
    if (angle === null) {
        angle = atan2(pos.x - start.x, pos.y - start.y);
    }
    const minDist = constrain(dist / 1.5, 30, 150)
    if (pos.dist(lastLeaf) > random(30, minDist)) {
        // Determine angle to "look" to the center
        addLeaf(pos, angle);
        lastLeaf = createVector(pos.x, pos.y)
    }
}

function spiral(redrawOnly = false) {
    push()
    background(bgColor)
    strokeWeight(5)
    // translate(pos.x, pos.y)
    if (!redrawOnly) {
        pos.y = sin(angle) * scalar + height / 2
        pos.x = cos(angle) * scalar + width / 2

        let dist = pos.dist(start)

        angle += constrain(
            incSpeed / (dist / 130),
            0,
            incSpeed
        );

        //increment the scalar to make a spiral
        scalar += scalarInc

        addBranch(pos, null, dist);
    }
    pop()
}


function addPoint(pos) {
    points.push({
        pos: {...pos},
        born: frameCount
    })
}

function addLeaf(pos, angle) {
    const direction = round(random(0, 1))

    const leaf = {
        pos: {...pos},
        stem: random(10, 30),
        scale: 0.05,
        maxScale: random(0.2, 0.4),
        angle: direction ? -angle + PI : -angle,
        born: frameCount

    }
    leafs.push(leaf)
}

function drawPoint(p) {
    push()
    const color = lerpColor(
        leafColors.from,
        leafColors.to,
        map(frameCount - p.born, 0, 800, 0, 1)
    )
    fill(color)
    stroke(color)
    point(p.pos.x, p.pos.y)
    pop()
}

function drawLeaf(x, y, stemLength, scaleBy, angle, color) {
    //ellipseMode(CORNERS)
    const w = 40
    const w2 = 30
    const h1 = 120
    const h2 = 50
    const h3 = 20


    push()
    translate(x, y)
    scale(scaleBy)
    rotate(angle)
    stroke(color)
    fill(color)
    strokeWeight(2)


    ellipseMode(CORNERS)
    translate(-(w / 2), -stemLength)

    arc(
        0,
        0 - (h1 / 2) - (h2 / 2),
        w,
        0 + (h1 / 2) - (h2 / 2),
        HALF_PI * 3,
        0
    )

    arc(
        0,
        0 - (h1 / 2) - (h2 / 2),
        w,
        0 + (h1 / 2) - (h2 / 2),
        PI,
        HALF_PI * 3
    )

    fill(bgColor)
    arc(
        (w / 2) + 2,
        0 - (h1 / 2) - (h2 / 2) - h3 - 5,
        (w / 2) + w2 + w2,
        0 - (h1 / 2) - (h2 / 2) + h3 - 5,
        HALF_PI + (QUARTER_PI * 1.2),
        PI
    )

    strokeWeight(5)
    line(
        w / 2,
        0 - (h1 / 2) - (h2 / 2) - 5,
        w / 2,
        0 - (h1 / 2) - (h2 / 2) + h3 - 5
    )
    strokeWeight(2)


    arc(
        (w / 2) - 2,
        0 - (h1 / 2) - (h2 / 2) - h3 - 5,
        (w / 2) - w2 - w2,
        0 - (h1 / 2) - (h2 / 2) + h3 - 5,
        0,
        HALF_PI - (QUARTER_PI * 1.2)
    )

    fill(color)

    arc(
        0,
        0,
        w,
        -h2,
        0,
        PI
    )

    line(
        (w / 2),
        0,
        0 + (w / 2),
        0 + stemLength
    )
    pop()

}
