loaded: false,

    prop() { return this.height / this.width },

    isLandscape() { return window.innerHeight <= window.innerWidth * this.prop() },

    resize() {

        const canvasElement = document.getElementById(this.css);

        if (this.isLandscape()) {

            canvasElement.style.height = "100%";

            canvasElement.style.removeProperty('width');

        } else {

            canvasElement.style.removeProperty('height');

            canvasElement.style.width = "100%";

        }

    },

    setSize(w, h, p, css) {

        this.width = w, this.height = h, this.pD = p, this.css = css;

    },

    createCanvas() {

        this.main = createCanvas(this.width, this.height, WEBGL);

        pixelDensity(this.pD);

        this.main.id(this.css);

        this.resize();

    }

};

​

C.setSize(1500, 2000, 1, 'mainCanvas');

​

function windowResized() {

    C.resize();

}

​

let palette = ["#7b4800", "#002185", "#003c32", "#fcd300", "#ff2702", "#6b9404"];

​

let flowField;

let stroke_brushes = ["2H", "HB", "charcoal"];

let hatch_brushes = ["marker", "marker2"];

​

function setup() {

    C.createCanvas();

    //angleMode(DEGREES);

​

    // Set random background color from the palette

    background("white");

​

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

​

    const num_cols = 2;

    const num_rows = 2;

    const border = 50;

    const col_size = (width - border) / num_cols;

    const row_size = (height - border) / num_rows;

​

    // Create a flow field

    flowField = createFlowField(num_cols, num_rows);

​

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

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

            const flowVector = flowField[i][j];

            const angle = atan2(flowVector.y, flowVector.x);

​

            push();

            translate(border / 6 + col_size * j + col_size / 6, border / 6 + row_size * i + row_size / 6);

            //rotate(angle);

​

            if ((i + j) % 2 === 0) {

                brush.fill(random(palette), random(80, 140));

                brush.bleed(random(0.5, 10), 0.55, 10);

            } else {

                brush.set(random(stroke_brushes), random(palette));

                brush.setHatch(random(hatch_brushes), random(palette));

                brush.hatch(random(10, 90), random(0, 180), { rand: 0, continuous: false, gradient: false });

            }

​

            brush.rect(0.5, 10, col_size, row_size);

​

            pop(); // Restore original transformation

        }

    }

}

​

// Function to create a flow field

function createFlowField(cols, rows) {

    const field = [];

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

        const row = [];

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

            row.push(p5.Vector.fromAngle(random(TWO_PI)));

        }

        field.push(row);

    }

    return field;

}