let metaballs = []

let font

​

function preload(){

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

}

​

function setup() {

  pixelDensity(1);

  createCanvas(windowWidth, 200);

  colorMode(HSB)

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

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

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

    metaballs.push(b)

  }

}

​

function draw() {

  background(220);

  metaballs[0].x = mouseX;

  metaballs[0].y = mouseY

  metaballs[0].size = 500

​

loadPixels();

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

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

      let index = 4 * (x + y * width) ;

      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) /d

      }

      let col = color(0,0,Math.round(sum/20)*20)

​

      set(x, y, col)

    }

  }

​

  updatePixels();

}

​

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)

  }

}

​