211109a

//reference: .@tetunori's awesome mPSS library

//minimalPerfectSquaredSquares(mPSS) 

//https://github.com/tetunori/minimalPerfectSquaredSquares

//Chromotome

//https://github.com/kgolid/chromotome

​

let palette = [];

let mpss;

let square_arr = [];

let offset;

let square_type;

​

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  angleMode(DEGREES);

​

  offset = width / 15;

  mpss = new mPSS(width - offset * 2);

  square_type = [

    mPSS.tfTypeIdOriginal,

    mPSS.tfTypeIdRotate90,

    mPSS.tfTypeIdRotate180,

    mPSS.tfTypeIdRotate270,

    mPSS.tfTypeIdMirror,

    mPSS.tfTypeIdMirrorRotate90,

    mPSS.tfTypeIdMirrorRotate180,

    mPSS.tfTypeIdMirrorRotate270,

  ];

​

  while (palette.length < 5) {

    palette = shuffle(chromotome.get().colors);

  }

​

  drawGradientShape(width / 2, height / 2, width, true);

​

  push();

  translate(offset, offset);

  let squares = mpss.getSquares(random(square_type));

​

  squares.forEach((_sq) => {

    if (_sq.size > offset / 2) {

      let mpss2 = new mPSS(_sq.size);

      let squares2 = mpss2.getSquares(random(square_type));

      squares2.forEach((_sq2) => {

        _sq2.x += _sq.x;

        _sq2.y += _sq.y;

        _sq2.centerX += _sq.x;

        _sq2.centerY += _sq.y;

        square_arr.push(_sq2);

      });

    } else {

      square_arr.push(_sq);

    }

  });

​

  for (_sq of square_arr) {

    // square(_sq.x, _sq.y, _sq.size);

    push();

    translate(_sq.centerX, _sq.centerY);

    rotate((int(random(4)) * 360) / 4);

    // translate(-_sq.size / 2, -_sq.size / 2);

    // arc(0, 0, _sq.size * 2, _sq.size * 2, 0, 90);

    drawGradientShape(0, 0, _sq.size);

    pop();

  }

​

  pop();

}

​

function drawGradientShape(x, y, d, bool = false) {

  rectMode(CENTER);

  noStroke();

  push();

  translate(x, y);

  if (bool) {

    fill(0, 0, 100, 50);

    rect(0, 0, d, d);

  }

  drawingContext.shadowColor = color(0, 0, 0, 33);

  drawingContext.shadowBlur = d / 5;

  let c = color(random(palette));

  // c.setAlpha(50);

  // translate(d/2,d/2);

  rotate((int(random(4)) * 360) / 4);

  translate(-d / 2, -d / 2);

  fill(c);

  if (bool) {

  } else {

    arc(0, 0, d * 2, d * 2, 0, 90);

    // triangle(0,0,d,0,0,d);

  }

  drawingContext.shadowColor = color(0, 0, 100, 0);

  drawingContext.clip();

  translate(d / 2, d / 2);

  let colors = shuffle(palette.concat());

​

  blendMode(BURN);

​

  for (let i = 0; i < 4; i++) {

    rotate(90);

    let gradient = drawingContext.createRadialGradient(

      -d / 2,

      -d / 2,

      0,

      -d / 2,

      -d / 2,

      d * 5

    );

    gradient.addColorStop(0, colors[i % colors.length]);

    gradient.addColorStop(1 / 5, color(0, 0, 100, 0));

    noStroke();

    fill(0, 0, 100, 0);

    drawingContext.fillStyle = gradient;

    circle(-d / 2, -d / 2, d * 2);

  }

  blendMode(BLEND);

  pop();

}

​