P5.js 日本語リファレンス(text)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の text関数を説明します。

text()

説明文

画面にテキストを描画します。
パラメータで指定された位置に、画面の最初のパラメータで指定された情報を表示します。

textFont() でフォントが設定されていないときはデフォルトのフォントが使用され、textSize() でフォントが設定されていないときはデフォルトのサイズが使用されます。 fill() を使用してテキストの色を変更できます。
stroke() および strokeWeight() を使用して、テキストのアウトラインを変更できます。

テキストは、座標の左、右および中心に描画するオプションを提供する textAlign() に関連して表示されます。

x2およびy2パラメータはテキストを表示する長方形の領域を定義します。これらのパラメータを指定すると、現在のrectMode() 設定に基づいて解釈されます。指定された長方形に完全に収まらないテキストは画面に描画されません。
x2とy2が指定されていない場合、ベースラインの配置がデフォルトになります。つまり、テキストはxとyから上方に描画されます。

WEBGL モードのとき：opentype / truetype フォントのみがサポートされています。 loadFont() を使用してフォントをロードする必要があります。(例2参照) 現在、stroke() は WEBGL モードでは効果がありません。

構文

テキスト(str, x, y, [x2], [y2])

パラメタ

• str
  String | Object | Array | Number | Boolean：表示される英数字記号

• x
  Number：テキストのx座標

• y
  Number：テキストのy座標

• x2
  Number：デフォルトではテキストボックスの幅。詳細については rectMode() を参照してください(オプション)

• y2
  Number：デフォルトではテキストボックスの高さ。詳細については rectMode() を参照してください(オプション)

例1

function setup(){
  createCanvas(300,300);
  let s = 'The quick brown fox jumped over the lazy dog.';
  fill(0, 102, 183);
  text(s, 10, 10, 90, 80); //テキストボックス内でテキストを折り返します
}

実行結果

例2

let inconsolata;
function preload()  {
  inconsolata = loadFont('assets/Inconsolata-Regular.ttf');
}
function setup()  {
  createCanvas(300, 300, WEBGL);
  textFont(inconsolata);
  textSize(width / 3);
  textAlign(CENTER, CENTER);
}
function draw()  {
  background(0);
  let time = millis() ;
  rotateX(time / 1000);
  rotateZ(time / 1234);
  text('inconsolata', 0, 0);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。