Make a generative art creator with a grid of cubes with all the same dimensions but random colors Make a generate button to generate a random image Make it draw an natural place's game

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

No:46778

←

Prev Next

→

Make a generative art creator with a grid of cubes..ALL
Developer User20131｜Date and time 24/2/26 1:33:00
Build time 5.53 sec｜Game capacity 1.155KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Generative Art Creator</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(0,100px);
      grid-gap:0px;
    }
    .cube {
      width:1px;
      height:1px;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <button id="generateBtn">Generate</button>
  
  <script>
    const container = document.querySelector('.container');
    const generateBtn = document.getElementById('generateBtn');
    
    generateBtn.addEventListener('click', generateArt);
    
    function generateArt() {
      container.innerHTML = '';
      
      for(let i = 0; i < 10000; i++) {
        const cube = document.createElement('div');
        cube.classList.add('cube');
        cube.style.backgroundColor = getRandomColor();
        container.appendChild(cube);
      }
    }
    
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  </script>
</body>
</html>