​

const noiseScale = 3;

​

let waterShader;

​

function preload() {

  waterShader = loadShader("water.vert", "water.frag");

}

​

function setup() {

  createCanvas(900, 900, WEBGL);

  shader(waterShader);

  // An array of Vec3s is just a single array

  // of numbers which are then grouped into 3s

  // IE [0, 1, 2, 3, 4, 5] is interperated as

  // 2 vec3s: (0, 1, 2) and (3, 4, 5)

  // As such, our circles and colours are just 

  // a big array of values

  const circles = [];

  const colours = [];

  let numAcross = floor(sqrt(numCircles));

  print((numAcross)*(numAcross));

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

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

    const x = i/numAcross+random(-0.05,0.05);

    const y = j/numAcross+random(-0.05,0.05);

    const r = random(0.03,0.05);

    circles.push(x, y, r);

    colours.push(noise(x * noiseScale, y * noiseScale));

  }}

  waterShader.setUniform("circles", circles);

  waterShader.setUniform("colours", colours);

  waterShader.setUniform("colourA", [random(1), random(1), random(1)]);

  waterShader.setUniform("colourB", [random(1), random(1), random(1)]);

  waterShader.setUniform("seed", random(100));

  noLoop();

}

​

function draw() {

  rect(0, 0, width, height);

}