​

let COLS = createCols("https://coolors.co/eb300f-fe7688-fff566-212121-306e42-0d3b66");

let PALETTE;

​

function setup() {

    const s = min(windowWidth, windowHeight) * 0.9;

    createCanvas(s, s);

    background(240);

    frameRate(0.75);

}

​

function draw() {

    PALETTE = shuffle(COLS, true);

    background(PALETTE[3]);

    PALETTE = PALETTE.slice(0, 3);

    rectMode(CENTER);

    typo(width /2 - width / 3.2, height /2, width / 4, height /4 / 2 * 7, true);

//  typo(width * 0.49, height /2, width / 4, height /4 / 2 * 7, false);

//  typo(width /2 + width / 3.2, height /2, width / 4, height /4 / 2 * 7, true);

//  const d = width * 0.08;

//  pattern(randPattern(d));

//  circlePattern(width  * 0.6, height * 0.75, d);

}

​

​

function typo(cx, cy, w, h, isp)

{

    const structure = isp ? 

                [[-9, -9],[-9, -9],[0, 1],[-1, -1], [-1, 2], [-1, -9],[2, -9]] :

                [[-1, 2],[-1, -9],[3, 1],[-9, -1], [0, 2], [-9, -9],[-9, -9]] ;

​

    const xNum = structure[0].length;

    const xSpan = w / xNum;

    const yNum =  structure.length;

    const ySpan = h / yNum;

    rectMode(CENTER);

    ellipseMode(CENTER);

    push();

    translate(cx - w /2, cy - h / 2);

    for(let yi = 0; yi < yNum; yi++)

    {

        for(let xi = 0; xi < xNum; xi++)

        {

            const isDraw = structure[yi][xi];

            if(isDraw >= -1)

            {

                const x = xSpan * (xi + 0.5);

                const y = ySpan * (yi + 0.5);

                patternColors(shuffle(PALETTE));

                pattern(randPattern(xSpan));

                patternAngle(int(random(4)) * PI / 4);

                push();

                translate(x, y);

                if(isDraw >= 0){

                    rotate(isDraw * HALF_PI);

                    const rn = random();

                    if(rn > 0.66)rectPattern(0, 0, xSpan, ySpan, xSpan, 0, 0, 0);

                    else if(rn > 0.33) arcPattern(xSpan / 2, ySpan / 2, xSpan * 2, ySpan * 2, PI, TAU / 4 * 3);

                    else trianglePattern(xSpan / 2, ySpan / 2, -xSpan / 2, ySpan / 2, xSpan / 2, -ySpan / 2);

                }

                else

                {

                    rectPattern(0, 0, xSpan, ySpan);

                }

                pop();

            }

        }

    }

    pop();

}

​

​

function randPattern(t)

{

    const ptArr = [

        PTN.noise(0.5),

        PTN.noiseGrad(0.4),

        PTN.stripe(t / int(random(6, 12))),

        PTN.stripeCircle(t / int(random(6, 12))),

        PTN.stripePolygon(int(random(3, 7)),  int(random(6, 12))),

        PTN.stripeRadial(TAU /  int(random(6, 30))),

        PTN.wave(t / int(random(1, 3)), t / int(random(10, 20)), t / 5, t / 10),

        PTN.dot(t / 10, t / 10 * random(0.2, 1)),

        PTN.checked(t / int(random(5, 20)), t / int(random(5, 20))),

        PTN.cross(t / int(random(10, 20)), t / int(random(20, 40))),

        PTN.triangle(t / int(random(5, 20)), t / int(random(5, 20)))

    ]

    return random(ptArr);

}

​

​

function createCols(url)

{

    let slaIndex = url.lastIndexOf("/");

    let colStr = url.slice(slaIndex + 1);

    let colArr = colStr.split("-");

    for(let i = 0; i < colArr.length; i++)colArr[i] = "#" + colArr[i];

    return colArr;

}

​