p5.jsのWEBGLモードにするとtext();が表示されない

Question

p5.js初心者です。
タイトルの通りなのですが、p5.jsのWEBGLモードにするとtext();が表示されません。

WEBGLを解除すると表示されます。

p5.js公式サイトののtext();のリファレンスのコードをそのままコピーしても動かず・・・。
https://p5js.org/reference/#/p5/text

他に参考になるようなドキュメントが見つからず困っています。
原因分かりますでしょうか。

▼下記のコードで表示されません。

<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script> <script> function setup() { createCanvas(windowWidth, windowHeight, WEBGL); background(100); } function draw(){ textSize(50); text("テストテストテスト",100,100); } </script>

Answer 1

リファレンスの下の方に注意書きがありますが、WebGLの場合、事前にフォント読み込みが必要です。

WEBGL: Only opentype/truetype fonts are supported. You must load a font using the loadFont() method (see the example above). stroke() currently has no effect in webgl mode.

日本語フォントは試していませんが、英語フォントであれば、以下のコードで表示できることを確認しました。

let myFont;
function preload() {
    myFont = loadFont('assets/inconsolata.otf');
}

function setup() {
     createCanvas(windowWidth, windowHeight, WEBGL);
     background(100);
     textFont(myFont);
}

function draw(){
    textSize(50);
    text("Hello, P5 World!", 100, 100);
}

```![Hello, P5 World!](fe73b9aedb69c9e764f9aa8d866c2ae3.png)

Comments

[takara_1309]

ありがとうございます!

[cx20]

ちなみに、日本語フォントを用意すれば、日本語も表示されることも確認しました。参考まで。

例）
myFont = loadFont("https://fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf");

[takara_1309]

試しにやったら出来ました！ありがとうございます。

原因は
・フォントを読み込まないと動作しないこと
・ローカルで動作確認していたから。
という初歩的なことでした。

WEBGLになった途端フォントの種類を指定しないと動かないのは意外でした。
ありがとうございます。

Answer 2

すいません
単純な疑問なんですが、表示はどこでしたいのですか？？

ブラウザー？ファイル？
あくまでこのjsは処理が書いてあるだけで

表示させる器がないので
それかＨＴＭＬやＰＨＰでのコードも既にあるのでしょうか？？