Using library

minimalPerfectSquaredSquares by Tetsunori Nakayama

https://github.com/tetunori/minimalPerfectSquaredSquares

*//////////////

​

//mpass variables

let MPASS;

let SQUARES;

const MPASS_MODES =

            [

                mPSS.tfTypeIdOriginal,

                mPSS.tfTypeIdRotate90,

                mPSS.tfTypeIdRotate180,

                mPSS.tfTypeIdRotate270,

                mPSS.tfTypeIdMirror,

                mPSS.tfTypeIdMirrorRotate90,

                mPSS.tfTypeIdMirrorRotate180,

                mPSS.tfTypeIdMirrorRotate270

            ];

​

//colors

const COLURL = 

            [

                "https://coolors.co/0e0e11-888f91-f17041-ffaa42-fff238"

            ];

let COLS;

​

//random seed number

let SEED_NUM;

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

    // Create mpss instance

    MPASS = new mPSS(allSize());

    Init();

    noStroke();

}

​

​

//refresh color, seed number and square composite 

function Init()

{

    randomSeed();//reset seed number

    COLS = createCols(random(COLURL));

    SEED_NUM = int(random(10000));

    const mode = random(MPASS_MODES);

    SQUARES = MPASS.getSquares(mode);

}

​

​

function draw() {

    if(frameCount % 120 == 0)Init();

    randomSeed(SEED_NUM);

  background(255);

  translate(width / 2 - allSize() / 2, height / 2 - allSize() / 2);

​

    // Draw each squares

    for(let i = 0; i < SQUARES.length; i++)

    {

        let sq = SQUARES[i];

        const c  = shuffle(COLS);

        drawUnit(sq.x, sq.y, sq.size + 1, c);

    }

}

​

​

​

​

​

function allSize()

{

    return min(width, height) * 0.9;

}

​

​

function createCols(_url)

{

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = '#' + arr[i];

  }

  return arr;

}

​

​

​

function drawUnit(cox, coy, s, c)

{

    const rn = random(5);

    rectMode(CENTER);

    ellipseMode(CENTER);

    noStroke();

    push();

    translate(cox + s / 2, coy + s / 2);

    if(rn < 1){

        patternColors(c);

        patternAngle(int(random(8)) * HALF_PI / 2);

        pattern(PTN.wave(s /2, s / 20, s / 5, s / 10));

        rectPattern(0, 0, s , s);

    }

    else if(rn < 2)

    {

        patternColors(c);

        patternAngle(0);

        pattern(PTN.triangle(s / 4, s / 2));

        rectPattern(0, 0, s, s);

    }

    else if(rn < 3){

        patternColors([c[0], c[1]]);

        patternAngle(int(random(8)) * HALF_PI / 2);

        pattern(PTN.stripe(s / 10));

        rectPattern(0, 0, s, s);

    }

    //eye

    else if(rn < 4){

        fill(c[0]);

        rect(0, 0, s, s);

        fill(c[1]);

        let offx = (noise(cox, frameCount / 200) - 0.5)* s;

        let offy = (noise(coy, frameCount / 200) - 0.5)* s;

        push();

        rect(0,0, s * 0.9, s * 0.9, s * 0.4, s * 0.4);

        drawingContext.clip();

        fill(0);

        rect(offx, offy, s * 0.5, s * 0.5, s * 0.4, s * 0.4);

        pop();

    }

    //mouse

    else if(rn < 5){

        fill(c[0]);

        rect(0, 0, s, s);

        let span = s/4;

        let off = noise(cox, frameCount / 50);

        off = map(off, 0, 1, 0.05, 0.4) * s;

        fill(c[1]);

        rect(0, 0, s, s - off * 2 - 1);

        fill(255);

        for(let x = -s/2 + span/2; x < s/2; x += span){

            triangle(x - span/2, -s/2 + off, x + span/2, -s/2 + off, x, -s / 2 + off + s / 4 );

            triangle(x - span/2, s/2 - off, x + span/2, s/2 - off, x, s / 2 - off - s / 4 );

        }

    }

    pop();

}

​

​

​