//

// V0.1    2020-04-04    NPGS

//

​

const PIX = 500;

const COLS = 50;

const MAX_R = 5;

const MAX_IT = 100;

const CENTRE_A = 0.0;

const CENTRE_B = 0.0;

const RANGE = 10.0;

const INSCALE = 0.5;

const OUTSCALE = 1.0 / INSCALE;

const PANSCALE = 0.2;

​

function setup() {

  createCanvas(PIX, PIX);

  background(0);

  colorMode(HSB);

​

  col1 = color(0, 70, 90);

  col2 = color(100, 70, 90);

  pallette = [];

  for (i = 0; i < COLS; i++)

    pallette.push(lerpColor(col1, col2, i / (COLS - 1)));

​

  max_rsq = MAX_R * MAX_R;

  cen_a = CENTRE_A;

  cen_b = CENTRE_B;

  ran = RANGE / PIX;

​

  infoOn = true;

  textSize(20);

}

​

function draw() {

  for (i = 0; i < PIX; i++) {

    for (j = 0; j < PIX; j++) {

      c_a = cen_a + ran * (i - PIX / 2);

      c_b = cen_b + ran * (PIX / 2 - j);

​

      zprev_a = 0;

      zprev_b = 0;

      it = 0;

      do {

        z_a = zprev_a * zprev_a - zprev_b * zprev_b + c_a;

        z_b = 2 * zprev_a * zprev_b + c_b;

        rsq = z_a * z_a + z_b * z_b;

​

        zprev_a = z_a;

        zprev_b = z_b;

        it++;

      } while (it < MAX_IT && rsq < max_rsq);

​

      if (rsq > max_rsq)

        stroke(pallette[it % pallette.length]);

      else

        stroke(0);

      point(i, j);

    }

  }

​

  if (infoOn) {

    text(`Centre: (${cen_a}, ${cen_b}) `, 2, 20);

    text(`Range: ${PIX*ran}`, 2, 40);

  }

  noLoop();

}

​

// Keypress:

// H (Home), I (Zoom In), O (Zoom Out), Left/Right/Up/Down Arrows (Pan)

// Space (Toggle Info) 

function keyPressed() {

  if (key === ' ') {

    infoOn = !infoOn;

    loop();

  }

  if (key === 'h') {

    ran = RANGE / PIX;

    cen_a = CENTRE_A;

    cen_b = CENTRE_B;

  } else if (key === 'i')

    ran = INSCALE * ran;

  else if (key === 'o')

    ran = OUTSCALE * ran;

  else if (keyCode === LEFT_ARROW)

    cen_a = cen_a - PANSCALE * PIX * ran;

  else if (keyCode === RIGHT_ARROW)

    cen_a = cen_a + PANSCALE * PIX * ran;

  else if (keyCode === UP_ARROW)

    cen_b = cen_b + PANSCALE * PIX * ran;

  else if (keyCode === DOWN_ARROW)

    cen_b = cen_b - PANSCALE * PIX * ran;

  else

    return true;

​

  loop();

}

​

// Show coordinates on cick

function mouseClicked(event) {

  a = cen_a + ran * (mouseX - PIX / 2);

  b = cen_b + ran * (PIX / 2 - mouseY);

  print(`Coordinates: (${a}, ${b})`);

}