// 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;

​

let isInverted = false;

​

const PARAMS = {

  bgColor: "#BEC9E5",

  lineColor: "#53638A",

  frequency: 0.25,

  maxShift: 40,

  strokeWidth: 0.4,

  seed: 100,

  useMultiBlob: false,

  shapes: 12,

  diameter: 250,

  shapePoints: 10,

  angleSize: 60,

  blobs: 6,

  useOutline: true,

};

​

// global variables that are needed

let cutCount = 0;

let sphere_counter = 0;

​

function setup() {

  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

​

  frameRate(FR);

​

  // add parameters

  pane.addInput(PARAMS, "bgColor", {

    view: "color",

  });

  pane.addInput(PARAMS, "frequency", {

    min: 0.1,

    max: 1,

  });

  pane.addInput(PARAMS, "maxShift", {

    min: 1,

    max: 100,

  });

  pane.addInput(PARAMS, "useOutline");

  const f1 = pane.addFolder({

    title: "Base Shape",

  });

  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,

  });

  pane.addInput(PARAMS, "useMultiBlob");

  const f2 = pane.addFolder({

    title: "Multi Blob",

    expanded: false,

  });

  f2.addInput(PARAMS, "angleSize", {

    min: 10,

    max: 180,

  });

  f2.addInput(PARAMS, "blobs", {

    step: 1,

    min: 1,

    max: 10,

  });

  const f3 = pane.addFolder({

    title: "Outline",

  });

  f3.addInput(PARAMS, "lineColor", {

    view: "color",

  });

  f3.addInput(PARAMS, "strokeWidth", {

    min: 0.1,

    max: 2,

  });

​

  adjustValues();

  pane.on("change", adjustValues);

}

​

function adjustValues() {

  noiseSeed(PARAMS.seed);

}

​

function draw() {

  isInverted ? background(PARAMS.lineColor) : background(PARAMS.bgColor)

​

  translate(width / 2, height / 2);

​

  if (PARAMS.useOutline) {

    noFill();

    strokeWeight(PARAMS.strokeWidth);

    if( isInverted ){

      stroke(PARAMS.bgColor);

    }else{

      stroke(PARAMS.lineColor);

    }

  } else {

    noStroke();

    fill(PARAMS.bgColor);

    drawingContext.fillStyle = createGradient();

  }

​

  if (PARAMS.useMultiBlob) {

    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);

​

        endShape(CLOSE);

      }

    }

  } else {

    // shapes

    // bigger to smaller

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

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

      const factor = s / PARAMS.shapes;

      const shiftFactor = pow(1.08,s)

      const shiftX = map( mouseX, 0, width, -1 * PARAMS.maxShift, PARAMS.maxShift );

      const shiftY = map( mouseY, 0, height, -1 * PARAMS.maxShift, PARAMS.maxShift );

      beginShape();

      // first point = center

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

        const n = noise( frameCount * PARAMS.frequency / 100, p + s*0.02 );

        const x = sin(p / PARAMS.shapePoints * TWO_PI) * tD * n + ( shiftX * shiftFactor );

        const y = cos(p / PARAMS.shapePoints * TWO_PI) * tD * n + ( shiftY * shiftFactor );

        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);

  let shadowColor = color(PARAMS.lineColor);

  if( isInverted ){

    c2 = color(PARAMS.bgColor);

    c1 = color(PARAMS.lineColor);

    shadowColor = color(PARAMS.bgColor);

  }

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

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

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

​

  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;

};

​

function mousePressed(){

isInverted = !isInverted;

}

​