雑記

04-05 2次元配列2

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

練習問題4-5-2

例題4-5-1では点で描画しましたが、今度は四角（rect）で描画してみましょう。

例題4-5-1と同様にネストしたfor文を使い、ドットフォントデータの全要素を処理してください。値が1の時だけ四角を描画し、値が0の時は何も描画しないように、if文で条件分岐してください。

また、ドットを表す四角のサイズは cellSize として宣言された値を使用し、塗りつぶしの色は (154, 173, 137) とすること。

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]
  ];
  noStroke()
  fill(154, 173, 137)
  let cellSize = 10;
  for(let i=0; i<dotData.length; i++){
    for(let j=0; j<dotData[i].length; j++){
      if(dotData[i][j]==1){
        rect(cellSize+j*cellSize, cellSize+i*cellSize, cellSize)
      }
    }
  }
    
}
結構頭使うので、いつかミスりそうです。
それと、例題の方ではif文で===1と書いてありましたが意味があるのでしょうか？

練習問題4-5-3

練習問題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]
  ];
  noStroke()
  fill(154, 173, 137)
  let f=0
  let a=0
  let cellSize = 10;
  for(let i=dotData.length-1; i>=0; i--){
    a++
    for(let j=dotData[i].length-1; j>=0; j--){
      f++
      if(dotData[i][j]==1){
        rect(cellSize+f*cellSize, cellSize+a*cellSize, cellSize)
        if(i==0&&j==0){
          break
        }
      }
    }
    f=0
  }    
}
なんか私のやり方がおかしいのかわかりませんが、ものすごく大変でした。何とか自分で作れましたが、本当にこれであっているのかわかりません。正直自分でも、これを事細かに説明するのは難しいと思います。うまくいかないところを、そのたびに修正しただけなので、自分でも全体がどうなっているかあまり理解していません。でもやっていけばわかるようになるのでしょう

練習問題4-5-4

例題4-5-1と練習問題4-5-2では点や四角で描画しましたが、今度は丸（ellipse）で描画してみましょう。サンプルを参考に自由に作ってみましょう。

function setup(){
  createCanvas(200, 400)
  background(0)
  let Pt = [
    [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,1,1,1,1,1,1,1,1,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,0,1,0,0,0,0,0,0,0,1,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,1,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,1,0,0,0,0,0],
    [0,0,0,0,0,1,0,1,0,0,0,0],
    [0,0,0,0,1,0,0,0,1,0,0,0],
    [0,0,0,1,0,0,0,0,0,1,0,0],
    [0,1,1,0,1,1,1,1,1,0,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,0],
    [0,0,0,1,0,0,1,0,0,1,0,0],
    [0,0,0,0,1,0,1,0,0,1,0,0],
    [0,0,0,0,1,0,1,0,1,0,0,0],
    [0,0,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0]
  ] 
  
  let diameter=10
  //丸の描画
  for(let i=0; i<Pt.length; i++){
    for(let j=0; j<Pt[i].length;j++){
      if(Pt[i][j]==1){
        circle(10+diameter/2+diameter*j, 10+diameter/2+diameter*i, diameter)
      }
    }
  }
}
なんか、これでいいのかよく分かりませんが、とりあえず作りました。
そんなことよりも、文字を作るプログラムを少し見てみましたが何が書いてあるかよくわからなかったです。そっちが衝撃的過ぎて、文字作るときは放心状態だったといっても過言じゃないよう
な状態でした。
作品については、色も変えようか迷ったのですが、白と黒で作りたかったので、グラデーションかけると、どこかで見えなくなってしまうからやめておきました。または背景を逆からグラデーションをかけるというのも考えましたが、前それをlineでやったら、目がちかちかしたので、やめておきました。

コメントする