var gpu = new GPU();
var height = 700, width = 1200;
var a = 0;

var kernel = gpu.createKernel(function(xorig, yorig, scale, iters, height, width, coloring){
    let cx = (this.thread.x - width) / scale + xorig;
    let cy = (this.thread.y - height) / scale + yorig;
    // return cx;//[cx * 100, cy * 100, 0];

    let zx = 0, zy = 0, nx = 0, ny = 0, finite = true, dzx = 0, dzy = 0;
    for(let i = 0; i < iters; i++)
    {
        nx = zx * zx - zy * zy + cx;
        ny = 2 * zx * zy + cy;
        if(nx * nx + ny * ny > 4)
        {
            let h = 0;
            if(coloring)
                h = (i * 5) % 360;
            else
                h = (Math.sqrt(i) * 20) % 360;
            let z = 1 - Math.abs((h / 60) % 2 - 1);
            if(h < 60)
                this.color(1, z, 0);
            else if(h < 120)
                this.color(z, 1, 0);
            else if(h < 180)
                this.color(0, 1, z);
            else if(h < 240)
                this.color(0, z, 1);
            else if(h < 300)
                this.color(z, 0, 1);
            else 
                this.color(1, 0, z);
            // this.color(cx * 100, cy * 100, 0);
            finite = false;
            break;
        }
        zx = nx;
        zy = ny;
    }
    if(finite)
        this.color(0, 0, 0);

}, {output: [width, height], graphical: true, debug: true, tactice: "highp"})

/*var testKernel = gpu.createKernel(function()
{
    return 0;
}, {output: [1]});*/

// console.log(testKernel());

var xel = document.getElementById("x");
var yel = document.getElementById("y");
var scaleel = document.getElementById("scale");
var itersel = document.getElementById("iters");

var color = document.getElementById("color")

function update()
{
    try {
        kernel(parseFloat(xel.value), parseFloat(yel.value), parseFloat(scaleel.value), Math.min(parseInt(itersel.value), 2000), height >> 1, width >> 1, color.checked);
    } catch (error) {
        console.log(error);
    }
    
    const canvas = kernel.canvas;
    document.getElementById('here').appendChild(canvas);
}

update();

function logMovement(event)
{
    if(event.buttons & 1)
    {
        xel.value = parseFloat(xel.value) - event.movementX / scaleel.value;
        yel.value = parseFloat(yel.value) + event.movementY / scaleel.value;
        update()
    }
}

document.addEventListener('mousemove', logMovement);

function scroll(event)
{
    scaleel.value = parseFloat(scaleel.value) * (1 - event.deltaY * 0.001);
    update()
}

document.addEventListener('wheel', scroll);