<!DOCTYPE html>
<html>
<head>
    <title>Block-Dependent Ocean Wave Generative Art</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <div id="app">
        <input id="blockNumber" type="number" placeholder="Enter block number" style="font-size: 20px; padding: 5px;" />
        <button onclick="generateArt()">Generate</button>
    </div>
    <script>
        let yoff = 0.0;
        let blockNumber = 0;

        function setup() {
            createCanvas(710, 400);
            noLoop();  // Ensure that draw() only runs once unless explicitly called
        }

        function generateArt() {
            blockNumber = parseInt(document.getElementById('blockNumber').value) || Math.floor(random(100000));
            noiseSeed(blockNumber); // Use the block number as seed for noise generation
            background(51);

            let xoff = 0; // Option to reset noise detail for each frame

            // Colors will change based on the block number
            let colors = getColorsForBlock(blockNumber);

            for (let i = 0; i < colors.length; i++) {
                fill(colors[i]);
                beginShape();

                for (let x = 0; x <= width; x += 10) {
                    let y = map(noise(xoff, yoff), 0, 1, 200 + i * 20, 300 + i * 20);
                    vertex(x, y);
                    xoff += 0.05;
                }

                yoff += 0.01;
                vertex(width, height);
                vertex(0, height);
                endShape(CLOSE);
            }
        }

        function getColorsForBlock(blockNum) {
            let colorSets = [
                [color(25, 118, 210), color(0, 188, 212), color(0, 150, 136), color(76, 175, 80), color(255, 235, 59)],
                [color(255, 87, 34), color(156, 39, 176), color(63, 81, 181), color(0, 150, 136), color(205, 220, 57)],
                [color(244, 67, 54), color(233, 30, 99), color(103, 58, 183), color(3, 169, 244), color(0, 188, 212)]
            ];

            // Choose a color set based on the block number modulus the number of sets
            return colorSets[blockNum % colorSets.length];
        }
    </script>
</body>
</html>

<!DOCTYPE html> <html> <head> <title>Block-Dependent Ocean Wave Generative Art</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> </head> <body> <div id="app"> <input id="blockNumber" type="number" placeholder="Enter block number" style="font-size: 20px; padding: 5px;" /> <button onclick="generateArt()">Generate</button> </div> <script> let yoff = 0.0; let blockNumber = 0; function setup() { createCanvas(710, 400); noLoop(); // Ensure that draw() only runs once unless explicitly called } function generateArt() { blockNumber = parseInt(document.getElementById('blockNumber').value) || Math.floor(random(100000)); noiseSeed(blockNumber); // Use the block number as seed for noise generation background(51); let xoff = 0; // Option to reset noise detail for each frame // Colors will change based on the block number let colors = getColorsForBlock(blockNumber); for (let i = 0; i < colors.length; i++) { fill(colors[i]); beginShape(); for (let x = 0; x <= width; x += 10) { let y = map(noise(xoff, yoff), 0, 1, 200 + i * 20, 300 + i * 20); vertex(x, y); xoff += 0.05; } yoff += 0.01; vertex(width, height); vertex(0, height); endShape(CLOSE); } } function getColorsForBlock(blockNum) { let colorSets = [ [color(25, 118, 210), color(0, 188, 212), color(0, 150, 136), color(76, 175, 80), color(255, 235, 59)], [color(255, 87, 34), color(156, 39, 176), color(63, 81, 181), color(0, 150, 136), color(205, 220, 57)], [color(244, 67, 54), color(233, 30, 99), color(103, 58, 183), color(3, 169, 244), color(0, 188, 212)] ]; // Choose a color set based on the block number modulus the number of sets return colorSets[blockNum % colorSets.length]; } </script> </body> </html>