let showGradiant = false; // Show underlying gradient

let showBubbles = false; // Show underlying circles

let showSquares = false; // Show squares

let resolution = 18; // Change simulation resolution

let numBubbles = 10;

​

let field = [];

let bubbles = [];

​

let cols, rows;

​

function setup() {

  createCanvas(700, 700);

  cols = 1 + width / resolution;

  rows = 1 + height / resolution;

  for (let i = 0; i < cols; i++) {

    let k = [];

    for (let j = 0; j < rows; j++) {

      k.push(0);

    }

    field.push(k);

  }

  for (let i = 0; i < numBubbles; i++) {

    bubbles.push(new Bubble());

  }

}

​

function draw() {

  background(0);

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      let sum = 0;

      let x = i * resolution;

      let y = j * resolution;

      for (let b of bubbles) {

        sum += (b.r * b.r) / ((x - b.x) * (x - b.x) + (y - b.y) * (y - b.y));

      }

      field[i][j] = sum;

    }

  }

​

  if (showGradiant) {

    for (let i = 0; i < cols; i++) {

      for (let j = 0; j < rows; j++) {

        fill(field[i][j]*255);

        noStroke();

        rect(i*resolution, j*resolution, resolution, resolution);

      }

    }

  }

  for (let b of bubbles) {

    b.update();

    if (showBubbles) {

      b.show();

    }

  }

​

  for (let i = 0; i < cols - 1; i++) {

    for (let j = 0; j < rows - 1; j++) {

      let x = i * resolution;

      let y = j * resolution;

      let edgeThreshold = 1;

      let c1 = field[i][j] < edgeThreshold ? 0 : 1;

      let c2 = field[i + 1][j] < edgeThreshold ? 0 : 1;

      let c3 = field[i + 1][j + 1] < edgeThreshold ? 0 : 1;

      let c4 = field[i][j + 1] < edgeThreshold ? 0 : 1;

      let state = getState(c1, c2, c3, c4);

      // Interpolate

      let a_val = field[i][j];

      let b_val = field[i + 1][j] ;

      let c_val = field[i + 1][j + 1];

      let d_val = field[i][j + 1];

​

      let a = createVector();

      let amt = (1 - a_val) / (b_val - a_val);

      a.x = lerp(x, x + resolution, amt);

      a.y = y;

​

      let b = createVector();

      amt = (1 - b_val) / (c_val - b_val);

      b.x = x + resolution;

      b.y = lerp(y, y + resolution, amt);

​

      let c = createVector();

      amt = (1 - d_val) / (c_val - d_val);

      c.x = lerp(x, x + resolution, amt);

      c.y = y + resolution;

​

      let d = createVector();

      amt = (1 - a_val) / (d_val - a_val);

      d.x = x;

      d.y = lerp(y, y + resolution, amt);

      if (showSquares) {

        stroke(255, 50);

        strokeWeight(2);

        noFill();

        square(x, y, resolution);

      }

      stroke(255);

      strokeWeight(2);

      switch (state) {

        case 1:

          drawLine(c, d);

          break;

        case 2:

          drawLine(b, c);

          break;

        case 3:

          drawLine(b, d);

          break;

        case 4:

          drawLine(a, b);

          break;

        case 5:

          drawLine(a, d);

          drawLine(b, c);

          break;

        case 6:

          drawLine(a, c);

          break;

        case 7:

          drawLine(a, d);

          break;

        case 8:

          drawLine(a, d);

          break;

        case 9:

          drawLine(a, c);

          break;

        case 10:

          drawLine(a, b);

          drawLine(c, d);

          break;

        case 11:

          drawLine(a, b);

          break;

        case 12:

          drawLine(b, d);

          break;

        case 13:

          drawLine(b, c);

          break;

        case 14:

          drawLine(c, d);

          break;

      }

    }

  }

}

​

function getState(a, b, c, d) {

  return a * 8 + b * 4 + c * 2 + d * 1;

}

​

​

function drawLine(v1, v2) {

  line(v1.x, v1.y, v2.x, v2.y);

}

​