学習日
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);
}📷 結果
.png)
まとめ
外部のファイルからデータを読み込んで表示するには
function preload() {
currentFont = loadFont();
textData= loadStrings();
}
に当てはめることで画像やフォントを表示することができる。