FlowerJS: 花の形を作って、アニメーションできるJavaScript フレームワーク

![profile_fb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150182/75495e4b-302b-94ec-a8d2-eccf0fac79db.png)
# JavaScript フレームワーク　FlowerJSの紹介
[FlowerJS Github Home](https://github.com/jirotubuyaki/FlowerJS "FlowerJS")

これは[CreateJS](https://createjs.com/ "CreateJS Home")というインタラクティブなアニメーションを作るフレームワークを拡張して、簡単に花の形状を作ってアニメーションできるHTML5 + Canvas向けのプログラムです。CreateJSに定義されているメソッドをそのまま引き継いで、新たに花向けのメソッドを追加しました。比較的簡単にアニメーションが作れるのがメリットです。

## 設定方法
まず、HTMLにキャンパスを設定して、[FlowerJS](https://github.com/jirotubuyaki/FlowerJS "FlowerJS Github Home")から、ソースコードをダウンロードしてください。その後、easeljs.js & tweenjs_ex.js & flowerjs.jsの三つのスクリプトのパスを通して、自作する花のアニメーションのスクリプトにもパスを通してください。今回は、example.jsとしました。その後HTMLのBODY内にCanvasを作ってください。例を下記に示します。
![screen_flower_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150182/22dee8d6-f5e6-4d2a-efd7-f9852cd67e29.png)


```index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="easeljs.js"></script>
	<script src="tweenjs_ex.js"></script>
	<script src="flowerjs.js"></script>
	<script src="example.js"></script>
</head>
<body onload="start()">
	<div><canvas id="mycanvas" width="1600px" height="800px" style="width:800px;height:400px;"></canvas></div>
</body>
</html>
```

次にJavaScriptのファイルを作ります。キャンパスにアクセスするためのCreateJSメソッドを作り、花のオブジェクトを作成した後プロパティを設定します。

```example.js
var start = function() {
    canvas = document.getElementById("mycanvas");
    stage = new createjs.Stage(document.getElementById("mycanvas"));

    var flower_obj_1 = new Flower();  // 通常の花
    var flower_obj_2 = new FlowerRnd(); // ノイズのある花
    var sunflower_obj_1 = new SunFlower(); // ひまわり型の花
    
    flower_obj_1.init().setSize(50).setPetalSize(56).setColor("#ff1493").setPetal(8).setPile(2,1.2).setAlpha(0.5).create(200,200);
    flower_obj_2.init().setSize(10).setPetalSize(56).setColor("#ff1493").setPetal(8).setPile(3,1.2).setAlpha(0.5).setNoise(1.2).create(500,200);
    sunflower_obj_1.init().setSize(100).setPetalSize(45).setColor("#ffd700").setColorLine("#999").setPetal(16).setPile(2,1.2).setAlpha(0.6).create(900,200);
    
    stage.addChild(flower_obj_1.flower);
    stage.addChild(flower_obj_2.flower);
    stage.addChild(sunflower_obj_1.flower);
};
```
花のタイプは三つあり、次のメソッドで呼び出します。
Flower() ＆ FlowerRnd() ＆ SunFlower()
プロパティは以下に示します。
* setSize(50): 花の大きさ
* setPetalSize(56): 花びらのサイズ
* setColor("#ff1493"): 花の色
* setPetal(8): 花びらの数
* setPile(2, 1.2): 花を重ね合わせる数
* setAlpha(0.5): 花の透明度
* setNoise(1.2): FlowerRnd()の場合のノイズ
* create(200, 200): 花を配置するX座標とY座標

## 花のアニメーション
アニメーションはTweenJSに定義するメソッドがすべて使えます。[TweenJS](https://createjs.com/tweenjs "TweenJS Home")からメソッドを参照してください。
```example_2.js
createjs.Tween.get(flower_obj_1.flower)
    .to({rotation:360,x:200,y:300},1000)
    .to({x:200,y:200,petal_index:0,petal_scale_0:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_1:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_2:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_3:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_4:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_5:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_6:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_7:1.3},300,createjs.Ease.cubicOut)
    .to({petal_scale_0:0.8,petal_scale_1:0.8,petal_scale_2:0.8,petal_scale_3:0.8,petal_scale_4:0.8,petal_scale_5:0.8,petal_scale_6:0.8,petal_scale_7:0.8},600,createjs.Ease.cubicOut);
```
petal_scale_1というプロパティは、１番目の花びらを１．３倍に拡大するという意味です。
最後にアニーションするためにステージを定期的にアップデートしてください。

```final.js
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.framerate = 60;
function handleTick(){      
    stage.update();
}
```

## Examples
何個か例を載せます。[https://github.com/jirotubuyaki/FlowerJS/tree/master/examples](https://github.com/jirotubuyaki/FlowerJS/tree/master/examples "FlowerJS Github Examples")にありますので、参考にしてください。
![example_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150182/cc6ec2b8-1391-1fbe-30ca-5e8a8abdc7f8.png)
[https://jirotubuyaki.github.io/FlowerJS/examples/example_1.html](https://jirotubuyaki.github.io/FlowerJS/examples/example_1 "exapmple 1")

![example_1_big.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150182/86fa9ac2-1d26-ec9a-78ce-59a24d3354b5.png)
[https://jirotubuyaki.github.io/FlowerJS/examples/example_1_big.html ](https://jirotubuyaki.github.io/FlowerJS/examples/example_1_big.html "example 2")

![profile_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150182/f5427b77-e16e-05bf-328c-7ee2496eebb3.png)
[https://jirotubuyaki.github.io/FlowerJS/examples/example_2.html](https://jirotubuyaki.github.io/FlowerJS/examples/example_2.html "example 3")

[https://jirotubuyaki.github.io/FlowerJS/examples/example_3.html](https://jirotubuyaki.github.io/FlowerJS/examples/example_3.html "example 4")

## Copyright
MIT License
Copyright (c) 2023 Masashi OKADA
I modified p._updateTargetProps method and added p.flower_sprite and p.flowerrnd_sprite in TweenJS.

The MIT License (MIT)
Copyright (c) 2014 gskinner.com, inc.

## リファレンス
* [CreateJS](https://createjs.com/ "CreateJS Home")
* [FlowerJS](https://github.com/jirotubuyaki/FlowerJS "FlowerJS Github Home")
* [TweenJS](https://createjs.com/tweenjs "TweenJS Home")
* [Github jirotubuyaki home](https://github.com/jirotubuyaki)