雑記

04-05 2次元配列2

Posted on by 77curry / 0件のコメント

2026年5月13日

名前

茅野壮甫

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

✅ 練習問題 4-5-1

function setup() {
  createCanvas(100, 100);
  background(220);

  // ドットフォントデータ：0と1の2次元配列（12行×12列）
  let dotData = [
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,1],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,1,0,0,0,0],
    [0,0,0,1,1,0,1,0,1,1,0,0],
    [0,1,1,0,0,0,1,0,0,0,1,1],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,1,0,0,1,0,0,1,0,0],
    [0,0,1,0,0,0,1,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0]
  ];

  // 外側のfor文：行を処理
  for (let i = 0; i < dotData.length; i++) {

    // 内側のfor文：列を処理
    for (let j = 0; j < dotData[i].length; j++) {

      // 値が1の時だけ点を描画
      if (dotData[i][j] === 1) {
        point(j + 10, i + 10);
      }
    }
  }
}

📷 実行結果

✅ 練習問題 4-5-2

function setup() {
  createCanvas(200, 200);
  background(245, 244, 222);

  // ドットフォントデータ：0と1の2次元配列（12行×12列）
  let dotData = [
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,1],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,1,0,0,0,0],
    [0,0,0,1,1,0,1,0,1,1,0,0],
    [0,1,1,0,0,0,1,0,0,0,1,1],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,1,0,0,1,0,0,1,0,0],
    [0,0,1,0,0,0,1,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0]
  ];

  // ここにコードを書いてください
  let cellSize = 10;
  fill(154,173,137) 
  noStroke();
  
    for (let i = 0; i < dotData.length; i++) {

    // 内側のfor文：列を処理
    for (let j = 0; j < dotData[i].length; j++) {

      // 値が1の時だけ点を描画
      if (dotData[i][j] === 1) {
        rect(10+j*10,10+i*10,10);
      }
    }
  }
}

📷 実行結果

✅ 練習問題 4-5-3

function setup() {
  createCanvas(200, 200);
  background(245, 244, 222);

  // ドットフォントデータ：0と1の2次元配列（12行×12列）
  let dotData = [
    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,1,0,0,0,1,0,0,0,1,0],
    [0,0,0,1,0,0,1,0,0,1,0,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,1,1,0,0,0,1,0,0,0,1,1],
    [0,0,0,1,1,0,1,0,1,1,0,0],
    [0,0,0,0,0,1,0,1,0,0,0,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,1],
    [0,0,0,0,1,0,0,0,1,0,0,0]
  ];

  // ここにコードを書いてください
  let cellSize = 10;
  fill(154,173,137) 
  noStroke();
  
    for (let i = 0; i < dotData.length; i++) {

    // 内側のfor文：列を処理
    for (let j = 0; j < dotData[i].length; j++) {

      // 値が1の時だけ点を描画
      if (dotData[i][j] === 1) {
        rect(10+j*10,10+i*10,10);
      }
    }
  }
}

✅ 練習問題 4-5-4

function setup() {
  createCanvas(300,300);
  background(245,244,222);

  // ドットフォントデータ：0と1の2次元配列（12行×12列）
  let dotData = [
    [0,0,0,1,0,0,1,1,1,1,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,1,1,0,1,0,1,1,1,1,1,0],
    [0,0,0,1,0,0,0,0,0,0,1,0],
    [0,0,1,0,1,0,1,1,1,1,1,1],
    [0,1,1,1,0,1,0,0,1,0,0,0],
    [0,0,0,1,0,0,1,0,1,0,0,1],
    [0,1,0,1,1,0,0,1,1,1,1,0],
    [0,1,0,1,0,1,1,0,1,0,1,0],
    [0,1,0,1,0,1,0,0,1,0,0,1],
    [0,0,0,1,0,0,0,1,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,1],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,1,0,0,0,0],
    [0,0,0,1,1,0,1,0,1,1,0,0],
    [0,1,1,0,0,0,1,0,0,0,1,1],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,1,0,0,0,0,0],
    [0,0,0,1,0,0,1,0,0,1,0,0],
    [0,0,1,0,0,0,1,0,0,0,1,0],
  ];

  // ここにコードを書いてください
  let cellSize = 10;
  fill(0,220,150) 
  noStroke();
  
    for (let i = 0; i < dotData.length; i++) {

    // 内側のfor文：列を処理
    for (let j = 0; j < dotData[i].length; j++) {

      // 値が1の時だけ点を描画
      if (dotData[i][j] === 1) {
        ellipse(10+j*10,10+i*10,10);
      }
    }
  }
}

📷 実行結果

まとめ・感想

2次元配列を使うことでマス目を使ったデータや点を打つドット絵などを作ることができる。ドット絵を作るために0を1に変えていくのは結構大変だった。

コメントする