let _shader;

let hw, hh;

let balls;

​

function preload() {

  _shader = loadShader("shader.vert", "shader.frag");

}

​

function setup() {

  createCanvas(800, 600, WEBGL);

  pixelDensity(1);

  shader(_shader);

  hh = height / 2;

  hw = width / 2;

  balls = [];

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

    let radius = random(5, 150);

    balls.push({

      x: random(radius, width-radius),

      y: random(radius, height-radius),

      vx: random(0.5, 3),

      vy: random(0.5,3),

      r: radius,

    })

  }

  frameRate(60);

}

​

function draw() {

  background(220);

  let ballData = new Float32Array(3 * 10);

  // for (let b in balls) {

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

    let b = balls[i];

    b.x += b.vx;

    b.y += b.vy;

    if (b.x < b.r || b.x > width-b.r) b.vx *= -1;

    if (b.y < b.r || b.y > height-b.r) b.vy *= -1;

    let baseIndex = 3 * i;

    ballData[baseIndex] = b.x;

    ballData[baseIndex+1] = b.y;

    ballData[baseIndex+2] = b.r;

  }

  // shader stuff

  _shader.setUniform("balls", ballData);

  _shader.setUniform("width", width);

  _shader.setUniform("height", height);

  rect(-hw, -hh, width, height);

}

​

function keyPressed() {

  if (key === "s") saveGif("metaballs.gif", 10);

}