p5.js と anime.js を組み合わせた Tweenアニメーション

JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。
今回の記事では、調べてよく出てくるライブラリの中の1つである「[anime.js](https://github.com/juliangarnier/anime/)」を使い、「[p5.js](https://p5js.org/)」で Tweenアニメーションを試してみた、という話です。

## 他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例
anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。

### GSAP
●GSAP Basic - OpenProcessing
　https://openprocessing.org/sketch/1227453

こちらは GSAP というライブラリとの組み合わせです。
p5.js と組み合わせて使う場合の書き方は、以下のようになるようです。

```javascript
var ball;

function setup() {
  createCanvas(windowWidth, windowHeight);
  ball = {
    x: width / 8,
    y: height / 2,
    diameter: 10,
		col: color(31, 190, 190),
  }
  gsap.to(ball, {
    x: width - width / 8,
    y: height / 2,
    diameter: height / 4,
		col: color(255, 127, 31),
    duration: 3,
    delay: 1,
    ease: "expo.inOut",
  });
}

function draw() {
  background(0);
  noStroke();
  fill(ball.col);
  circle(ball.x, ball.y, ball.diameter);
}
```

### p5.tween
●Milchreis/p5.tween: Tween library for P5.js
　https://github.com/Milchreis/p5.tween#-examples

こちらは p5.js用のライブラリです。
上記のページ内に複数のサンプルが掲載されています。

## anime.js を使う
### anime.js について
以下の公式ページの説明によると、anime.js は「軽量さと、シンプルでパワフルなAPI」を売りにしているライブラリのようです。

●juliangarnier/anime: JavaScript animation engine
　https://github.com/juliangarnier/anime/
![anime.js.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0e1b9749-a2c4-1a28-b3fb-01eadb3f21d1.jpeg)

[公式ドキュメント](https://animejs.com/documentation/)を見てみると、Tweenアニメーション以外のアニメーションも利用できるようです。

### p5.js と組み合わせて使う
#### p5.js Web Editor での下準備
この記事では、オンライン開発・実行環境である「[p5.js Web Editor](https://editor.p5js.org/
)」を使ってプログラムを作成してみます。

まずは p5.js Web Editor で anime.js が使えるようにするために、ライブラリを読み込ませます。
そのライブラリの読み込み元は、以下に書かれている CDN を用いることにします。

●animejs - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
　https://cdnjs.com/libraries/animejs

この CDN の「anime.min.js」を、p5.js Web Editor の index.html のタグに記載します。

#### メインのプログラムを書いていく
ここからは p5.js Web Editor の sketch.js を編集していきます。
まずは、冒頭で記載していた他のライブラリと p5.js を組み合わせた事例を参考に、animation.js でも似たようなことが行えそうか、animation.js の公式ドキュメントを見たりしつつ確認してみます。

以下の「TARGETS」の中の「JAVASCRIPT OBJECT」という部分を見てみると、上で掲載した GSAP の事例と似たような書き方ができそうです。

●Documentation | anime.js
　https://animejs.com/documentation/#JSobject
![ターゲット.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1daf7d0c-3038-6d55-bca6-8a225c7df5a1.jpeg)

上記の書き方を使って、実際に作ってみたプログラムは以下のとおりです。

```javascript

let ball;

function setup() {
  createCanvas(500, 500);

  ball = {
    x: 100,
    y: 100,
    diameter: 50,
    col: 100,
  };

  anime({
    targets: ball,
    x: 300,
    y: 250,
    diameter: 150,
    col: 200,
    easing: "linear",
  });
}

function draw() {
  background(0);
  noStroke();
  fill(ball.col);
  circle(ball.x, ball.y, ball.diameter);
}
```

実行してみると、うまく Tweenアニメーションが動きました。

## おわりに
今回、p5.js と anime.js を組み合わせた Tweenアニメーションを試して、無事に動作させることができました。

実は、今回の anime.js との組み合わせを試す前に「p5.tween」・「GSAP」・「TweenJS」との組み合わせは試していました（以下の動画が試しに作ってみたもので、記事にはできてないのですが...）。

- [p5.js でイージングを使った 5つのボールがバウンドするアニメーション（p5.tween を利用） - YouTube](https://www.youtube.com/watch?v=eQHuEgAHecc)
- [p5.js で Tweenアニメーション・イージングを使ってとびはねながら画面を横切るボールの描画（ライブラリで GSAP を利用） - YouTube](https://www.youtube.com/watch?v=JZzCurNYxmY)
- [TweenJS と p5.js を組み合わせた Tweenアニメーション - YouTube](https://www.youtube.com/watch?v=Bp-kLacNcNI)

それぞれ使い勝手やできることに違いがあるので、anime.js も含めて比較などを行っていければと思っています。