見出し画像

JavaScriptを使ってGenerative Artを作成:02

こんにちはKAORIです。
generativeアート作成の続きを書いていきたいと思います。
その後、いろいろと調べたり復習したり写経なども続けています。

今回は、前回の続きで次々に表示させていきながら教わったコードなどをお話させていきたいと思います。


次に表示したのはこの画像になります。
どんな風に色を出すのか、どんな数字を出すとどの色になるのかの確認紹介になります。

<!DOCTYPE html>
<html>
 <body>
   <canvas
     id="myCanvas"
     width="500"
     height="500"
     style="border:1px solid #d3d3d3;"
   >
   </canvas>

   <script>
     let c = document.getElementById("myCanvas");
     let ctx = c.getContext("2d"); //2dは平面で表示するという意味

     function drawRect(x, y, r) {
       console.log(x, y);
       ctx.fillStyle = `rgb(${r},0,0)`;
       ctx.fillRect(x, y, 5, 500); //'5'の部分でグラデーションの幅調整(黒が多くなったり赤が多くなったりする。
     } //'500'c.heightが表示サイズ

     for (let i = 0; i < 100; i++) {
       //100がc.widthの部分で / 5 とかにするとcanvasのサイズ変えても自動でいける
       drawRect(i * 5, 0, 3 * i);
     }

     function getRandomNumber(num) {
       let x = Math.random() * num;
       return Math.round(x); // Math.floorも可 四捨五入か、切り捨てかの違い
     }

     // ランダムな色を返す関数
     function getRandomColor() {
       let r = getRandomNumber(255);
       let g = getRandomNumber(255);
       let b = getRandomNumber(255);
       return `rgb(${r},${g},${b})`;
     }
   </script>
 </body>
</html>

上記コードで赤のグラデーション表示が出来るようになります。


function drawRect(x, y, r) {
       console.log(x, y);
       ctx.fillStyle = `rgb(${r},0,0)`;
       ctx.fillRect(x, y, 5, 500); //'5'の部分でグラデーションの幅調整(黒が多くなったり赤が多くなったりする。
     } //'500'c.heightが表示サイズ
     for (let i = 0; i < 100; i++) {
       //100がc.widthの部分で / 5 とかにするとcanvasのサイズ変えても自動でいける
       drawRect(i * 5, 0, 3 * i);
     }


上記の
ctx.fillRect(x, y, 5, 500); 
この部分の5(横)と500(縦)が縦線の集合体でグラデーション表示させている。5(横)の数字を小さくするとストライプ柄みたいな表示になってちょっとずつcanvasを塗りつぶしていることがわかった。
for (let i = 0; i < 100; i++) 
ここの100は横幅の表示になっていてここの表示を自動化させるとc.widthと記述するとcanvasの大きさを変えただけで表示幅を変更させることも出来る。(スクールの先生にも聞いたw)
drawRect(i * 5, 0, 3 * i);
ここはコンソールで表示させてみると、5の倍数でどんどん増えていってる?のかなというう感じ。(すみません。理解不足😓)

次に表示させたのはこんな感じのアート:下記

色々なサイズやカラーの円がランダムに表示されているアート
なかなか3時間という短い時間で数種類のアートを表示させていくので、ついて行けなくなってます😭
登壇された先生は優しい方でしたので、都度疑問に思ったことを質問すると答えてくれます。答えながらコードを書いて進めていく感じ。
で、
上記の画像アートが書かれたコードが下記記述になります。

<!DOCTYPE html>
<html>

<body>

   <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
   </canvas>

   <script>
       let c = document.getElementById("myCanvas");
       let ctx = c.getContext("2d");

       function drawRect(x, y, r) {
           ctx.fillStyle = `rgb(${r},0,0)`;
           ctx.fillRect(x, y, 5, 500);
       }

       function getRandomNumber(num) {
           let x = Math.random() * num;
           return Math.round(x); // Math.floorも可 四捨五入か、切り捨てかの違い
       }

       // ランダムな色を返す関数
       function getRandomColor() {
           let r = getRandomNumber(255);
           let green = getRandomNumber(255);
           let blue = getRandomNumber(255);
           return `rgb(${r},${green},${blue})`
       }

       function drawArc() {
           ctx.beginPath();
           ctx.fillStyle = getRandomColor();
           ctx.arc(getRandomNumber(500), getRandomNumber(500),
               getRandomNumber(100) + 40, 0, Math.PI * 2, false);
           ctx.fill();
       }

       function random100Arc() {
           for (let i = 0; i < 100; i++) {
               drawArc();
           }
       }

       setInterval(random100Arc, 33);

   </script>

</body>

</html>

これはランダムに色を取ってきて表示させているだったかな。。。
検証画面でコマ回しに出来るやつとか教えてもらいました。何に反応しているのか目で確認出来る。
皆さんもコード書いて表示させて見たら、グーグルの拡張機能を使って検証画面を出し確認してみたりするとかなり勉強になります。

getRandomNumber(255);これでいろんな色がランダムに出るんですけど、ここの数字も変えるとr・g・bで表してあるのでそれぞれの色よりになったりします。(r=red・g=green・b=blue)
あとdrawArcで円を描いてる。


getRandomNumber(100) + 40,
この数字をそれぞれ10とかで表示をすると円の大きさが変わって表現も変えられるっぽいです。
ここまで記述したコードを変えたりしてブラウザで表示がどうなるのか試したりすると楽しいですw(絵で遊んでるような感覚)

まだまだ続きます☺️
03

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