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

No:46781

Make a generative art creator with a grid of cubes..ALL
Developer User20131｜Date and time 24/2/26 1:36:42
Build time 6.315 sec｜Game capacity 1.499KB｜

Script

Generatore di Arte Generativa

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generatore di Arte Generativa</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  #canvas {
    display: grid;
    grid-template-columns: repeat(10, 50px);
    grid-gap: 2px;
    margin-top: 20px;
  }
  .cube {
    width: 50px;
    height: 50px;
  }
</style>
</head>
<body>
<h1>Generatore di Arte Generativa</h1>
<button onclick="generateArt()">Genera Arte</button>
<select id="colorSelect">
  <option value="red">Rosso</option>
  <option value="green">Verde</option>
  <option value="blue">Blu</option>
  <option value="yellow">Giallo</option>
  <option value="purple">Viola</option>
</select>
<div id="canvas"></div>

function generateArt() {
  canvas.innerHTML = '';
  for (let i = 0; i < 100; i++) {
    const cube = document.createElement('div');
    cube.className = 'cube';
    cube.style.backgroundColor = getRandomColor();
    canvas.appendChild(cube);
  }
}

function getRandomColor() {
  const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
  const selectedColor = document.getElementById('colorSelect').value;
  if (selectedColor !== 'random') {
    return selectedColor;
  }
  return colors[Math.floor(Math.random() * colors.length)];
}

generateArt();
</script>
</body>
</html>