【p5.js】テキストを縦書きにする

目次

---

はじめに

p5.jsでテキストを縦書きにする方法を紹介します。

改行を挿入する

改行を一文字毎に挿入することで縦書きの文字を表示することができます。
次のコードで文字列に対して、一文字毎に改行コードを挿入します。

  let txt = "縦書きにしたい文字";
  let txt0 = ""; //空の文字列
  for(let i=0;i<txt.length;i++){
    txt0 += txt.slice(i, i+1) + '\n';
  }
  txt = txt0.slice(0, txt0.length-1);

txtに縦書きで表示したい文字を指定して下さい。
最終行のtxt = txt0.slice(0, txt0.length-1);は、
for文内で改行コード'\n'を最後の文字の後ろに余計に付加したものを削除してから、
txtに縦書きの文字列を代入しています。

実際に縦書きで文字列を表示してみます。

function setup() {
  createCanvas(800, 450);

  background(240, 240, 220);

  let txt = "縦書きにしたい文字";
  let txt0 = ""; //空の文字列
  for(let i=0;i<txt.length;i++){
    txt0 += txt.slice(i, i+1) + '\n';
  }
  txt = txt0.slice(0, txt0.length-1);

  stroke(0);
  fill(0);  textSize(36);
  textAlign(CENTER, CENTER);
  text(txt, width/2, height/2);
}

実行結果は下のようになり、無事に縦書きで文字を表示することができました。

行間を変える

縦書きに表示する文字の行間を変えてみます。
textLeading(行間サイズ)を使うことで行間を設定できます。

次のコードで行間サイズを文字サイズの1.5倍にしてみましょう。

function setup() {
  createCanvas(800, 450);

  background(240, 240, 220);

  let txt = "縦書きにしたい文字";
  let txt0 = ""; //空の文字列
  for(let i=0;i<txt.length;i++){
    txt0 += txt.slice(i, i+1) + '\n';
  }
  txt = txt0.slice(0, txt0.length-1);

  let txt_size = 36;
  stroke(0);
  fill(0);
  textSize(txt_size);
  textAlign(CENTER, CENTER);
  textLeading(txt_size*1.5);
  text(txt, width/2, height/2);
}

実行結果が下のようになります。
行間が広がったのがわかると思います。

textLeading(txt_size*1.5);で行間を文字サイズtxt_sizeの1.5倍に設定しています。

次に行間を狭めてみます。
textLeading(txt_size*0.8);とすれば、行間が文字サイズtxt_sizeの0.8倍になります。
実行結果が下になります。
設定通り行間が狭くなりました。

まとめ

p5.jsでテキストを縦書きにする方法を紹介しました。

文字列に対して、一文字毎に改行コードを挿入することで、縦書き表示を実現できます。
更に、文字行間を変更し縦書きの見た目を調整することもできます。

テキストの扱い方の参考になれば幸いです。