// CANVAS SIZE and Resize Function (NOT IMPORTANT)

const C = {

    loaded: false,

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

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

    resize() {

        if (this.isLandscape()) {

            document.getElementById(this.css).style.height = "100%";

            document.getElementById(this.css).style.removeProperty('width');

        } else {

            document.getElementById(this.css).style.removeProperty('height');

            document.getElementById(this.css).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(300, 300, 5, 'mainCanvas');

​

//////////////////////////////////////////////////

// Sketch

let palette = ["#fcd300", "#002185", "#ff2702"]; // Yellow, Blue, Red

let shapes = ["circle", "square", "triangle"];

let grid = [];

​

function setup() {

    colorMode(HSB, 360, 100, 100); // Hue: 0-360, Saturation & Brightness: 0-100

​

    C.createCanvas();

    noLoop();

    generatePallete()

    generateGrid();

}

​

function draw() {

    background("#e2e7dc");

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

​

    let gridSize = 3;

    let cellSize = width / gridSize;

​

    for (let y = 0; y < gridSize; y++) {

        for (let x = 0; x < gridSize; x++) {

            let { shape, color } = grid[y][x];

            let cx = x * cellSize + cellSize / 2;

            let cy = y * cellSize + cellSize / 2;

            let size = cellSize * 0.6;

​

            drawWatercolorShape(cx, cy, size, shape, color);

        }

    }

}

​

function mousePressed() {

  generatePallete();

    generateGrid();

    redraw();

}

​

function generatePallete() {

  palette[0] = color(random(360), 80, 90);

    palette[1] = color(random(360), 80, 90);

  palette[2] = color(random(360), 80, 90);

​

}

​

function generateGrid() {

    let shapeCounts = { circle: 0, square: 0, triangle: 0 };

    let maxCount = 3;

​

    grid = [];

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

        let row = [];

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

            let shape;

            do {

                shape = random(shapes);

            } while (shapeCounts[shape] >= maxCount);

            shapeCounts[shape]++;

            let color = palette[shapes.indexOf(shape)];

            row.push({ shape, color });

        }

        grid.push(row);

    }

}

​

function drawWatercolorShape(cx, cy, size, shape, color) {

    brush.fill(color, 50); // Soft watercolor-like fill

    brush.bleed(0.2); // Simulate watercolor bleeding

    brush.beginShape(0);

​

    if (shape === "circle") {

        let step = TWO_PI / 36;

        for (let angle = 0; angle < TWO_PI; angle += step) {

            let x = cx + cos(angle) * size / 2 + random(-0.5, 0.5);

            let y = cy + sin(angle) * size / 2 + random(-0.5, 0.5);

            brush.vertex(x, y);

        }

    } else if (shape === "square") {

        let half = size / 2;

        brush.vertex(cx - half + random(-2, 2), cy - half + random(-2, 2));

        brush.vertex(cx + half + random(-2, 2), cy - half + random(-2, 2));

        brush.vertex(cx + half + random(-2, 2), cy + half + random(-2, 2));

        brush.vertex(cx - half + random(-2, 2), cy + half + random(-2, 2));

    } else if (shape === "triangle") {

        brush.vertex(cx, cy - size / 2 + random(-2, 2));

        brush.vertex(cx - size / 2 + random(-2, 2), cy + size / 2 + random(-2, 2));

        brush.vertex(cx + size / 2 + random(-2, 2), cy + size / 2 + random(-2, 2));

    }

​

    brush.endShape(CLOSE);

}