// require https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js

​

const pane = new Tweakpane.Pane();

​

// constants

const FR = 30;

const CANVAS_WIDTH = 1920/2;

const CANVAS_HEIGHT = 1080/2;

​

​

const PARAMS = {

  bgColor: "#FFF",

  fillColor: "#000",

  diameter: 10,

  // noise

  noiseAmplitude: 0.4,

  noiseFrequency: 0.08,

  seed: 100,

};

​

// global variables that are needed

let cutCount = 0;

let sphere_counter = 0;

​

function setup() {

  const cnv = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

  noFill();

  frameRate(FR)

  // add parameters

  const f1 = pane.addFolder({

    title: 'Base Shape',

  });

  f1.addInput(PARAMS, "bgColor", {

    view: 'color',

  });

   f1.addInput(PARAMS, "fillColor", {

    view: 'color',

  });

  f1.addInput(PARAMS, "diameter", {

    min: 3,

    max: 50,

  });

  const f2 = pane.addFolder({

    title: 'Noise',

  });

  f2.addInput(PARAMS, "seed", {

    step: 1,

    min: 0,

    max: 999,

  });

  f2.addInput(PARAMS, "noiseAmplitude", {

    min: 0,

    max: 1,

  });

  f2.addInput(PARAMS, "noiseFrequency", {

    step: 0.001,

    min: 0,

    max: 0.1,

  });

  const btn = pane.addButton({title: 'Save'});

​

  btn.on('click', () => {

    save(cnv, 'myCanvas.jpg');

  });

  noiseSeed( PARAMS.seed )

  pane.on("change", ()=>{

    noiseSeed( PARAMS.seed );

    redraw();

  });

  noLoop();

}

​

function draw() {

  background(PARAMS.bgColor);

  fill(PARAMS.fillColor);

  noStroke();

  for( let x = 0; x < width / PARAMS.diameter; x++ ){

    for( let y = 0; y < height / PARAMS.diameter; y++ ){

      const n = noise( PARAMS.noiseFrequency * x, PARAMS.noiseFrequency * y ) * PARAMS.noiseAmplitude;

      const diam = n * PARAMS.diameter;

      const posX = x * PARAMS.diameter + PARAMS.diameter/2;

      const posY = y * PARAMS.diameter + PARAMS.diameter/2;

      circle( posX, posY, diam )

    }

  }

​

}