//
// CONSTANTS
//

// Fern transform matrices source
// https://www.chradams.co.uk/fern/maker.html
// Added a scaling factor as the last coefficient
const FERNS = [
    {
        name: 'Barnsley fern',
        coefs: [[0, 0, 0, 0.16, 0, 0, 0.01, 1],
            [0.85, 0.04, -0.04, 0.85, 0, 1.6, 0.85, 1],
            [0.2, -0.26, 0.23, 0.22, 0, 1.6, 0.07, 1],
            [-0.15, 0.28, 0.26, 0.24, 0, 0.44, 0.07, 1]]
    },
    // {
    //     name: 'Cyclosorus',
    //     coefs: [[0, 0, 0, 0.25, 0, -0.4, 0.02, 1.2],
    //         [0.95, 0.005, -0.005, 0.93, -0.002, 0.5, 0.84, 1.2],
    //         [0.035, -0.2, 0.16, 0.04, -0.09, 0.02, 0.07, 1.2],
    //         [-0.04, 0.2, 0.16, 0.04, 0.083, 0.12, 0.07, 1.2]]
    // },
    // {
    //     name: 'Modified Barnsley fern',
    //     coefs: [[0, 0, 0, 0.2, 0, -0.12, 0.01, 1],
    //         [0.845, 0.035, -0.035, 0.82, 0, 1.6, 0.85, 1],
    //         [0.2, -0.31, 0.255, 0.245, 0, 0.29, 0.07, 1],
    //         [-0.15, 0.24, 0.25, 0.20, 0, 0.68, .07, 1]]
    // },
    {
        name: 'Cultica',
        coefs: [[0, 0, 0, 0.25, 0, -0.14, 0.02, 1],
            [0.85, 0.02, -0.02, 0.83, 0, 1, 0.84, 1],
            [0.09, -0.28, 0.3, 0.11, 0, 0.6, 0.07, 1],
            [-0.09, 0.28, 0.3, 0.09, 0, 0.7, 0.07, 1]]
    },
    {
        name: 'Fishbone',
        coefs: [[0,  0,  0, 0.25, 0, -0.4, 0.02, 1.2],
            [0.95, 0.002, -0.002, 0.93, -0.002, 0.5, 0.84, 1.2],
            [0.035, -0.11, 0.27, 0.01, -0.05, 0.005, 0.07, 1.2],
            [-0.04, 0.11, 0.27, 0.01, 0.047, 0.06, 0.07, 1.2]]
    },
    {
        name: 'Fractal tree',
        coefs: [[0, 0, 0, 0.5, 0, 0, 0.05, 16],
            [0.42, -0.42, 0.42, 0.42, 0, 0.2, 0.4, 16],
            [0.42, 0.42, -0.42, 0.42, 0, 0.2, 0.4, 16],
            [0.1, 0, 0, 0.1, 0, 0.2, 0.15, 16]]
    },
    {
        name: 'Golden Bee',
        coefs: [[0.6178, 0, 0, -0.6178, 0, 1, 0.5, 6],
            [0, -0.786, 0.786, 0, 0.786, 0, 0.5, 6],
            [0, 0, 0, 0, 0, 0, 0, 6],
            [0, 0, 0, 0, 0, 0, 0, 6]]
    }
]

const ZOOM = 18
const WIDTH = 250, HEIGHT = 200
const DWIDTH = 0.5, DHEIGHT = 0.95
const SPEED = 1/150
let ITERATIONS = 1e3

const DOM = {
    canvas: document.getElementById('canvas'),
    controls: {
        current: document.getElementById('current'),
        iterations: document.getElementById('iterations'),
        scaling: document.getElementById('scaling'),
        pause: document.getElementById('pause'),
        matrix: document.getElementById('matrix')
    }
}

//
// DRAW
//

function drawFern() {
    // Clear the canvas
    ctx.clearRect(-WIDTH*DWIDTH, -HEIGHT*DHEIGHT, WIDTH, HEIGHT)

    // Init the coords
    let coords = [0, 0]

    // Generate the coefficients for this frame
    let progress = (Math.cos(FRAMES*SPEED*Math.PI) + 1) / 2
    let coefs = []
    let coefs1 = FERNS[CYCLE%FERNS.length].coefs
    let coefs2 = FERNS[(CYCLE+1)%FERNS.length].coefs
    for (let i=0; i<coefs1.length; i++) {
        coefs[i] = []
        for (let j=0; j<coefs1[i].length; j++) {
            coefs[i][j] = coefs1[i][j]*progress + coefs2[i][j]*(1-progress)
        }
    }

    // Switch the cycle every multiple of PI
    if (FRAMES*SPEED === 1) {
        FRAMES = 0
        CYCLE += 1
        drawText()
    }

    // Draw the fern
    for (let i=0; i<ITERATIONS; i++) {
        // Choose a transformation
        let p = Math.random()
        let sum = 0
        for (let j=0; j<coefs.length; j++) {
            sum += coefs[j][6]
            if (p < sum) {
                // Perform tranformation on the coordinates
                coords = transform(coords, coefs[j])
                break
            }
        }

        // Dräw, bröther
        // Taking the opposite of the y coordinate so that the fern is not upside down
        // coefs[7] is a custom scaling factor
        ctx.beginPath()
        ctx.arc(coords[0]*ZOOM*coefs[0][7], -coords[1]*ZOOM*coefs[0][7], 1, 0, 2*Math.PI)
        ctx.fill()
    }

    // Request next
    FRAMES += 1
    NEXTFRAME = requestAnimationFrame(drawFern)
}


function transform(coords, coefs) {
    return [
        coefs[0]*coords[0] + coefs[1]*coords[1] + coefs[4],
        coefs[2]*coords[0] + coefs[3]*coords[1] + coefs[5]
    ]
}


function drawText() {
    let index = (CYCLE+1)%FERNS.length
    DOM.controls.current.innerHTML = FERNS[index].name
    DOM.controls.scaling.innerHTML = FERNS[index].coefs[0][7]
    let coefs = FERNS[index].coefs
    let matrix = 'a      b      c      d      f      e      p      <br>'
    for (let i=0; i<coefs.length; i++) {
        for (let j=0; j<coefs[i].length-1; j++) {
            if (coefs[i][j] >= 0) matrix += '+'
            matrix += coefs[i][j].toFixed(3) + ' '
        }
        matrix += '<br>'
        // matrix += `${coefs[i].join(' ')}<br>`
    }
    DOM.controls.matrix.innerHTML = matrix
}

//
// CONTROLS
//

DOM.controls.iterations.addEventListener('input', function() {
    let value = this.value
    value = Math.min(Math.max(this.min, value), this.max)
    this.value = value
    ITERATIONS = value
})

DOM.controls.pause.addEventListener('click', function() {
    if (RUNNING) {
        cancelAnimationFrame(NEXTFRAME)
        this.innerHTML = 'Play'
        RUNNING = false
    } else {
        NEXTFRAME = requestAnimationFrame(drawFern)
        this.innerHTML = 'Pause'
        RUNNING = true
    }
})

//
// INDEX
//

//
// Canvas setup
//
const canvas = DOM.canvas
const ctx = canvas.getContext('2d')

canvas.width = WIDTH
canvas.height = HEIGHT

// Center the canvas at the bottom center
ctx.translate(WIDTH*DWIDTH, HEIGHT*DHEIGHT)

ctx.fillStyle = '#218c74'

// Bop it
// Twist it
// Start it
let FRAMES = 0
let CYCLE = 0
let RUNNING = true
let NEXTFRAME = requestAnimationFrame(function() {
    drawFern()
    drawText()
})