// 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 pgSize = CANVAS_WIDTH;

const pgRadius = pgSize / 2;

​

let c1 = null;

let c2 = null;

let c3 = null;

let cBG = null;

let cStroke = null;

​

const PARAMS = {

  bgColor: "#BEC9E5",

  lineColor: "#53638A", 

  gradientColor_1: "#1C1C1C",

  gradientColor_2: "#2B3D68",

  gradientColor_3: "#BEC9E5",

  bgColorDark: "#1C1C1C",

  lineColorDark: "#BEC9E5",

  gradientColorDark_1: "#333366",

  gradientColorDark_2: "#9EACF0",

  gradientColorDark_3: "#1C1C1C",

  frequency: 0.4,

  maxShift: 40,

  strokeWidth: 0.4,

  seed: 100,

  shapes: 15,

  shapePoints: 10,

  blobs: 4,

  useOutline: false,

  blobScaleFactor: 1.8,

  isInverted: false,

};

​

function setup() {

  createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

​

  frameRate(FR);

  pixelDensity( max( window.devicePixelRatio, 2) );

​

  // add parameters

   pane.addInput(PARAMS, "isInverted");

  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: 50,

  });

  f1.addInput(PARAMS, "shapePoints", {

    step: 1,

    min: 3,

    max: 20,

  });

  f1.addInput(PARAMS, "blobScaleFactor", {

    min: 0.1,

    max: 2

  });

  const f2 = pane.addFolder({

    title: "Multi Blob",

    expanded: true,

  });

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

  imageMode(CENTER);

​

}

​

function adjustValues() {

  noiseSeed(PARAMS.seed);

  if(  PARAMS.isInverted ){

    c1 = color( PARAMS.gradientColor_1 );

    c2 = color( PARAMS.gradientColor_2 );

    c3 = color( PARAMS.gradientColor_3 );

​

    cBG = color( PARAMS.bgColor );

    cStroke = color( PARAMS.lineColor );

  }else{

​

    c1 = color( PARAMS.gradientColorDark_1 );

    c2 = color( PARAMS.gradientColorDark_2 );

    c3 = color( PARAMS.gradientColorDark_3 );

​

    cBG = color( PARAMS.bgColorDark );

    cStroke = color( PARAMS.lineColorDark );

  }

}

​

function draw() {

  background(cBG); 

​

  translate(width / 2, height / 2);

  const shiftVector = createVector( width/2 - mouseX, height/2 - mouseY );

  const maxShiftLength = shiftVector.mag();

  shiftVector.normalize();

​

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

    rotate( TWO_PI * i/PARAMS.blobs );

    const singleShape = createOneShape( i );

​

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

      const iFactor = s/PARAMS.shapes;

      push();

      const imageSize = width/2 - width/2 * iFactor

      const imageX = width/4 - width/4 * iFactor;

      const imageY = height/4 - height/4 * iFactor;

​

      image(singleShape, imageX, imageY, imageSize * PARAMS.blobScaleFactor, imageSize * PARAMS.blobScaleFactor);

      pop();

​

​

      /*

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

      const factor = s / PARAMS.shapes;

​

      const shiftFactor = pow(1.4,s) * 0.5

​

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

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

​

      const shiftX = shiftVector.x * -1 * shiftFactor //(s/PARAMS.shapes) * maxShiftLength;

      const shiftY = shiftVector.y * -1 * shiftFactor //(s/PARAMS.shapes) * maxShiftLength;

      */

    }

  }

}

​

​

const createOneShape = ( nFactor ) => {

  const pg = createGraphics(pgSize, pgSize);

  pg.clear();

  pg.strokeWeight( PARAMS.strokeWidth );

  if( PARAMS.useOutline ){

    pg.stroke(cStroke);

    pg.noFill();

  }else{

    /*

    pg.drawingContext.shadowColor = color(0, 0, 0, 120);

    pg.drawingContext.shadowBlur = 5; // h / 2 + abs( sin( frameCount / h * PI ) ) * h;

    pg.drawingContext.shadowOffsetY = 0; //h / 2;

    pg.drawingContext.shadowOffsetX = 0;

    */

​

    const gradient = pg.drawingContext.createRadialGradient(0,0,0,0,0,pgRadius/2)

​

    gradient.addColorStop(0.0, c1);

    gradient.addColorStop(0.5, c2);

    gradient.addColorStop(1.0, c3);

    pg.drawingContext.fillStyle = gradient;  

​

    pg.stroke(c3);

  }

  pg.translate( pg.width/2, pg.height/2 );

  pg.rotate( PI );

  pg.beginShape();

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

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

    const x = sin(p / PARAMS.shapePoints * TWO_PI) * pgRadius * n;

    const y = cos(p / PARAMS.shapePoints * TWO_PI) * pgRadius * n;

    pg.curveVertex(x, y);

  }

  pg.endShape(CLOSE);

  return pg

}

​

function mousePressed(){

 // isInverted = !isInverted;

}

​