見出し画像

JavaScriptを使ってGenerative Artを作成：０3

KAORI

こんにちはKAORIですꉂ(ˊᗜˋ*)
ものすごく久しぶりになってしまいました汗
すみません！
書かなくちゃと思ってから勉強会行って１ヶ月くらい経ってる。。。

最終的にこんなアートを作成しました。

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
   <meta charset="utf-8">
   <title>最終目的の表示</title>
</head>

<body>
   <canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #d3d3d3;">
   </canvas>
   <script type="text/javascript">

       var c = document.getElementById("myCanvas");//canvsのこと
       var ctx = c.getContext("2d");//絵を描くためのペン
       ctx.globalCompositeOperation = "lighter";

       function getRandomNumber(num) {
           return Math.round(Math.random() * num);
       }

       // 色を表示させる
       function getRandomColor() {
           let r = getRandomNumber(255);
           let g = getRandomNumber(255);
           let b = getRandomNumber(255);
           return `rgb(${r},${g},${b})`
       }

       function getRandomColor2() {
           let r = getRandomNumber(255);
           let g = getRandomNumber(255);
           let b = getRandomNumber(255);
           return `rgb(${r - 50},${g - 50},${b + 50})`
       }

       var data = {
           x: 0,
           y: 0,
           speedX: 3,
           speedY: 3,
           setData: function (_x, _y, _width, _height, _color) {
               this.x = _x;
               this.y = _y;
               this.speedX = this.speedX + getRandomNumber(10);
               this.speedY = this.speedY + getRandomNumber(10);
               this.color = _color;
           },
           draw: function () {
               setInterval(this.move, 50, this);
           },
           move: function (obj) {
               ctx.globalCompositeOperation = "lighter";
               obj.x += obj.speedX;
               obj.y += obj.speedY;
               if (obj.x > c.width || obj.x < 0) {
                   obj.speedX = -obj.speedX;
               }
               if (obj.y > c.height || obj.y < 0) {
                   obj.speedY = -obj.speedY;
               }
               ctx.beginPath();
               ctx.fillStyle = obj.color;
               ctx.arc(obj.x, obj.y, 30, 0, Math.PI * 2, true);
               ctx.fill();
           }
       };

       function drawRect(_num) {
           for (let i = 0; i < _num; i++) {
               for (let j = 0; j < _num; j++) {
                   let obj1 = Object.create(data);
                   obj1.setData(50 * i, 50 * j, 50, 50, getRandomColor());
                   obj1.draw();
               }
           }
       }

       // c.width  c.heightでcanvasの大きさや表示の範囲を表してる。
       function drawBackground() {
           ctx.globalCompositeOperation = "source-over";
           ctx.fillStyle = "rgba(8,5,6,.1)";
           ctx.fillRect(0, 0, c.width, c.height);
       }

       drawRect(10);//数を増やすと玉の数が増える

       setInterval(drawBackground, 33);

   </script>
</body>

</html>
 drawRect(10);//数を増やすと玉の数が増える
       setInterval(drawBackground, 33);


↑ここのコードをあまり大きい数にするとリロードした時にデータが重くてなかなか表示されなかったりします。


ここまで書いてきたコードは01~03まで似たようなコードを少しずつ変更させていって書き換えています。
コードを増やしたり、記述を変更させてみたりしてどう動くかなとか考えながら書いていくと理解が早く深く出来た気がします。
記憶が曖昧で進め方とか合っていたか不安なので、ここまでにしておきます(･･;)（すみません）

現在は、こんなサイトを使ってブラウザ上でコードを書いて確認しながら作成したりしています。
すごい人たちのコードもいろいろ変えて保存して確かめたりできるのでオススメです。

この勉強会のお話はこれで終わりになります。
最後までお読みいただきありがとうございました。
最後なのに上手く書けなくてすみません(＞人＜;)
また、何かアウトプットしていきます！

現在、福岡でプログラミンなどの勉強したり、フリーランスとして活動中です。温かい目で見守って頂けますと幸いです。 よろしくお願いします⋆｡˚ ༘*