var bottom_right

var aspect_ratio

var showWindow = false

var inputChanged = true

var window_top_left

var window_bottom_right

var move_initial

var back

var update

function moveWindow(){

    if(move_initial){

        var X = map(mouseX,0,width,top_left.x,bottom_right.x)

        var Y = map(mouseY,0,height,top_left.y,bottom_right.y)

        var dx = move_initial.x - X

        var dy = move_initial.y - Y

        top_left.x += dx

        top_left.y += dy

        bottom_right.x += dx

        bottom_right.y += dy

    } else {

        move_initial = {x:map(mouseX,0,width,top_left.x,bottom_right.x),y:map(mouseY,0,height,top_left.y,bottom_right.y)}

    }

    inputChanged = true

}

function mousePressed(){

    if(mouseButton === LEFT){

        window_top_left.x = mouseX

        window_top_left.y = mouseY

        showWindow = true

    }

    if(mouseButton === CENTER){

        update = setInterval(moveWindow,10)

    }

}

function mouseReleased(){

    if(mouseButton === LEFT){

        window_top_left.x = min(mouseX,window_top_left.x)

        window_top_left.y = min(mouseY,window_top_left.y)

        window_bottom_right.x = max(mouseX,window_top_left.x)

        window_bottom_right.y = max(mouseY,window_top_left.y)

​

        var window_width = window_bottom_right.x - window_top_left.x

        var window_height = window_bottom_right.y - window_top_left.y

        var window_aspect_ratio = window_width/window_height

        if(window_aspect_ratio > aspect_ratio){

            extra = window_width/aspect_ratio - window_height

            window_top_left.y -= extra/2

            window_bottom_right.y += extra/2

        }

        if(window_aspect_ratio < aspect_ratio){

            extra = aspect_ratio*window_height - window_width

            window_top_left.x -= extra/2

            window_bottom_right.x += extra/2

        }

        showWindow = false

        top_left_x = top_left.x

        top_left_y = top_left.y

        top_left.x = map(window_top_left.x,0,width,top_left_x,bottom_right.x)

        top_left.y = map(window_top_left.y,0,height,top_left_y,bottom_right.y)

        bottom_right.x = map(window_bottom_right.x,0,width,top_left_x,bottom_right.x)

        bottom_right.y = map(window_bottom_right.y,0,height,top_left_y,bottom_right.y)

        inputChanged = true

    }

    if(mouseButton === CENTER){

        clearInterval(update)

        move_initial = undefined

        inputChanged = false

    }

}

function mouseWheel(event) {

    var x = map(mouseX,0,width,top_left.x,bottom_right.x)

    var y = map(mouseY,0,height,top_left.y,bottom_right.y)      

    if(event.delta>0){

        top_left.x = 2*top_left.x - x

        top_left.y = 2*top_left.y - y

        bottom_right.x = 2*bottom_right.x - x

        bottom_right.y = 2*bottom_right.y - y

    } else {

        top_left.x = (top_left.x + x)/2

        top_left.y = (top_left.y + y)/2

        bottom_right.x = (bottom_right.x + x)/2

        bottom_right.y = (bottom_right.y + y)/2

    }

    inputChanged = true

}

​

function setup(){

    createCanvas(windowWidth,windowHeight)

    back = createGraphics(windowWidth,windowHeight)

    colorMode(HSB)

    aspect_ratio = width/height

    var actualHeight = 4

    var actualWidth = actualHeight*aspect_ratio

    top_left = {x:-actualWidth/2,y:actualHeight/2}

    bottom_right = {x:actualWidth/2,y:-actualHeight/2}

    window_top_left = {x:0,y:0}

    window_bottom_right = {x:0,y:0}

}

function draw(){

    image(back,0,0)

    if(inputChanged){

        back.pixelDensity(1)

        back.loadPixels();

        for(var i=0;i<width;i++){

            for(var j=0;j<height;j++){          

                var x = map(i,0,width,top_left.x,bottom_right.x)

                var y = map(j,0,height,top_left.y,bottom_right.y)

                var z = new ComplexNumber()

                var c = new ComplexNumber(x,y)

                for(var h=0;z.mag()<2&&h<255;h++){

                    z.square().plus(c)

                }

                var disp = color(h,255,255) 

                var pix = (i + j * width) * 4

                back.pixels[pix + 0] = red(disp)

                back.pixels[pix + 1] = green(disp)

                back.pixels[pix + 2] = blue(disp)

                back.pixels[pix + 3] = 255

            }

        }

        back.updatePixels();

        inputChanged = false

    }

    if(showWindow){

        var x1 = min(window_top_left.x,mouseX)

        var y1 = min(window_top_left.y,mouseY)

        var x2 = max(window_top_left.x,mouseX)

        var y2 = max(window_top_left.y,mouseY)

        strokeWeight(1)

        stroke(75,255,255)

        fill(42,255,255,0.75)

        rect(x1,y1,x2-x1,y2-y1)

    }

}