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

​

const pane = new Tweakpane.Pane();

​

// constants

const FR = 30;

const CANVAS_WIDTH = 600;

const CANVAS_HEIGHT = 600;

​

const PARAMS = {

  bgColor: "#BEC9E5",

  lineColor: "#53638A",

  seed: 100,

  shapes: 10,

  diameter: 300,

  shapePoints: 4,

  angleSize: 60,

  blobs: 6,

};

​

// global variables that are needed

let cutCount = 0;

let sphere_counter = 0;

​

function setup() {

  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

​

  frameRate(FR);

​

  // add parameters

  const f1 = pane.addFolder({

    title: "Base Shape",

  });

  f1.addInput(PARAMS, "bgColor", {

    view: "color",

  });

  f1.addInput(PARAMS, "lineColor", {

    view: "color",

  });

  f1.addInput(PARAMS, "shapes", {

    step: 1,

    min: 1,

    max: 20,

  });

  f1.addInput(PARAMS, "diameter", {

    min: 20,

    max: 400,

  });

  f1.addInput(PARAMS, "shapePoints", {

    step: 1,

    min: 3,

    max: 20,

  });

  f1.addInput(PARAMS, "angleSize", {

    min: 10,

    max: 180,

  });

  f1.addInput(PARAMS, "blobs", {

    step: 1,

    min: 1,

    max: 10,

  });

​

  adjustValues();

  pane.on("change", adjustValues);

}

​

function adjustValues() {

  noiseSeed(PARAMS.seed);

}

​

function draw() {

  background(PARAMS.bgColor);

  noStroke();

​

  translate(width / 2, height / 2);

​

  drawingContext.fillStyle = createGradient();

​

  for (let b = 0; b < PARAMS.blobs; b++) {

    rotate(TWO_PI / PARAMS.blobs);

​

    // shapes

    // bigger to smaller

    for (let s = 0; s < PARAMS.shapes; s++) {

      const tD = map(s, 0, PARAMS.shapes, PARAMS.diameter, 0);

      beginShape();

​

      // first point = center

      curveVertex(0, 0);

      for (let p = 0; p <= PARAMS.shapePoints; p++) {

        const n = map(noise(frameCount * 0.004, p * ( s * 0.01 ) ), 0, 0.8, 0.5, 1, true);

​

        const x =

          tD * sin((p / PARAMS.shapePoints) * radians(PARAMS.angleSize)) * n;

        const y =

          tD * cos((p / PARAMS.shapePoints) * radians(PARAMS.angleSize)) * n;

​

        curveVertex(x, y);

      }

      curveVertex(0, 0);

​

      /*for( let p = 0; p < PARAMS.shapePoints; p++ ){

​

      const n = noise( frameCount * 0.004, p );

      let x = sin( p/PARAMS.shapePoints * TWO_PI ) * tD * n;

      let y = cos( p/PARAMS.shapePoints * TWO_PI ) * tD * n;

​

​

      curveVertex( x, y );

    }

    */

      endShape(CLOSE);

    }

  }

}

​

const createGradient = () => {

  // define the start and stop points for the gradient

  let gradient = drawingContext.createLinearGradient(

    20,

    20,

    width - 20,

    height - 20

  );

​

  let radius = 150;

  let x1 = width / 2 - radius;

  let y1 = height / 2 - radius;

  let x2 = width / 2 + radius;

  let y2 = height / 2 + radius;

​

  // define the gradient with the points we calculated

  let g = drawingContext.createLinearGradient(x1, y1, x2, y2);

​

  let c1 = color(PARAMS.bgColor);

  let c2 = color(PARAMS.lineColor);

  g.addColorStop(0, c1.toString());

  g.addColorStop(0.5, c2.toString());

  g.addColorStop(1, c1.toString());

​

  let shadowColor = color(PARAMS.lineColor);

  shadowColor.setAlpha(60);

​

  drawingContext.shadowOffsetX = 0;

  drawingContext.shadowOffsetY = 5;

  drawingContext.shadowBlur = 30;

  drawingContext.shadowColor = shadowColor.toString();

​

  // then draw a shape with this gradient

  /*drawingContext.fillStyle = g;

  beginShape();

  for (let a=0; a<TWO_PI; a+=radians(45)) {

    let x = width/2 + cos(a) * radius;

    let y = height/2 + sin(a) * radius;

    vertex(x, y);

  }

  endShape(CLOSE);

  */

​

  return g;

};

​