晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

 AI)「ChatGPT」で、HTMLとCSSとJavaScriptでアートを作らせてみた。

「ChatGPT」で色々試している。

今回、HTMLとCSSとJavaScriptでアートを作れるか試してみた。

以下が、全てChatGPTのオリジナル作品かどうかは分からないが、要求を追加していくと、数秒でそれに答えてくる。恐るべし。簡単な解説まで付いてくる。

■1.HTMLとCSSとJavaScriptで何かアートを作ってみて。

-----

【回答】

こちらがHTMLとCSSとJavaScriptを使用して作成した簡単なアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Artwork</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }

      #canvas {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var colors = ["#FF3F8E", "#04C2C9", "#2E294E", "#F5A503", "#F20D0D"];

      var width = canvas.width;
      var height = canvas.height;

      function draw() {
        ctx.clearRect(0, 0, width, height);
        for (var i = 0; i < colors.length; i++) {
          ctx.fillStyle = colors[i];
          var x = Math.random() * width;
          var y = Math.random() * height;
          var size = Math.random() * 100;
          ctx.fillRect(x, y, size, size);
        }
      }

      setInterval(draw, 1000);
    </script>
  </body>
</html>

このコードは、赤い円の中に5つの小さなオレンジ色の円を描画することで、幾何学的なアート作品を作成します。背景は薄い灰色です。

回答結果 ↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork1.html

■2.HTMLとCSSとJavaScriptで、線が動的に動き回るようなアートを作ってみて。

-----

【回答】

以下がHTML、CSS、およびJavaScriptを使用して作成した、線が動的に動き回るアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Artwork</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }

      #canvas {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var width = canvas.width;
      var height = canvas.height;

      var lineCount = 100;
      var lines = [];

      for (var i = 0; i < lineCount; i++) {
        var line = {
          x: Math.random() * width,
          y: Math.random() * height,
          angle: Math.random() * 360,
          speed: 1 + Math.random() * 3,
          color: "#FFF"
        };
        lines.push(line);
      }

      function draw() {
        ctx.clearRect(0, 0, width, height);
        for (var i = 0; i < lines.length; i++) {
          var line = lines[i];
          ctx.strokeStyle = line.color;
          ctx.beginPath();
          ctx.moveTo(line.x, line.y);
          line.x += Math.cos(line.angle) * line.speed;
          line.y += Math.sin(line.angle) * line.speed;
          ctx.lineTo(line.x, line.y);
          ctx.stroke();

          if (line.x < 0 || line.x > width) {
            line.angle = Math.PI - line.angle;
          }
          if (line.y < 0 || line.y > height) {
            line.angle = 2 * Math.PI - line.angle;
          }
        }
      }

      setInterval(draw, 20);
    </script>
  </body>
</html>
このコードは、ランダムな色と角度でランダムな場所から始まる直線を描画し、ランダムな速度で動かします。アニメーションは、20ミリ秒ごとに更新されます。

回答結果  ↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork2.html

■3.HTMLとCSSとJavaScriptで、曲線が動的に動き回るようなアートを作ってみて。

-----

【回答】

以下がHTML、CSS、およびJavaScriptを使用して作成した、曲線が動的に動き回るアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Artwork</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }

      #canvas {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var width = canvas.width;
      var height = canvas.height;

      var centerX = width / 2;
      var centerY = height / 2;

      var angle = 0;
      var radius = 100;

      function draw() {
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.moveTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
        ctx.quadraticCurveTo(centerX, centerY, centerX + radius * Math.cos(angle + 0.1), centerY + radius * Math.sin(angle + 0.1));
        ctx.strokeStyle = "#FFF";
        ctx.stroke();
        angle += 0.1;
      }

      setInterval(draw, 20);
    </script>
  </body>
</html>
このコードは、円の中心から始まる曲線を描画し、円の輪郭線に沿って移動します。アニメーションは、20ミリ秒ごとに更新されます。

回答結果↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork3.html

■4.複数の曲線が動き回るような複雑なものを作ってみて。

-----

【回答】

以下がHTML、CSS、およびJavaScriptを使用して作成した、複数の曲線が動的に動き回るような複雑なアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Artwork</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }

      #canvas {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var width = canvas.width;
      var height = canvas.height;

      var centerX = width / 2;
      var centerY = height / 2;

      var angle1 = 0;
      var radius1 = 100;
      var angle2 = 0;
      var radius2 = 150;
      var angle3 = 0;
      var radius3 = 200;

      function draw() {
        ctx.clearRect(0, 0, width, height);

        // Draw first curve
        ctx.beginPath();
        ctx.moveTo(centerX + radius1 * Math.cos(angle1), centerY + radius1 * Math.sin(angle1));
        ctx.quadraticCurveTo(centerX, centerY, centerX + radius1 * Math.cos(angle1 + 0.1), centerY + radius1 * Math.sin(angle1 + 0.1));
        ctx.strokeStyle = "#FFF";
        ctx.stroke();
        angle1 += 0.1;

        // Draw second curve
        ctx.beginPath();
        ctx.moveTo(centerX + radius2 * Math.cos(angle2), centerY + radius2 * Math.sin(angle2));
        ctx.quadraticCurveTo(centerX, centerY, centerX + radius2 * Math.cos(angle2 + 0.15), centerY + radius2 * Math.sin(angle2 + 0.15));
        ctx.strokeStyle = "#0FF";
        ctx.stroke();
        angle2 += 0.15;

        // Draw third curve
        ctx.beginPath();
        ctx.moveTo(centerX + radius3 * Math.cos(angle3), centerY + radius3 * Math.sin(angle3));
        ctx.quadraticCurveTo(centerX, centerY, centerX + radius3 * Math.cos(angle3 + 0.2), centerY + radius3 * Math.sin(angle3 + 0.2));
        ctx.strokeStyle = "#F0F";
        ctx.stroke();
        angle3 += 0.2;
      }

      setInterval(draw, 20);
    </script>
  </body>
</html>
このコードは、円の中心から始まる3つの曲線を描画し、それぞれの曲線が円の輪郭線に沿って移動します。アニメーションは、20ミリ秒ごとに更新されます。

回答結果 ↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork4.html

■5.もっと、もっと、複雑な動きをするカラーのアートを作ってみて。

-----

【回答】

以下がHTML、CSS、およびJavaScriptを使用して作成した、複雑な動きをするカラーのアート作品です。以下のコードをコピーして、HTMLファイルに貼り付けてください。

<!DOCTYPE html>
<html>
  <head>
    <title>Artwork</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: black;
      }

      #canvas {
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      var width = canvas.width;
      var height = canvas.height;

      var centerX = width / 2;
      var centerY = height / 2;

      var colors = ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"];
      var colorIndex = 0;

      function draw() {
        var x = Math.random() * width;
        var y = Math.random() * height;

        ctx.fillStyle = colors[colorIndex];
        ctx.fillRect(x, y, 5, 5);

        colorIndex++;
        if (colorIndex >= colors.length) {
          colorIndex = 0;
        }
      }

      setInterval(draw, 10);
    </script>
  </body>
</html>
このコードは、ランダムな位置に短いラインを描画し、色をランダムに変更します。これにより、非常に複雑なカラフルなアート作品が生成されます。

回答結果 ↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork5.html

■6.HTMLとCSSとJavaScriptで立体のボールが飛び跳ねるようなプログラムを作ってみて。

-----

【回答】

以下は、HTML、CSS、およびJavaScriptを使用して立体のボールが飛び跳ねるアニメーションを作成する例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bouncing Ball</title>
    <style>
      /* ボールのスタイル */
      #ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="ball"></div>

    <script>
      // ボールの初期位置と速度
      let x = 50; // x座標
      let y = 50; // y座標
      let vx = 5; // x方向の速度
      let vy = 2; // y方向の速度

      // キャンバスのサイズ
      const canvasWidth = document.documentElement.clientWidth;
      const canvasHeight = document.documentElement.clientHeight;

      // ボールを移動する関数
      function moveBall() {
        // ボールの位置を更新
        x += vx;
        y += vy;

        // 壁に当たった場合の処理
        if (x + 50 > canvasWidth || x < 0) {
          vx = -vx;
        }
        if (y + 50 > canvasHeight || y < 0) {
          vy = -vy;
        }

        // ボールの位置を反映
        const ball = document.getElementById('ball');
        ball.style.left = x + 'px';
        ball.style.top = y + 'px';
      }

      // アニメーションを開始する関数
      function startAnimation() {
        setInterval(moveBall, 10); // 10ミリ秒ごとにmoveBall関数を呼び出す
      }

      // ページが読み込まれたらアニメーションを開始する
      window.onload = startAnimation;
    </script>
  </body>
</html>

このプログラムでは、div要素にid="ball"を指定して、CSSでボールのスタイルを設定しています。JavaScriptで、ボールの初期位置と速度を設定し、moveBall関数でボールを移動させます。setInterval関数を使用して、moveBall関数を一定間隔で呼び出すことで、アニメーションを実現しています。また、ウィンドウのサイズを取得して、画面の端にボールが当たった場合に反転するようにしています。

回答結果 ↓

https://ok2nd.sakura.ne.jp/Test/chatGpt/artwork6.html

----------