3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

完走賞ゲットのため小ネタを毎日投稿しようとチャレンジするAdvent Calendar 2022

Day 3

【完走賞ゲット-3】p5.js Web Editor で p5.func を使ったイージング

Last updated at Posted at 2022-12-02

はじめに

こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 3日目の記事です。

アドベントカレンダー初日・2日目と同様、3日目も 2記事を公開する日になっています(もう一つの記事はまだ完成してない...)。

本編

概要

今回の内容は、p5.js を使ったアニメーションでイージングを扱う話です。
「イージング」については、この「イージング関数チートシート」を見ていただくと、少し具体的な動きを体験することもできます。

p5.js でのイージングという話では、過去に Tweenアニメーションを扱えるライブラリの anime.js で扱ったことがありました(※ 以下の記事や動画が一例)。

●p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
 https://qiita.com/youtoy/items/361282f1113d88ff5f05

p5.js でのイージングという話題に関して、p5.funcというライブラリを使う方法もあると知り、今回の内容を試しました。

p5.func を利用したイージング

p5.func を利用したイージングという話を見かけたのは、以下の記事でした。

●p5.jsとProcessingでとにかくサクッとイージングをかけたい! : だらっと学習帳
 http://blog.livedoor.jp/reona396/archives/55793526.html

上記の記事で、実例なども書かれています。

p5.func の仕様

p5.func の公式ページで、仕様の詳細を確認してみます。
イージングに関しては、公式ページに書かれた「p5.Ease()」を使います。
p5.Ease()

そして、さらに公式の情報を見ていくと、「p5.Ease()」で利用できるメソッドの種類がたくさんあります。
メソッド

また、1つ以上の引数をとり(※ 2つ目以降はオプション)、0 から 1 の値をとるようです。
仕様

実際に p5.Ease() を試す

それでは、実際に p5.js Web Editor で、p5.func の p5.Ease() を組み合わせます。

デフォルトでは p5.func は読み込まれないため、index.html でライブラリをロードする必要があります。読み込むライブラリは、p5.func の公式ページの以下からダウンロードしてください(以下は、Minimized library をダウンロードして利用している例です)。
ダウンロードのリンク

そして、p5.js Web Editor にライブラリをアップロードします。その上で、index.html でライブラリをロードしている部分に p5.func の読み込みをする行を追加してください。
p5.func を読み込む

あとは、以下のようなブログラムを書いて試してみます。

sketch.js
let ease;

function setup() {
  createCanvas(400, 400);
  ease = new p5.Ease();
}

function draw() {
  background(100);

  const ratio = map(frameCount % 100, 0, 100, 0, 1);
  const linearX = ease.linear(ratio);
  circle(linearX * width, height * 0.3, 50);
  const circularInX = ease.circularIn(ratio);
  circle(circularInX * width, height * 0.7, 50);
}

実行してみると、以下のような結果が得られます。
(GIFアニメ化したパラメータの関係で、少しぎこちない動きになっていますが...)
イージングをお試し

引数は同じ値でも、p5.Ease() のメソッドを変更することで、単位時間あたりに動く量を変化させられることが分かります。

おわりに

これで無事、p5.js Web Editor で p5.func を使ったイージングを使えるようになりました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?