p5.js

p5.jsで数式を表示したい

Posted on by pasocafe00 / 0件のコメント

p5.jsのcanvasの外になるけど、MathJaxというJavaScriptのライブラリで実現できる。

html側の設定

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        messageStyle: "none", // 画面左下のメセージボックスを消す
        CommonHTML: {
          matchFontHeight: false,  // 数式の文字サイズを本文文字に自動適合させる機能はOFF。日本語環境との親和性が低いため。
          mtextFontInherit: true,  // 数式の中でも、\text{}として文字を記述すれば、本文文字と同一のフォントが使用できる。
          scale: 100               // 本文文字に対するTeX文字のサイズを設定。標準は100(%)。
        },
        TeX: {
          extensions: ['color.js']
        }
      });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <div id="tb1">ここに数式が表示される</div>
  </body>
</html>

続いてsketch.jsの設定

function setup() {
  createCanvas(600, 400);
  let = p1 = createP();
  p1.parent("tb1");
}
function draw() {
  background(220);
  p1.html("\\(sin\\theta = \\displaystyle\\frac{\\textcolor{blue}{\\text{高さ}}}{\\textcolor{green}{\\text{斜辺}}} = " + frameCount + "\\)");
  MathJax.Hub.Typeset("tb1");
}

コメントする