220518a

let palette;

let img;

let w = 800;

let ns = 100;

​

function setup() {

  createCanvas(800, 800);

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

  angleMode(DEGREES);

  noSmooth();

​

  palette = random(colorScheme).colors.concat();

}

​

function draw() {

  background(random(palette));

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

    img = createGraphics(width, height, P2D);

    let offset = width / 5;

​

    createPattern(img, offset, offset, width - offset * 2, width / 15);

​

    imageMode(CENTER);

    image(img, width / 2, height / 2);

    let minD = map(i, 0, 5, width / 3, width / 10);

    separateGrid(img, offset / 2, offset / 2, width - offset, minD);

  }

  noLoop();

}

​

function createPattern(target, x, y, d, minD) {

  let sepNum = int(random(1, 6));

  let w = d / sepNum;

  let bool = random() > 0.5;

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

    for (let j = 0; j < sepNum; j++) {

      let nx = x + i * w;

      let ny = y + j * w;

      let n = noise(nx / ns, ny / ns, frameCount / ns);

      if (w > minD) {

        createPattern(target, nx, ny, w, minD);

      } else {

        target.push();

        target.translate(nx + w / 2, ny + w / 2);

        target.rotate((int(random(4)) * PI) / 2);

        target.translate(-w / 2, -w / 2);

        target.noStroke();

        for (let scl = 1; scl > 0; scl -= 1 / 3) {

          let gradient = target.drawingContext.createRadialGradient(

            0,

            0,

            0,

            0,

            0,

            w * scl

          );

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

          gradient.addColorStop(0, colors[0]);

          gradient.addColorStop(1, colors[1]);

          target.drawingContext.fillStyle = gradient;

        target.drawingContext.shadowColor = color(colors[2]);

        target.drawingContext.shadowBlur = width / 30;

          // target.fill(random(palette));

          if (bool) {

            target.triangle(0, 0, 0, w * scl, w * scl, 0);

          } else {

            target.arc(0, 0, w * 2 * scl, w * 2 * scl, 0, PI / 2, PIE);

          }

        }

        target.pop();

      }

    }

  }

}

​

function separateGrid(img, x, y, d, minD) {

  let sepNum = int(random(1, 4));

  let w = d / sepNum;

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

    for (let j = 0; j < sepNum; j++) {

      let nx = x + i * w;

      let ny = y + j * w;

      let n = noise(nx / ns, ny / ns, frameCount / ns);

      if (w > minD) {

        separateGrid(img, nx, ny, w, minD);

      } else {

        let g = img.get(nx, ny, w, w);

        g.resize(100, 100);

        // image(g, nx + w / 2, ny + w / 2);

        let wStep = int(random(3, 12));

        let count = 0;

        push();

        translate(nx + w / 2, ny + w / 2);

        // scale((w-5)/w);

        rectMode(CENTER);

        fill(0, 0, 100, 0);

        noStroke();

        // rect(0, 0, w, w);

        circle(0,0,w);

        drawingContext.clip();

        let dir = random() > 0.5 ? -1 : 1;

        for (let ww = w; ww > 0; ww -= w / wStep) {

          push();

          rotate(dir * (180 / wStep) * count++);

          image(g, 0, 0, ww, ww);

          pop();

        }

        pop();

      }

    }

  }

}

​

let colorScheme = [

  {

    name: "Benedictus",

    colors: ["#F27EA9", "#366CD9", "#5EADF2", "#636E73", "#F2E6D8"],

  },

  {

    name: "Cross",

    colors: ["#D962AF", "#58A6A6", "#8AA66F", "#F29F05", "#F26D6D"],

  },

  {

    name: "Demuth",

    colors: ["#222940", "#D98E04", "#F2A950", "#BF3E21", "#F2F2F2"],

  },

  {

    name: "Hiroshige",

    colors: ["#1B618C", "#55CCD9", "#F2BC57", "#F2DAAC", "#F24949"],

  },

  {

    name: "Hokusai",

    colors: ["#074A59", "#F2C166", "#F28241", "#F26B5E", "#F2F2F2"],

  },

  {

    name: "Hokusai Blue",

    colors: ["#023059", "#459DBF", "#87BF60", "#D9D16A", "#F2F2F2"],

  },

  {

    name: "Java",

    colors: ["#632973", "#02734A", "#F25C05", "#F29188", "#F2E0DF"],

  },

  {

    name: "Kandinsky",

    colors: ["#8D95A6", "#0A7360", "#F28705", "#D98825", "#F2F2F2"],

  },

  {

    name: "Monet",

    colors: ["#4146A6", "#063573", "#5EC8F2", "#8C4E03", "#D98A29"],

  },

  {

    name: "Nizami",

    colors: ["#034AA6", "#72B6F2", "#73BFB1", "#F2A30F", "#F26F63"],

  },

  {

    name: "Renoir",

    colors: ["#303E8C", "#F2AE2E", "#F28705", "#D91414", "#F2F2F2"],

  },

  {

    name: "VanGogh",

    colors: ["#424D8C", "#84A9BF", "#C1D9CE", "#F2B705", "#F25C05"],

  },

  {

    name: "Mono",

    colors: ["#D9D7D8", "#3B5159", "#5D848C", "#7CA2A6", "#262321"],

  },

  {

    name: "RiverSide",

    colors: ["#906FA6", "#025951", "#252625", "#D99191", "#F2F2F2"],

  },

];

​