Tiles of Lilies

let tileSize = 125;

let margin = 10; // Add margin between tiles

let padding = 50; // Padding between grid and canvas edge

let numTilesX, numTilesY;

​

let colorSchemes = {

    artDecoTaiwan: {

        tileBackground: "#FAF3E0",

        border: "#0E7C7B",

        floralAccent: "#FF9F1C",

        leafDetail: "#556B2F"

    },

    jadePeonyHues: {

        tileBackground: "#FDF5E6",

        border: "#5A9367",

        floralAccent: "#E63946",

        leafDetail: "#CBA135"

    },

    classicFloralElegance: {

        tileBackground: "#FFF5E1",

        border: "#006D77",

        floralAccent: "#FF6F61",

        leafDetail: "#116530"

    },

    oceanBreezeTaiwan: {

        tileBackground: "#E8F1F2",

        border: "#1B4965",

        floralAccent: "#5FA8D3",

        leafDetail: "#B2B09B"

    },

    goldenHeritage: {

        tileBackground: "#FFF7D4",

        border: "#B8860B",

        floralAccent: "#D9480F",

        leafDetail: "#9C6A2B"

    },

    emeraldLilyGarden: {

        tileBackground: "#E2F0CB",

        border: "#2C6E49",

        floralAccent: "#F2545B",

        leafDetail: "#3A5A40"

    }

};

​

let currentScheme = 'artDecoTaiwan'; // Default color scheme

let cornerDecorations = 'diamond'; // Default corner decoration

let availableDecorations = ['circle', 'diamond']; // List of available decorations

let lilyStyle = 'stylized'; // Default lily style

let availableLilyStyles = ['stylized', 'decorative']; // List of available lily styles

let colorCarouselActive = true; // Flag to control the carousel

let colorCarouselInterval; // Variable to store the interval

let schemeKeys; // Array to store the color scheme keys

​

function setup() {

    createCanvas(800, 600);

    angleMode(DEGREES);

    numTilesX = Math.floor((width - 2 * padding) / (tileSize + margin));

    numTilesY = Math.floor((height - 2 * padding) / (tileSize + margin));

​

    // Get the color scheme keys for cycling

    schemeKeys = Object.keys(colorSchemes);

​

    // Start the color carousel

    startColorCarousel();

​

    noLoop();

}

​

function startColorCarousel() {

    if (!colorCarouselInterval) {

        colorCarouselActive = true;

        colorCarouselInterval = setInterval(cycleColorScheme, 1000); // Change every 3 seconds

    }

}

​

function stopColorCarousel() {

    colorCarouselActive = false;

    clearInterval(colorCarouselInterval);

    colorCarouselInterval = null;

}

​

function cycleColorScheme() {

    // Find the current index

    let currentIndex = schemeKeys.indexOf(currentScheme);

    // Move to the next scheme (loop back to start if at the end)

    let nextIndex = (currentIndex + 1) % schemeKeys.length;

    // Set the new color scheme

    currentScheme = schemeKeys[nextIndex];

​

    // Randomly select a corner decoration

    cornerDecorations = availableDecorations[Math.floor(Math.random() * availableDecorations.length)];

​

    // Randomly select a lily style

    lilyStyle = availableLilyStyles[Math.floor(Math.random() * availableLilyStyles.length)];

​

    // Redraw with the new scheme and decoration

    redraw();

}

​

function draw() {

    background("#F8F8F8");

​

    let startX = padding + (width - 2 * padding - (numTilesX * (tileSize + margin) - margin)) / 2;

    let startY = padding + (height - 2 * padding - (numTilesY * (tileSize + margin) - margin)) / 2;

​

    let circleRadius_outer = 60;

    let circleRadius_inner = 30;

    let scheme = colorSchemes[currentScheme];

​

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

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

            let posX = startX + x * (tileSize + margin);

            let posY = startY + y * (tileSize + margin);

​

            // Draw tile background

            fill(scheme.tileBackground);

            stroke(scheme.border);

            strokeWeight(5);

            let cornerRadius = 5;

            rect(posX, posY, tileSize, tileSize, cornerRadius);

​

            // Draw corner decorations

            noFill();

            stroke(scheme.border);

            strokeWeight(5);

            if (cornerDecorations === 'circle') {

                drawCornerCircle(posX, posY, tileSize, circleRadius_outer);

                drawCornerCircle(posX, posY, tileSize, circleRadius_inner);

            } else if (cornerDecorations === 'diamond') {

                drawCornerDiamond(posX, posY, tileSize, circleRadius_outer - 15);

                drawCornerDiamond(posX, posY, tileSize, circleRadius_inner - 10);

            }

​

            // Draw lily based on style;

            if (lilyStyle === 'stylized') {

                drawLilium(posX + tileSize / 2, posY + tileSize / 2, scheme);

            } else {

                drawDecorativeLily(posX + tileSize / 2, posY + tileSize / 2, scheme);

            }

        }

    }

}

​

function drawCornerCircle(posX, posY, tileSize, circleRadius) {

    // Top-left corner

    arc(posX, posY, circleRadius * 1, circleRadius * 1, 0, 90);

    // Top-right corner

    arc(posX + tileSize, posY, circleRadius * 1, circleRadius * 1, 90, 180);

    // Bottom-right corner

    arc(posX + tileSize, posY + tileSize, circleRadius * 1, circleRadius * 1, 180, 270);

    // Bottom-left corner

    arc(posX, posY + tileSize, circleRadius * 1, circleRadius * 1, 270, 360);

}

​

function drawCornerDiamond(posX, posY, tileSize, diamondSize) {

    // Top-left corner

    line(posX + diamondSize, posY, posX, posY + diamondSize);

    // Top-right corner

    line(posX + tileSize - diamondSize, posY, posX + tileSize, posY + diamondSize);

    // Bottom-right corner

    line(posX + tileSize, posY + tileSize - diamondSize, posX + tileSize - diamondSize, posY + tileSize);

    // Bottom-left corner

    line(posX, posY + tileSize - diamondSize, posX + diamondSize, posY + tileSize);

}

​

function drawLilium(x, y, scheme) {

    push();

    translate(x, y);

​

    // Draw stem

    stroke(scheme.leafDetail);

    strokeWeight(2);

    line(0, 20, 0, -20);

​

    // Add leaves

    fill(scheme.leafDetail);

    noStroke();

    for (let angle of [-30, 30]) {

        push();

        translate(0, 10);

        rotate(angle);

        beginShape();

        vertex(0, 0);

        let sign = angle < 0 ? -1 : 1;

        bezierVertex(sign * 5, -5, sign * 15, -3, sign * 20, 0);

        bezierVertex(sign * 15, 3, sign * 5, 5, 0, 0);

        endShape(CLOSE);

        pop();

    }

​

    // Draw back petals

    // noStroke();

    stroke(scheme.leafDetail);

    strokeWeight(1.5);

    fill(247, 247, 247);

​

    let backPetalIndices = [0, 2, 4];

    for (let idx of backPetalIndices) {

        push();

        rotate(idx * 60);

        beginShape();

        vertex(0, 0);

        bezierVertex(-14, -18, -9, -43, 0, -48);

        bezierVertex(9, -43, 14, -18, 0, 0);

        endShape(CLOSE);

        pop();

    }

​

    // Draw front petals

    fill(255, 255, 255);

​

    let frontPetalIndices = [5, 1, 3];

    for (let idx of frontPetalIndices) {

        push();

        rotate(idx * 60);

        beginShape();

        vertex(0, 0);

        bezierVertex(-16, -22, -11, -46, 0, -52);

        bezierVertex(11, -46, 16, -22, 0, 0);

        endShape(CLOSE);

        pop();

    }

​

    // Draw center

    fill(scheme.secondaryDetail || scheme.floralAccent);

    circle(0, 0, 10);

​

    // Draw stamens

    stroke(scheme.leafDetail);

    strokeWeight(1);

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

        let angle = i * 60;

        push();

        rotate(angle);

        line(0, 0, 0, -25);

        fill(scheme.secondaryDetail || scheme.floralAccent);

        circle(0, -25, 3.5);

        pop();

    }

​

    pop();

}

​

function drawDecorativeLily(x, y, scheme) {

    push();

    translate(x, y);

​

    // No background circle

    // (Removing the background circle to match drawLilium style)

​

    // Petals (6 petals arranged symmetrically)

    fill(255, 255, 255); // White petals like in drawLilium

    stroke(scheme.leafDetail); // Use leafDetail color for outlines

    strokeWeight(1);

​

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

        push();

        rotate(i * 60);

​

        // Draw petal shape

        beginShape();

        vertex(0, 0);

        bezierVertex(10, -15, 15, -30, 8, -42);

        bezierVertex(0, -35, -8, -42, -15, -30);

        bezierVertex(-10, -15, 0, 0, 0, 0);

        endShape(CLOSE);

​

        // Inner decorative shape

        fill(245, 245, 245); // Slightly darker white for inner details

        noStroke();

        beginShape();

        vertex(0, 0);

        bezierVertex(5, -10, 8, -20, 5, -28);

        bezierVertex(0, -25, -5, -28, -8, -20);

        bezierVertex(-5, -10, 0, 0, 0, 0);

        endShape(CLOSE);

​

        // Stamen

        stroke(scheme.leafDetail); // Use leafDetail for stamens

        strokeWeight(1.5);

        line(0, 0, 0, -18);

​

        // Stamen dot

        fill(scheme.floralAccent); // Use floralAccent for stamen tips

        noStroke();

        circle(0, -20, 4);

​

        pop();

    }

​

    // Center of flower

    fill(scheme.secondaryDetail || scheme.floralAccent); // Match drawLilium center

    noStroke();

    circle(0, 0, 10);

​

    // Radiating lines

    stroke(scheme.leafDetail);

    strokeWeight(0.3);

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

        let angle = i * 15;

        push();

        rotate(angle);

        line(0, 0, 0, -5);

        pop();

    }

​

    pop();

}

​

// Function to change color scheme

function setColorScheme(schemeName) {

    if (colorSchemes[schemeName]) {

        currentScheme = schemeName;

        redraw();

    }

}

​

// Toggle the color carousel

function toggleColorCarousel() {

    if (colorCarouselActive) {

        stopColorCarousel();

    } else {

        startColorCarousel();

    }

}

​

// Allow keyboard control - press spacebar to toggle carousel

function keyPressed() {

    if (key === ' ') {

        toggleColorCarousel();

    }

}