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

2019年7月7日 15:44

こんにちは、KAORIです。

先日、モニターで参加した勉強会で作成した作品について書いてみます。
東京で行われた勉強会で、今回はzoomを使ってライブ配信しながらJavaScriptで作成していくといった内容でした。
現地でも参加者が数人いて説明を聞きながら実際にコードを書いていくといった流れです。

私は、ほぼ初心者でしたので少しでも当日により理解が出来るようにと思いLINKなどを見て勉強会に参加しました。

19:00スタート時のコード⬇️
四角形を描く

<!DOCTYPE html>
<html>
<body>

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>

</body>
</html>

↑これを入れるだけでも結構テンション上がると思いますw
ちなみに、予習ではここまでしか出来ませんでした汗（下記画像）

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>この部分の width="300" height="150"で表示領域の大きさを出しています。
最初は小さめの箱の中に赤色の四角形が１個表れてる状態。
ここまでは何で表示されているのか、わかりませんでした。
なぜ上記のような表示になっていたのかは下記コードが抜けていたためでした。

ctx.fillStyle = "#C3C3C3";
ctx.fillRect(0, 0, 150, 100);

ctx.fillStyle = "#E3E1C3";
ctx.fillRect(20, 20, 150, 100);

ctx.fillStyle = "#1FC323";
ctx.fillRect(40, 40, 150, 100);

次は、箱の中に何個もいろんな色の四角形をいくつも出すコードを書いていきます。


<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>予習で作成したところ</title>
</head>
<body>
   <canvas id="myCanvas" width="800" height="500" style="border:1px solid #d3d3d3;">
   </canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
   <script>
       var c = document.getElementById("myCanvas");//<canvas>のこと
       var ctx = c.getContext("2d");//絵を描くためのペン

       // 0-255のランダムな数値を取得する
       function getRandomNumber() {
           return Math.round(Math.random() * 255);
       }
       // ランダムな色を返す関数
       function getRandomColor() {
           let r = getRandomNumber();
           let g = getRandomNumber();
           let b = getRandomNumber();
           return `rgb(${r},${g},${b})`
       }
       // x, y, width, height, colorを持つオブジェクト
       // draw関数を呼び出すと、四角形を描画する
       var data = {
           name: 'hoge',
           x: 0,
           y: 0,
           width: 0,
           height: 0,
           color: "#FF0000",
           setData: function (_x, _y, _width, _height, _color) {
               this.x = _x;
               this.y = _y;
               this.width = _width;
               this.height = _height;
               this.color = _color;
           },
           draw: function () {
               ctx.fillStyle = getRandomColor();
               ctx.fillRect(this.x, this.y, this.width, this.height);
           }
       };
       for (var i = 0; i < 50; i++) {
           let obj1 = new Object(data);
           obj1.setData(10 * i, 10 * i, 50, 50, "#2EF1D5");
           obj1.draw();
       }
   </script>
</body>
</html>

canvasの大きさを変えると、まだ跳ね返りのコードが無いのでランダムな色の四角形が斜線上に沢山でてきます。

02に続く。。。

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