Click here for free DL of the app version that can save data.

No:22740

Random face gen, create a 3d looking realistic, mo..ALL
Developer User10477｜Date and time 23/10/24 13:35:43
Build time 60.116 sec｜Game capacity 3.762KB｜

Script

Sure! Here's an example of a game that generates random mosaic faces using squares, triangles, and circles/ovals when a button is pressed. The faces will also randomly decide if they are male or female.

Mosaic Face Generator

To use this program, simply save the code into a single HTML file and open it in a web browser. The game will be displayed with a "Generate Face" button. Clicking the button will generate a random mosaic face, with different parts based on the randomly chosen gender (male or female). Each part is represented by squares, triangles, and circles/ovals. Please note that the 3D effect mentioned in your initial request might not be feasible to achieve using HTML canvas alone. However, this solution provides a simple way to generate mosaic faces with various shapes.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #canvas {
        width: 300px;
        height: 300px;
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <h1>Mosaic Face Generator</h1>
    <button id="generateButton">Generate Face</button>
    <div id="canvas"></div>

// Face parts definitions - squares, triangles, and circles/ovals
      var parts = {
        male: {
          squares: [
            { width: 30, height: 30, x: 100, y: 100 },
            { width: 30, height: 30, x: 170, y: 100 },
            // Define more squares for male faces...
          ],
          triangles: [],
          circles: [
            { radiusX: 20, radiusY: 30, x: 135, y: 180 },
            // Define more circles for male faces...
          ],
        },
        female: {
          squares: [],
          triangles: [
            { x1: 100, y1: 130, x2: 130, y2: 130, x3: 115, y3: 160 },
            // Define more triangles for female faces...
          ],
          circles: [{ radiusX: 20, radiusY: 25, x: 150, y: 170 }],
        },
      };

function generateFace() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Decide gender randomly (male or female)
        var isMale = Math.random() < 0.5;

// Get random face parts based on gender
        var faceParts = isMale ? parts.male : parts.female;

// Generate square parts
        faceParts.squares.forEach(function (square) {
          context.fillStyle = getRandomColor();
          context.fillRect(square.x, square.y, square.width, square.height);
        });

// Generate triangle parts
        faceParts.triangles.forEach(function (triangle) {
          context.fillStyle = getRandomColor();
          context.beginPath();
          context.moveTo(triangle.x1, triangle.y1);
          context.lineTo(triangle.x2, triangle.y2);
          context.lineTo(triangle.x3, triangle.y3);
          context.closePath();
          context.fill();
        });

// Generate circle parts (or ovals)
        faceParts.circles.forEach(function (circle) {
          context.fillStyle = getRandomColor();
          context.beginPath();
          context.ellipse(
            circle.x,
            circle.y,
            circle.radiusX,
            circle.radiusY,
            0,
            0,
            2 * Math.PI
          );
          context.fill();
        });
      }

function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

document.getElementById("generateButton").addEventListener(
        "click",
        generateFace
      );

// Generate initial face on page load
      generateFace();
    </script>
  </body>
</html>
```

Please note that the 3D effect mentioned in your initial request might not be feasible to achieve using HTML canvas alone. However, this solution provides a simple way to generate mosaic faces with various shapes.