p5.jsで日本語テキストを改行させる

p5.jsでは日本語が自動改行されない

Processingではtext()に範囲指定することで文字列を自動改行してくれます。p5.jsにも範囲指定の機能があるのですが、日本語では現在のところ改行できません。

ここでは行の文字数を設定して改行する方法をやってみます。

英語の文字列の場合

p5.js

let txt = "Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web."

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(200);
  text(txt,0,0,width,height);
}

上記のtxtのような長い文字列に対して

text(txt,0,0,width,height);

というようにテキストボックスの範囲を指定すると、文字列が自動的に改行される。

日本語の文字列の場合

p5.js

let txt = "こんにちは！p5.jsは、アーティスト、デザイナー、教育者、初心者がコーディングにアクセスできるようにすることを目的としたProcessingの本来の目的から始まるJavaScriptライブラリです。これを今日のWeb用に再解釈します。"

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(200);
  text(txt,0,0,width,height);
}

このように日本語の文字列だと改行されない。日本語でも良きところに半角スペースを入れると改行されるので、半角スペースが改行の目安になっているみたい。

文字数を指定し改行させる

コード

p5.js

let txt = "こんにちは！p5.jsは、アーティスト、デザイナー、教育者、初心者がコーディングにアクセスできるようにすることを目的としたProcessingの本来の目的から始まるJavaScriptライブラリです。これを今日のWeb用に再解釈します。"

var str1, str2, sliceStr;
var addBreakStr = "";
var wCount = 10;

function setup() {
  createCanvas(200, 200);

  sliceStr = txt;
  for (var i = 0; i < txt.length / wCount; i++) {
    str1 = sliceStr.slice(0, wCount);
    str2 = sliceStr.slice(wCount);
    addBreakStr += str1 + '\n';
    sliceStr = str2;
  }
}

function draw() {
  background(200);
  text(addBreakStr, 0, 0, width, height);
}

結果

解説

元となる文字列に、一定の文字数で改行を加えるようにします。

文字を分割する

p5.js

var txt ="あいうえお"

txt.slice(2); //うえお
txt.slice(1,3) //いう

文字列.sliceで文字列を分割できる。
パラメータ１つで、その文字数以降を取り出します（０は１字目）。
パラメータ２つで、何字目以降、何字目までを取り出します。

まずは、オリジナルの文字列を破壊しないようにsliceStr、分割した文字列を入れるstr1、str2を宣言します。

p5.js

var str1, str2, sliceStr;

sliceStrにオリジナルの文字列を代入します。

p5.js

sliceStr = txt;

ここでは改行するまでの文字数を10字とします。

p5.js

var wCount = 10;

str1に最初の10文字、str2にそれ以降の文字列を分割し代入します。

p5.js

str1 = sliceStr.slice(0, wCount);
str2 = sliceStr.slice(wCount);

改行を加える

文字列に"\n"を加えることで改行できます。上記で分割した文字列を"\n"で連結します。

空のString型を宣言し、

p5.js

var addBreakStr = "";

上記で分割した最初の１０文字(str1)と"\n"を追記します。

p5.js

addBreakStr += str1 + '\n';

繰り返す

上記の作業をforで繰り替えします。

p5.js

for (var i = 0; i < txt.length / wCount; i++) {
    str1 = sliceStr.slice(0, wCount);
    str2 = sliceStr.slice(wCount);
    addBreakStr += str1 + '\n';
    sliceStr = str2;
}

forで繰り返す回数は、何行になるかの数になります。
文字列の長さ / 改行するまでの文字数
で計算して何行になるかを算出しています。

p5.js

txt.length / wCount

日本語だけなら綺麗に改行されますが、英語も入るとボコボコになります。

ボコボコを修正するために、英字を0.5カウントにしても英単語が変なところで改行される恐れがあります。何か方法があったら教えて下さい。