雑記

２１－０２　ファイルの読み込み（応用）　

Posted on by ichigo-pink / 0件のコメント

学習日

２月２４日 / ３月 ３日 / ３月１０日　　火曜日

名前

中村　結

✅練習問題２１－２－１

行ごとに色を交互に変えるようにしなさい。

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);
  textAlign(LEFT, TOP);
  for (let i = 0; i <= 4; i+=1){
    if(i%2){
      fill(120, 200, 255);
      text(textData[i], 10, 10+48*i);
    }
    else{
      fill(80, 160, 255);
      text(textData[i], 10, 10+48*i);
    }
  }
}

📷 結果

✅練習問題２１－２－３

例題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]);
}

✅練習問題２１－２－４

読み込んだテキストを一文字ずつ取り出し、色を交互に変えて表示してみましょう。

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);
  textAlign(LEFT, TOP);
  fill(80, 160, 255);
  for (let i = 0; i <= 4; i+=1){
    for (let j = 0; j <= 4; j+=1){
      if (i%2) {
        fill(80, 160, 255);
        text(textData[i][j],10+48*i,10+48*j);
      }
      else {
        fill(120, 200, 255);
        text(textData[i][j],10+48*i,10+48*j);
      }
   }
   }
 }

📷 結果

✅練習問題２１－２－５

行を跨いで交互になるようにしましょう。

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);
  textAlign(LEFT, TOP);
  fill(80, 160, 255);
  for (let i = 0; i <= 4; i+=1){
    for (let j = 0; j <= 4; j+=1){
      if (i%2) {
          fill(80, 160, 255);
          text(textData[i][j],10+48*i,10+48*j);
        if (j%2) {
          fill(120, 200, 255);
          text(textData[i][j],10+48*i,10+48*j);
        }
        else {
        }
      }
      else {
        if(j%2){
          fill(80, 160, 255);
          text(textData[i][j],10+48*i,10+48*j);
        }
        else{
          fill(120, 200, 255);
          text(textData[i][j],10+48*i,10+48*j);
        }
      }
   }
   }
 }

📷 結果

✅練習問題２１－２－７

画面端で折り返すようにしましょう

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);  
  let x = 0;
  let y = 10;
  // テキストを描画
  textSize(48);
  textAlign(LEFT, TOP); 
  for (let i = 0; i <= 24; i+=1){
      if (i%2) {
        fill(80, 160, 255);
        text(textData[i],x,y);
      }
      else {
        fill(120, 200, 255);
        text(textData[i],x,y);
      }
    x+=48;
  if(x+48>width){
      x=0;
      y+=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);  
  let x = 0;
  let y = 10;
  let fontSize = 20;
  // テキストを描画
  textSize(fontSize);
  textAlign(LEFT, TOP); 
  for (let i = 0; i <= 24; i+=1){
      if (i%2) {
        fill(80, 160, 255);
        text(textData[i],x,y);
      }
      else {
        fill(120, 200, 255);
        text(textData[i],x,y);
      }
    x+=fontSize;
  if(x+fontSize>width){
      x=0;
      y+=fontSize;
      }
  }
}

📷 結果

コメントする