​

// Create noise graphics in the background

let seedNum = [];

let bg;

​

function setup() {

    createCanvas(500, 500);

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

        seedNum.push(int(random(20)));

    }

    bg = createGraphics(width + 5, height + 5);

  bg.noStroke();

    bg.fill(255,50);

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

    let x = random(bg.width);

    let y = random(bg.height);

    let s = noise(x*0.01, y*0.01) + 1;

    bg.rect(x, y, s, s);

  } 

    //noLoop();

}

​

function draw() {

// randomSeed controls the refresh random pattern rate

    randomSeed(seedNum[floor(frameCount / 156) % seedNum.length]);

    background("#F6F2E9");

    noStroke();

​

    let s = min(width, height) * 0.8;

    divRect(width/2 - s/2, height/2 - s/2, s, s);

    image(bg,0,0);

}

​

function divRect(x,y,w,h){

    let rn = random(0.1,0.9);

    if(w > h){

        let w1 = rn * w;

        drawRect(x, y, w1, h);

        drawRect(x + w1, y, w - w1, h);

    }else{

        let h1 = rn * w;

        drawRect(x, y, w, h1);

        drawRect(x, y + h1, w , h - h1);

    }

}

​

function drawRect(x,y,w,h)

{

    const margine = 20;

    const lenThresh = 20;

     const rnThresh = 0.1;

    let rn = random();

    if(min(w, h) > lenThresh && rn > rnThresh)divRect(x,y,w,h);

    else{

        fill(0);

        randomStripe(x + margine / 2, y + margine / 2,w - margine, h - margine);

    }

}

​

function randomStripe(x,y,w,h){

    let isAxisX = random() > 0.5 ? true : false;

    let divNum = int(random(4,10));

    let span = isAxisX ? w / divNum : h / divNum;

    let rectSize = random() > 2 ? span * random(0.15, 0.35) : span * random(0.65, 0.9);

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

        let offset = i / (divNum - 1) * (span - rectSize);

        let dx, dy, dw, dh;

        if(isAxisX){

            dx = x + i * span + offset;

            dy = y;

            dw = rectSize;

            dh = h; 

        }else{

            dx =x;

            dy = y + i * span + offset;

            dw = w;

            dh = rectSize; 

        }

        fill("#000414");

        suitableRect(dx, dy, dw,dh, dw / 200, dh / 20, 100,100);

    }

}

​

function suitableRect(x,y,w,h, dw = 1,dh = 1)

{

    let points = [];

    let spanX = w/dw;

    let spanY = h/dh;

    for(let i = 0; i < dw; i ++)points.push(createVector(x + i * spanX, y));

    for(let i = 0; i < dh; i ++)points.push(createVector(x + w, y + i * spanY));

    for(let i = 0; i < dw; i ++)points.push(createVector(x + w - i *spanX , y + h));

    for(let i = 0; i < dh; i ++)points.push(createVector(x, y + h - i * spanY));

    let xOff = h > w ? 0.4 * w : 0.5 * h;

    let yOff = w > h ? 0.3 * h : 0.5 * w;

    let maxOff = 2;

    let minOff = 2;

    xOff = max(minOff, min(xOff,maxOff));

    yOff = max(minOff, min(yOff,maxOff));

//   Fractal Noise edits

    points = getNoisedPos(points, random(0.01,0.2), random(0.01,0.2), 0.01, xOff, yOff);

    beginShape();

    for(let p of points){

    vertex(p.x, p.y);

    }

    endShape(CLOSE);

}

​

function getNoisedPos(posArr, nscX, nscY,nscZ, maxOffX, maxOffY)

{

    for(let p of posArr){

        let nvX = noise(p.x * nscX, p.y * nscX , frameCount * nscZ) - 1;

        let nvY = noise(p.x * nscY, p.y * nscY, frameCount * nscZ) - 1;

        p.add(createVector(nvX * maxOffX , nvY * maxOffY));

    }

    return posArr;

}