雑記

21-02　ファイルの読み込み（応用）

Posted on by camus / 0件のコメント

学習日

2026年2月24日、2月28日、3月3日

名前

樋口桜大

自分で作った図形（コードと画像）

✅ 練習問題 21-2-1

　ファイルの読み込み（基本）で、最後に作ったプログラムを修正して、行ごとに色が変わるようにしてみよう！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　条件は以下の通り↓

  • 背景色（234, 244, 255）
  • 偶数行は濃い色(80, 160, 255)
  • 奇数行は薄い色(120, 200, 255)

コード

let textData;
let currentFont;

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

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

  textSize(48);
  textAlign(LEFT, TOP);
  for(let i = 0; i < 5; i++){
    if(i % 2 == 0){
      fill(80, 160, 255);
    }
    else{
      fill(120, 200, 255);
    }
      text(textData[i], 10, i * 50);
  }
}

📷 実行結果

１行目は[0]で表されるところに注意して、判定文ifなどを駆使してみよう。

✅ 例題 21-2-2

　今までは、読み込んだテキストをプログラムして行で表示していたけれど、次は、一文字ずつ取り出すことに挑戦してみよう！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　文字列から一文字ずつ取り出していくには、今まで学習してきた「配列」を思い出して[　]を使って表示できるよ。

コード

let textData;

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

function setup() {
  createCanvas(300, 300);
  print(textData[0][0]);
  print(textData[1][1]);
  print(textData[3][1]);
}

📷 実行結果

[0]が一番最初だよね？

✅ 練習問題 21-2-3

　例題21-2-2を使って、「すしくいたい」と表示してみよう！

コード

let textData;

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

function setup() {
  createCanvas(300, 300);
  print(textData[2][2]);
  print(textData[2][1]);
  print(textData[1][2]);
  print(textData[0][1]);
  print(textData[3][0]);
  print(textData[0][1]);
}

📷 実行結果

✅ 練習問題 21-2-4

　読み込んだテキストを一文字ずつ取り出して、色を交互に変えて表示しよう！　　　　　　　　　　　　（自分はflagを立てて、判定を-1,1を使って交互に色を変えたよ）

コード

let textData;
let currentFont;

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

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
  flag = -1;
  for (let i = 0; i <= 4; i++) {
    for (let j = 0; j <= 4; j++) {
      if(flag == -1){
        fill(80, 160, 255);
    }
      else{
        fill(120, 200, 255);
    }
      textFont(currentFont);
      textSize(48);
      textAlign(LEFT, TOP);
      text(textData[i][j], 10 * (j * 5), i * 50);
      flag *= -1;
    }
    flag *= -1;
  }
}

📷 実行結果

最初は必ず青色の文字になるようにしよう！

✅ 練習問題 21-2-5

　行を挟んで、交互に色が変わるようにして市松模様みたいな感じの色の配置にしよう！　　　　　　　　　　　　　　　　　　　　　（flagを使っていて、さっき奇数か偶数で判定して作った人は、少し修正が必要かも…　　　　　　　　　　　　　　　　　　　　　　　　　　　自分みたいに-1か1で判定すると一箇所変えるだけですぐできるかも…）

コード

let textData;
let currentFont;

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

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
  flag = -1;
  for (let i = 0; i <= 4; i++) {
    for (let j = 0; j <= 4; j++) {
      if(flag == -1){
        fill(80, 160, 255);
    }
      else{
        fill(120, 200, 255);
    }
      textFont(currentFont);
      textSize(48);
      textAlign(LEFT, TOP);
      text(textData[i][j], 10 * (j * 5), i * 50);
      flag *= -1;
    }
  }
}

📷 実行結果

今度は全てにおいて交互になるように！

✅ 例題 21-2-6

　さっきまでのプログラムでは、あ行・か行など行ごとに別れていたけれど、これをすべて１行にまとめてみると、キャンバスからはみ出ます。当たり前ですね。（笑）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text.txtの改行を消して実験してみよう！

コード

let textData;
let currentFont;

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

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
  flag = -1;
  for (let j = 0; j <= 24; j++) {
      if(flag == -1){
        fill(80, 160, 255);
      }
      else{
        fill(120, 200, 255);
      }
      textFont(currentFont);
      textSize(48);
      textAlign(LEFT, TOP);
      text(textData[0][j], 10 * (j * 5), 0);
      flag *= -1;
  }
}

📷 実行結果

全然全部写ってないやん！！！

✅ 練習問題 21-2-7

　21-2-6の例題の文章を画面の端で折り返すように表示してみよう！　　　　　　　　　　　　　　　　　　　　　　　　　条件として…　　

・キャンバスサイズと文字のサイズは21-2-6と同じのまま　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

・描画位置を保持するために変数ｘとｙを作って使うこと

・1文字描画する度にｘを４８増やすこと

・画面の右端（x + 48 が width を超える）に達した場合に、x を 0 に戻し、y を 48 増やして次の行に移るようにすること　　　　　　　　　　　　　　

以上のすべての条件を達成して作ること！！！

コード　　　　　　　　　　　　　　

let textData;
let currentFont;

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

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
  flag = -1;
  x = 0;
  y = 0;
  for (let j = 0; j <= 24; j++) {
      if(x + 48 > width){
        x = 0;
        y += 48;
      }
      if(flag == -1){
        fill(80, 160, 255);
      }
      else{
        fill(120, 200, 255);
      }
      textFont(currentFont);
      textSize(48);
      textAlign(LEFT, TOP);
      text(textData[0][j], x, y);
      x += 48;
      flag *= -1;
  }
}

📷 実行結果

✅ 練習問題 21-2-8

　フォントサイズを変更できるようにプログラムを作ろう！（今回はフォントサイズ２０の場合で作るよ）

　文字のサイズは変数fontSizeを作って使うこと

コード

let textData;
let currentFont;

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

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
  flag = -1;
  x = 0;
  y = 0;
  fontSize = 20;
  for (let j = 0; j <= 24; j++) {
      if(x + fontSize > width){
        x = 0;
        y += fontSize;
      }
      if(flag == -1){
        fill(80, 160, 255);
      }
      else{
        fill(120, 200, 255);
      }
      textFont(currentFont);
      textSize(fontSize);
      textAlign(LEFT, TOP);
      text(textData[0][j], x, y);
      x += fontSize;
      flag *= -1;
  }
}

📷 実行結果

まとめ・感想

・基本の時とは違って、あらかじめ文章を用意して文字を表示するよりも、あいうえお表などを作って、一文字ずつ取り出すことで、すぐにいろいろな文章を作ることができたので、これらをゲームのセリフなどでも使うことができると思った。

・ただ文章を表示するだけでなく、一文字一文字の色を判定付きでつけたり画面の端で文章を折り返すように作ることも、これからさまざまなプログラムを作っていくうえできっと役立てることができると思うので、工夫をこらして使っていきたい。

・変数や条件判定などもこれからよく使う要素だと思うので、そういう部分も忘れずに、いつでも使えるようにしていきたいと思った。

コメントする