let s = 100;

let metaballs = [];

let font;

let t = 0;

​

function preload() {

  font = loadFont("ABCDiatype-Medium.otf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  colorMode(HSB);

  let points = font.textToPoints("cavolo", 10, 150, 200, { sampleFactor: 0.1 });

​

  for (let i = 0; i < points.length; i++) {

    let b = new Ball(points[i].x, points[i].y, 15);

​

    metaballs.push(b);

  }

}

​

function draw() {

  t++;

  background(220);

  // metaballs[0].x = width/2-50 + Math.sin(t/10)*150;

  // metaballs[0].y = 50 + Math.cos(t/10)*150;

​

  metaballs[0].x = mouseX;

  metaballs[0].y = mouseY;

​

  if (mouseIsPressed) {

    metaballs[0].size = min(metaballs[0].size + 50, 500);

  } else {

    metaballs[0].size = max(metaballs[0].size - 50, 150);

  }

​

  //metaballs[0].size = 200 + Math.sin(t/5)*200

​

  for (let x = 0; x < width; x += gridSize) {

    for (let y = 0; y < height; y += gridSize) {

      let sum = 0;

      for (let j = 0; j < metaballs.length; j++) {

        let xdif = x - metaballs[j].x;

        let ydif = y - metaballs[j].y;

        let d = sqrt(xdif * xdif + ydif * ydif);

        sum += (metaballs[j].size * 1.1) / (d / 2);

      }

​

      let val = map(Math.round(sum / 10) * 10, 30, 90, 0, 80);

      noStroke();

      fill(color(100, 0, val));

      rect(x, y, gridSize, gridSize);

    }

  }

}

​

class Ball {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.size = size;

  }

​

  show() {

    noFill();

    stroke(0);

    circle(this.x, this.y, this.size);

  }

}

​