Web初心者がGrimore.jsでクリスマスツリーを作ることにした

##この記事について
Grimore.jsで簡易のクリスマス（に使う）ツリーを作ります


##イントロダクション

「もう明日はクリスマスということで，クリスマスツリー作るぞー！」
ってやる気になったのはいいものの，家に作るのは邪魔だし……．


友人「Grimore.jsで作ろうず！あ、作製したらアドベントカレンダーに投稿してね」
私「ｱｯ､ﾊｲ」

ということで**Grimore.js**でクリスマスツリー作ります．

なお、Grimore.jsについての概要は，
私より詳しい方がアドベントカレンダーに書いている思うのでここでは省略します．

###1. 根元の色を変える
以下のコードを入力すると，下のような青い円柱が表示されます．

```xml:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>クリスマスツリー</title>
    <script src="https://unpkg.com/grimoirejs-preset-basic@1.5.0/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
    <link href="./index.css" rel="stylesheet">
    <script src="./grimoire.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/goml" src="./grimoire.goml" id="canvas"></script>
  </body>
</html>
```

```xml:grimoire.goml
<goml width="fit" height="fit">
    <geometry name="cylinder" type="cylinder" />
    <scene>
        <camera class="camera" near="0.01" far="40.0" aspect="1.5" fovy="45d" position="0,0,20">
            <camera.components>
                <MouseCameraControl/>
            </camera.components>
        </camera>
        <mesh geometry="cylinder" position="0,0,0" scale="3,3,3" color="#6a5acd"/>
    </scene>
</goml>
```
<img src="https://gyazo.com/0bd67a6be644e0cb12fa063bd5a3c65d.jpg" width="512"/>
なおこのコードは，[Grimoire.js](https://grimoire.gl/tutorial/04-handle-component.html)のコードを少しイジっただけのものです．

しかし、ツリーの根本が<font color = "blue">青色</font>というのは色々とおかしいので、<font color = "maroon">茶色</font>にします。また，scaleの値も変えてみたいと思います．

```xml:index.html
（前略）
    <mesh geometry="cylinder" position="0,0,0" scale="3,3,3" color="#6a5acd"/>
（後略）
```
の部分を、

```xml:index.html
（前略）
    <mesh geometry="cylinder" position="0,0,0" scale="1,3,1" color="#734333"/>
（後略）
```
と変更します．
すると，ツリーの根元っぽい形が出来上がりました！
<img src="https://i.gyazo.com/bae36019f8ac0201b304a66e5e6628d6.png" width="512"/>

###2. ツリーの草の部分を作成する
まず，ツリーの草の形に近い円錐を作成します．
コード中のcylinderを作成しているスクリプトの下に，円錐を作成するスクリプトを書きます．
今回追加した部分は，２行目の<b>"\<geometry name= ..."</b>と11行目の<b>"\<mesh geometry= ..."</b>から始まる行です．

```xml:index.html
<goml width="fit" height="fit">
    <geometry name="cylinder" type="cylinder"/>
    <geometry name="cone" type="cone"/>
    <scene>
        <camera class="camera" near="0.01" far="40.0" aspect="1.5" fovy="45d" position="0,0,20">
            <camera.components>
                <MouseCameraControl/>
            </camera.components>
        </camera>
        <mesh geometry="cylinder" position="0,0,0" scale="1,3,1" color="#734333"/>
        <mesh geometry="cone" position="0,3,0" color="green"/>
    </scene>
</goml>

```

<img src="https://i.gyazo.com/5b8d86e09d22729e7701e9bd837fdbc2.png" width="512"/>

草生える〜（小さい）
ので草の部分大きくします．

```xml:index.html
（前略）
     <mesh geometry="cone" position="0,3,0" color="green"/>
（後略）
```
の部分を、

```xml:index.html
（前略）
     <mesh geometry="cone" position="0,3,0" color="green" scale="4, 4, 4"/>
（後略）
```
と変更します．

<img src="https://i.gyazo.com/f464611f1488703ead85fb0b58bb1ca3.png" width="512"/>

それっぽく見えるようになりましたが，これをさらにツリーぽく見せたいと思います．
そのために，アトリビュートの<b>divide</b>を追加します
やることは簡単で，3行目の

```xml:index.html
（前略）
     <geometry name="cone" type="cone"/>
（後略）
```
の部分に対して，

```xml:index.html
（前略）
     <geometry name="cone" type="cone" divide="7"/>
（後略）
```

といったように，後ろにアトリビュートを追加すればいいだけなんです！
こうすると，先程までの無機物なツリーが...

<img src="https://i.gyazo.com/0582a20b6b7a79395d9a532fdc0116df.gif" width="256"/>

ということで、クリスマス（に使う）ツリーが完成しました！