練習問題7-5-2
例題7-5-1 と、07-01 のテキスト読み込みを組み合わせましょう。
07-01 と同じ text.txt（あ行〜な行）を用意し、次のように表示しなさい。
loadStringsとloadFontの 両方 をpreloadで読む- 文字サイズは 48
- すべての行を表示する（行間も 48）
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);
for(let i=0; i<textData.length; i++){
text(textData[i], 10, i*48);
}
}
今回の課題は昔のものを少し見てすぐ作れたので、前やったことが身についているということを実感できてよかったです。
練習問題7-5-3
練習問題7-5-2 を改造し、行ごとに色を交互に変えなさい。
- 偶数行（0, 2, 4…）…
(80, 160, 255) - 奇数行（1, 3…）…
(120, 200, 255)
let currentFont;
let textData;
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);
for(let i=0; i<textData.length; i++){
if(i % 2 == 1){
fill(120, 200, 255)
}else{
fill(80, 160, 255);
}
text(textData[i], 10, i*48);
}
}
色も似せれたので満足です。
練習問題7-5-4
これまで1種類のフォントだけを使いました。作品づくりでは、場面に合わせて いろいろな字体 を組み合わせることが多いです。
次の 8種類 のドットフォントが使えます。どれも、次の URL の末尾にファイル名を付けて読み込めます。
let ConfiguredFont;
let DisplayFont;
let textData;
function preload() {
ConfiguredFont = loadFont("https://pg.pasocafe.jp/WebFonts/JF-Dot-K12.ttf");
DisplayFont = loadFont("https://pg.pasocafe.jp/WebFonts/JF-Dot-Shinonome14.ttf")
textData = loadStrings("text.txt")
}
function setup() {
let w =400
let h =400
createCanvas(w, h);
background(50);
textSize(w/7);
fill(255, 50, 50);
textAlign(CENTER, CENTER);
textFont(DisplayFont)
text(textData[0], width/2, height/2);
textFont(ConfiguredFont)
textSize(w/20)
fill(200)
for(let i=1; i<textData.length; i++){
text(textData[i], width/2, height/2+(height/10+h/10*i))
}
}text.txtの中身
You are dead!
スタート画面に戻る
ロビーに戻る
もうやだ帰る！
画面の大きさが変わっても大丈夫なように工夫しました。
横の限界が、(w , h) (2 , 1)です。これ以上wを伸ばすと文字が重なります。
縦は上限ではなく下限なのですが、(w , h) (1 , 2)が重ならない限界です。
それ以外にも何かバグはあるかもしれませんが、そこまでやり込む人はいないと思うので、大丈夫だと思います。
というか、どこかで粗が見つかりそうなのでそんなに詮索しないでください。