p5.js/p5.jsドリル/雑記

04-05 2次元配列2 08/06

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

こんにちはkotaron7です。

いよいよ4章が終わりそうです。
I can’t help to ~~構文に最近ハマってます。～～するのを助けられないと直訳できますが、～～せずにはいられないという意味になります。言いやすいので使ってみてくださいね。

さて、数学ですが、80pが終わりました。なかなか進めてると思いませんか？ところがどっこい全体でみると半分も進んでいません。驚きを隠せませんよ…

はい。本編に行きます。

練習問題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;
  noStroke();
  for (let i = 0; i < dotData.length; i++) 
  {
    for (let j = 0; j < dotData[i].length; j++) 
    {
      if (dotData[i][j] === 1)
      {
        fill(154, 173, 137);
        rect(j*10 + 10, i*10 + 10,cellSize,cellSize);
      }
    }
  }
}

できました

練習問題4-5-3

さっき作った茶のドット絵を上下反転してみます。

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;
  noStroke();
  for (let i = 0; i < dotData.length; i++) 
  {
    for (let j = 0; j < dotData[i].length; j++) 
    {
      if (dotData[i][j] === 1)
      {
        fill(154, 173, 137);
        rect(j*10 + 10, (dotData.length-1-i)*10 + 10,cellSize,cellSize);
      }
    }
  }
}

反転しましたo(*°▽°*)o

練習問題4-5-4

丸にしてみた。

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

  // ドットフォントデータ：0と1の2次元配列
  let dotData = [
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,1,0,0,0,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,0,0,1,0,0,0,0,1,0],
    [0,1,0,1,0,1,0,1,0,0,1,0],
    [0,1,0,0,1,1,0,0,1,0,1,0],
    [0,1,0,0,0,1,0,0,0,0,1,0],
    [0,1,0,1,0,1,0,1,0,0,1,0],
    [0,1,0,0,1,1,0,0,1,0,1,0],
    [0,1,0,0,0,1,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0], // 雨終わり

    [0,0,0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,1,1,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0,0,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,1,0,1,0,0,1,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,1,0,1,0,0,1,0,0,0],
    [0,0,0,1,1,1,1,1,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,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0], // 垂終わり

    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,1,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,1,0],
    [0,0,0,1,1,0,0,0,0,0,1,0],
    [0,1,1,0,1,0,0,0,0,0,1,0],
    [0,0,0,0,1,0,0,0,0,0,1,0],
    [0,0,0,0,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,0,0,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0],// 石終わり
    
    [0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,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,1,0],
    [0,1,0,0,1,0,0,1,0,0,1,0],
    [0,0,0,1,1,0,0,1,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,0,0,1,0,1,1,0,0,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,1,0,0,1,0,0,0],
    [0,0,0,1,1,0,0,1,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0]
  ];

  let cellSize = 10;
  noStroke();

  for (let i = 0; i < dotData.length; i++) {

    // 12行ごとにグラデーションをリセット
    let shade = (i % 12) * 6;

    fill(62 + shade,104 + shade,123 + shade);

    for (let j = 0; j < dotData[i].length; j++)
    {
      if (dotData[i][j] === 1) 
      {
        circle(j * 10 + 10, i * 10 + 10, cellSize);
      }
    }
  }
}

疲れました。疲れました非常に。お疲れ様ですஇ௰இ

コメントする