Merge branch 'zk-phi:master' into devpage

Readme.org

@@ -50,8 +50,8 @@ GitHub Actions を使って自動でビルドしたり、 lint をかけたり
 - lint-pr ... プルリクを作ったときに reviewdog 経由で eslint, stylelint を回す
 - build ... master を push したときに npm run lint して gh-pages に push
 
-ビルド時、 GitHub Secrets に ~ROLLBAR_TOKEN~ をセットしておくと、エラーを
-rollbar から確認できます。
+ビルド時、 GitHub Secrets に ~ROLLBAR_TOKEN~ や ~GA4_TOKEN~ をセットしておくと、
+エラー収集やユーザー分析ができます。
 
 *** ディレクトリ構成
 
@@ -96,7 +96,7 @@ BlobURL で返します。
 背景が塗りつぶされたあと、 ~drawImage~ される直前の ~ctx~ が渡ってくる
 ので、 ~transform~, ~filter~, ~clip~ など好みの変形をセットしてくださ
 い。 エフェクトは複数併用することを想定しているので、 ~setTransform~
-など他のエフェクトが加えた効果をアンドゥしてしまうようなメソッドを呼ぶ
+など他のエフェクトが加えた効果を上書きしてしまうようなメソッドを呼ぶ
 ことは避けてください。
 
 また作成した絵文字がアニメーション無効の環境でも快適に使えるよう、
@@ -106,13 +106,13 @@ BlobURL で返します。
 「１フレーム目固定」を選択してください。
 
 渡ってくる ~canvas~ は、最終的に絵文字としてレンダーされるものの４倍
-（縦横それぞれ２倍）の大きさになっていることに注意してください。
+（縦横それぞれ２倍）の大きさになっています。
 
 #+begin_src text
   +--------+
   |        | <- cellHeight / 4 の余白
   | +----+ |
-  | |    | | <- cellHeight / 2
+  | |    | | <- cellHeight / 2 の描画エリア
   | |    | |    最終的に絵文字に使われる部分
   | +----+ |
   |        | <- cellHeight / 4 の余白
@@ -172,15 +172,15 @@ BlobURL で返します。
   +--------+
   |        | <- cellHeight / 4 の余白
   | +----+ |
-  | |    | | <- cellHeight / 2
+  | |    | | <- cellHeight / 2 の描画エリア
   | |    | |    最終的に絵文字に使われる部分
   | +----+ |
   |        | <- cellHeight / 4 の余白
   +--------+
 #+end_src
 
-たとえば、ただ画面の中央に通常のサイズで絵文字を描画したいだけの場合
-(なにもしないアニメーション)、実装は次のようになります：
+たとえば、なにもしないアニメーション (ただ画面の中央に、通常のサイズで
+絵文字を描画するだけ) の実装は次のようになります：
 
 #+begin_src javascript
   ctx.drawImage(..., cellWidth / 4, cellHeight / 4, cellWidth / 2, cellHeight / 2);
@@ -192,7 +192,7 @@ BlobURL で返します。
 なくなってしまうので、エフェクトとして同じ効果を実装することができない
 か、一度は検討してみてください。
 
-なおエフェクトと同様に、作成した絵文字がアニメーション無効の環境でも
+またエフェクトと同様に、作成した絵文字がアニメーション無効の環境でも
 快適に使えるよう配慮してください。
 
 *** WebGL エフェクトの追加

src/constants/effects.ts

@@ -9,6 +9,7 @@ import effectGatagata from "../effects/gatagata";
 import effectYatta from "../effects/yatta";
 import effectPoyon from "../effects/poyon";
 import effectMotimoti from "../effects/motimoti";
+import effectNorinori from "../effects/norinori";
 import effectYurayura from "../effects/yurayura";
 import effectZoom from "../effects/zoom";
 import effectStraight from "../effects/straight";
@@ -26,6 +27,7 @@ export default [
       { label: "ヤッタ", value: effectYatta },
       { label: "ぽよーん", value: effectPoyon },
       { label: "もちもち", value: effectMotimoti },
+      { label: "ノリノリ", value: effectNorinori },
       { label: "BLINK", value: effectBlink },
       { label: "直球", value: effectStraight },
     ],

src/effects/norinori.ts

@@ -0,0 +1,25 @@
+import { Effect } from "../types";
+
+const effectNorinori: Effect = (keyframe, ctx, cellWidth, cellHeight) => {
+  const k = 1 / 4;
+  const a = (2 * k - 1) / (k * k - k);
+  const b = (1 - 2 * k * k) / (k * k - k);
+
+  const kf = (keyframe % 0.5) * 2;
+  const sign = (keyframe < 0.5) ? -1 : 1;
+  const ratio = (kf < k
+    ? (-a * kf ** 2 + -b * kf)
+    : (a * kf ** 2 + b * kf + 2)
+  ) / 6;
+
+  ctx.transform(
+    1,
+    0,
+    sign * ratio,
+    1 - ratio,
+    -sign * ratio * cellHeight * 3 / 4,
+    ratio * cellHeight * 3 / 4,
+  );
+};
+
+export default effectNorinori;