Edit in JSFiddle

<div>
    Mandelbrot set - high resolution challenge<br/>
    I think some kind of big numbers are required<br/>
    <b>Keep click the canvas</b> to zoom<br/>
    <b>Press up key</b> to restore initial size<br/>
    <canvas id="canvas1">
        your browser can't display canvas
    </canvas>
</div>
<script type="application/processing" data-processing-target="canvas1">
Pixel[] data;
int WIDTH = 192;
int HEIGHT = 128;
PImage img = createImage(WIDTH, HEIGHT, RGB);

int maxIterations = 50;
float brightFactor = 255.0 / maxIterations;

float zoom_factor = 1.05;
float xmin = -2.0, ymin = -1.0, xmax = 1.0, ymax = 1.0;

void setup() {
    size(WIDTH*3, HEIGHT*3);
    //noLoop();
    
    int i, j, k=0;
    data = new Pixel[WIDTH * HEIGHT];
    for(j=0; j<HEIGHT; j++){
        for(i=0; i<WIDTH; i++){
            data[k] = new Pixel((float)i/WIDTH, (float)j/HEIGHT, color(0, 0, 127));
            k++;
        }
    }
}

void keyPressed() {
    if(keyCode == UP){
        xmin = -2.0, ymin = -1.0, xmax = 1.0, ymax = 1.0;
    }
}

void draw() {
    int len = data.length;
    
    if(mousePressed){
        float mx = (float)mouseX / width;
        float my = (float)mouseY / height;
        if(mx >= 0.0 && mx <= 1.0 && my >= 0.0 && my <= 1.0){
            mx = xmin + (xmax-xmin) * mx;
            my = ymin + (ymax-ymin) * my;
            //mx = (mx - 0.5) * 2; my = (my - 0.5) * 2;
            xmin = mx - (mx - xmin) / zoom_factor;
            xmax = mx + (xmax - mx) / zoom_factor;
            ymin = my - (my - ymin) / zoom_factor;
            ymax = my + (ymax - my) / zoom_factor;
        }
    }
    
    background(#ffffff);
    noStroke();
    for(int i=0; i<len; i++){
        data[i].update(xmin,ymin, xmax,ymax);
        img.pixels[i] = data[i].c;
    }
    image(img, 0, 0, width, height);
}

class Pixel {
    float x, y; // relative position in canvas (0.0 ~ 1.0)
    color c;
    
    Pixel(float xx, float yy, color col) {
        x = xx; y = yy; c = col;
    }
    
    // top left: (x0, y0)
    // bottom right: (x1, y1)
    // repeats z <- zz + c
    // finds the iteration count where the point goes out the set
    void update(float x0, float y0, float x1, float y1) {
        int count = 0;
        
        float cx = x0 + x*(x1-x0);
        float cy = y0 + y*(y1-y0);
        float zx = 0.0, zy = 0.0;
        float zx_temp, d;
        for(var i=0; i<maxIterations; i++){
            zx_temp = zx;
            zx = zx*zx - zy*zy + cx;
            zy = 2*zx_temp*zy + cy;
            d = zx*zx + zy*zy;
            if(d > 4) break;
            else count++;
        }
        d = 255 - count * brightFactor;
        c = color(d,d,d);
    }
}
</script>