##この記事について
Grimore.jsで簡易のクリスマス（に使う）ツリーを作ります
##イントロダクション
「もう明日はクリスマスということで，クリスマスツリー作るぞー！」
ってやる気になったのはいいものの，家に作るのは邪魔だし……．
友人「Grimore.jsで作ろうず！あ、作製したらアドベントカレンダーに投稿してね」
私「ｱｯ､ﾊｲ」
ということでGrimore.jsでクリスマスツリー作ります．
なお、Grimore.jsについての概要は，
私より詳しい方がアドベントカレンダーに書いている思うのでここでは省略します．
###1. 根元の色を変える
以下のコードを入力すると，下のような青い円柱が表示されます．
<!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>
<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>
なおこのコードは，[Grimoire.js](https://grimoire.gl/tutorial/04-handle-component.html)のコードを少しイジっただけのものです．
しかし、ツリーの根本が青色というのは色々とおかしいので、茶色にします。また，scaleの値も変えてみたいと思います．
（前略）
<mesh geometry="cylinder" position="0,0,0" scale="3,3,3" color="#6a5acd"/>
（後略）
の部分を、
（前略）
<mesh geometry="cylinder" position="0,0,0" scale="1,3,1" color="#734333"/>
（後略）
と変更します．
すると，ツリーの根元っぽい形が出来上がりました！
###2. ツリーの草の部分を作成する
まず，ツリーの草の形に近い円錐を作成します．
コード中のcylinderを作成しているスクリプトの下に，円錐を作成するスクリプトを書きます．
今回追加した部分は，２行目の"<geometry name= ..."と11行目の"<mesh geometry= ..."から始まる行です．
<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>
草生える〜（小さい）
ので草の部分大きくします．
（前略）
<mesh geometry="cone" position="0,3,0" color="green"/>
（後略）
の部分を、
（前略）
<mesh geometry="cone" position="0,3,0" color="green" scale="4, 4, 4"/>
（後略）
と変更します．
それっぽく見えるようになりましたが，これをさらにツリーぽく見せたいと思います．
そのために，アトリビュートのdivideを追加します
やることは簡単で，3行目の
（前略）
<geometry name="cone" type="cone"/>
（後略）
の部分に対して，
（前略）
<geometry name="cone" type="cone" divide="7"/>
（後略）
といったように，後ろにアトリビュートを追加すればいいだけなんです！
こうすると，先程までの無機物なツリーが...
ということで、クリスマス（に使う）ツリーが完成しました！