Random Shapes Generator

—

by

admin
in

Can you build me an HTML page that has a button. When I click the button, I want 50 totally random shapes to appear on the page.

Sure, I can help you construct the necessary HTML, CSS, and JavaScript code to accomplish this. However, there are a few details I’ll need to clarify:

  1. What kind of shapes are you interested in? Circles? Squares? Polygons?
  2. Do you want these shapes to be filled with a color or just an outline?
  3. Should the shapes be of uniform size, or can they vary in size?
  4. Should the shapes be placed at random positions on the page, or do they follow a specific pattern?

1. Any and every shape imaginable. They don’t have to be closed shapes either. They can be squiggles and other random shapes (if possible).
2. A combination of both, using the entire spectrum of potential colors.
3. They can vary.
4. Totally random.

Sure, here’s a simple implementation using HTML5 Canvas and JavaScript. This script will generate 50 random shapes every time the button is clicked. It includes circles, rectangles, triangles, and random squiggles.

Here’s the code:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Random Shapes Generator</title>
        <style>
            #canvas {
                border:1px solid black;
            }
            .button {
                display: inline-block;
                padding: 15px 25px;
                font-size: 24px;
                cursor: pointer;
                text-align: center;
                text-decoration: none;
                outline: none;
                color: #fff;
                background-color: #4CAF50;
                border: none;
                border-radius: 15px;
                box-shadow: 0 9px #999;
            }
            .button:hover {background-color: #3e8e41}
            .button:active {
                background-color: #3e8e41;
                box-shadow: 0 5px #666;
                transform: translateY(4px);
            }
        </style>
    </head>
    <body>
        <button class="button" onclick="generateShapes()">Generate Random Shapes</button>
        <canvas id="canvas" width="800" height="600"></canvas>
        
        <script src="shapes.js"></script>
    </body>
</html>

JavaScript (shapes.js):

function generateShapes() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for(var i=0; i<50; i++){
        ctx.beginPath();

        var shapeType = Math.floor(Math.random() * 4);
        var color = '#' + Math.floor(Math.random()*16777215).toString(16);
        ctx.fillStyle = color;
        ctx.strokeStyle = color;

        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height;
        var size = Math.random() * 100;

        switch(shapeType){
            case 0: // Circle
                ctx.arc(x, y, size, 0, 2 * Math.PI);
                break;
            case 1: // Rectangle
                ctx.rect(x, y, size, size);
                break;
            case 2: // Triangle
                ctx.moveTo(x, y);
                ctx.lineTo(x+size, y);
                ctx.lineTo(x+size/2, y-size);
                ctx.closePath();
                break;
            case 3: // Random Squiggle
                var x2 = Math.random() * canvas.width;
                var y2 = Math.random() * canvas.height;
                ctx.moveTo(x, y);
                ctx.bezierCurveTo(x, y, x2, y2, x2, y2);
                break;
        }

        if(Math.random() > 0.5){
            ctx.fill();
        } else {
            ctx.stroke();
        }
    }
}

This code creates an HTML page with a button that, when clicked, calls the 'generateShapes()' function. This function clears the canvas and then generates 50 random shapes. Each shape’s type, color, position, size, and whether it is filled or just an outline are all randomly determined.

To use this, you’ll need to save the HTML code in a '.html' file and the JavaScript code in a 'shapes.js' file in the same directory. Then, open the HTML file in a web browser to see it in action.

Note: Due to the nature of JavaScript’s Math.random() function, “total randomness” isn’t technically achieved. However, for most practical purposes, the generated shapes will appear quite random.

Finally, the JavaScript code only includes basic shapes. To add more complex shapes, you would need to use more advanced canvas drawing techniques or a library that supports drawing complex shapes.