Generative Art Random generative art line drawing by JavaScript canvas. Clicking on the More! button, a new random generative art will be re-generated.'s game

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

No:6075

1026

←

Prev Next

→

Generative Art Random generative art line drawing ..ALL
Developer もちきなこ｜Date and time 23/7/1 16:20:09
Build time 14.575 sec｜Game capacity 1.63KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ジェネラティブアート</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script>
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext("2d");
      
      function generateArt() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        const numLines = Math.floor(Math.random() * 10) + 1;
        const lineColor = getRandomColor();
        
        for (let i = 0; i < numLines; i++) {
          const startX = Math.random() * canvas.width;
          const startY = Math.random() * canvas.height;
          const endX = Math.random() * canvas.width;
          const endY = Math.random() * canvas.height;
          
          ctx.beginPath();
          ctx.moveTo(startX, startY);
          ctx.lineTo(endX, endY);
          ctx.strokeStyle = lineColor;
          ctx.lineWidth = Math.random() * 5;
          ctx.stroke();
        }
      }
      
      function getRandomColor() {
        const letters = "0123456789ABCDEF";
        let color = "#";
        
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        
        return color;
      }
      
      generateArt();
      
      const button = document.createElement("button");
      button.textContent = "他も見る！";
      button.addEventListener("click", generateArt);
      document.body.appendChild(button);
    </script>
  </body>
</html>