21-01 ファイルの読み込み(基本)

学習日

2月17日   火曜日

名前

中村 結

✅練習問題21-1-2

すべての行が描画されるようにしてみましょう。また、文字サイズを48に変更してください。

let textData;

function preload() {
  textData = loadStrings("text.txt");
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);

  // 文字の設定
  fill(80, 160, 255);
  textSize(48);
  textAlign(LEFT, TOP);

  // 読み込んだテキストを表示
  // loadStrings()は配列を返すので、最初の行(0番目)を取得
  text(textData[0], 10, 10);
  text(textData[1], 10, 58);
  text(textData[2], 10, 106);
  text(textData[3], 10, 154);
  text(textData[4], 10, 203);
}

📷 結果

✅練習問題21-1-4

学んだことを組み合わせてプログラムを作りなさい。

let currentFont;

function preload() {
  currentFont = loadFont("https://pg.pasocafe.jp/WebFonts/JF-Dot-MPlus12.ttf");
  textData= loadStrings("text.txt");
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);

  // 読み込んだフォントデータを適用する
  textFont(currentFont);  

  // テキストを描画
  textSize(48);
  fill(80, 160, 255);
  textAlign(LEFT, TOP);
  text(textData[0], 10, 10);
  text(textData[1], 10, 58);
  text(textData[2], 10, 106);
  text(textData[3], 10, 154);
  text(textData[4], 10, 203);
}

📷 結果

まとめ

外部のファイルからデータを読み込んで表示するには

function preload() {
currentFont = loadFont();
textData= loadStrings();
}

に当てはめることで画像やフォントを表示することができる。

コメントする