Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

式変形をアニメーションにするサービス作った

こんな感じで式変形の様子がアニメーションになります。結構革新的ではないですか??個人的には大満足の出来です。

diffがうまく取れず、よくわからない変形になったり、iPhoneだと表示が崩れたりしますがご愛嬌ということで。

f:id:panda_noir:20180203140508g:plain

作った動機

大学の数学の授業で、式のどこが変わっているのか分かりづらすぎて作りました。教授の方にはぜひお使いいただき、すばらしくわかりやすい授業にしていただきたいです。導入の検討お願いします。

使い方

アニメーションさせたい数式をLaTeXで表現してください。その数式をLaTeX2JSに入力して「アニメーションする」を押せばアニメーションされます。

まだLaTeXのすべての構文に対応できておりません。それと、デザインセンスが壊滅的なのでクソダサUIになっております。ご了承ください。

仕組み

仕組みとしては

  1. 数式を配列に区切る
  2. その配列をもとにDOMを組み立てる
  3. diffに応じてフェードイン・フェードアウトさせる

これだけです。数式の区切り方を工夫すればもうちょいマシなdiffになりそうですが、LaTeX経験が浅いのでヘタな区切り方ができないのが現状です。

みんな使ってくれ

Wikiとかに導入されるといい感じじゃないですか?