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

05-01 関数の基本 8/20

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

第５章に入りました。kotaron7です。

スマホに縛られずに勉強している人たちすごいなって思います。自制心？向上心？なにが働いてるのかわかりませんが、ちょっとくらい分けてくれてもいいのに(# ﾟДﾟ)と思いますよね。

でもスマホを「手の届かない場所」に置くだけで勉強に集中できるようになるそうです。
僕もやったことあるんですけど、スマホのことを忘れて没頭できます。調べたいこととかは紙に書いておくらしいです。
これだけならそうすればいいじゃんって思いますよね。でもそうしたら勉強が少なくとも二時間強制されるってわかってるので簡単に覚悟決められないんですよ～。言い訳ですけどね。今日の夜はその作戦を実行します。夏休みがもう終わるのに生活習慣がどぶです。どぶかすすぎる…..！！！

さて、本編です。

練習問題5-1-2

関数を自分で作って見やすくしてみようとのことです。使用するのは4章で作った雨量図です

function setup() {
  createCanvas(300, 300);
  background(255);

  let rainfall = [13.0, 9.5, 86.0, 38.0, 137.0, 215.5, 163.0, 78.5, 119.5, 130.5, 25.0, 36.0];
  let grid = 20;

  // グリッド線の描画
  stroke(200);
  strokeWeight(1);
  for (let x = 0; x <= width; x += grid) {
    line(x, 0, x, height);
  }
  for (let y = 0; y <= height; y += grid) {
    line(0, y, width, y);
  }

  // 座標軸の描画
  stroke(0);
  strokeWeight(1);
  line(grid, 0, grid, height - grid);
  line(grid, height - grid, width, height - grid);

  // 棒グラフの描画
  stroke(0, 150, 200);
  strokeWeight(10);
  for (let n = 0; n < rainfall.length; n++) {
    let x1 = n * grid + (grid * 2);
    let y1 = height - grid;
    let x2 = x1;
    let y2 = y1 - rainfall[n];
    line(x1, y1, x2, y2);
  }
}

このプログラム、じっくり見ればやってることわかりますよね。でもぱっと見だとグリッド、座標軸、棒グラフ、なにをどの順で書いているのか？わかりません。

これを関数を使って書くとこうなります。


let rainfall = [13.0, 9.5, 86.0, 38.0, 137.0, 215.5, 163.0, 78.5, 119.5, 130.5, 25.0, 36.0];
let grid = 20;

function setup() 
{
  createCanvas(300, 300);
  background(255);
  
  drawGrid ();
  drawAxes();
  // 棒グラフの描画
  stroke(0, 150, 200);
  strokeWeight(10);
  for (let n = 0; n < rainfall.length; n++) 
  {
    let x1 = n * grid + (grid * 2);
    let y1 = height - grid;
    let x2 = x1;
    let y2 = y1 - rainfall[n];
    line(x1, y1, x2, y2);
  }
}

function drawGrid()
{
  // グリッド線の描画
  stroke(200);
  strokeWeight(1);
  for (let x = 0; x <= width; x += grid) 
  {
    line(x, 0, x, height);
  }
  for (let y = 0; y <= height; y += grid)
  {
    line(0, y, width, y);
  }
}

function drawAxes()
{
  // 座標軸の描画
  stroke(0);
  strokeWeight(1);
  line(grid, 0, grid, height - grid);
  line(grid, height - grid, width, height - grid);
}

どうですか？setupの外に出してやるだけでどの順でやられているのか明確になり、さらにその関数名を検索すればその中でなんの処理が行われているかもばっちりわかります。

練習問題5-1-3

棒グラフもまとめて日本語で説明をいれます。


let rainfall = [13.0, 9.5, 86.0, 38.0, 137.0, 215.5, 163.0, 78.5, 119.5, 130.5, 25.0, 36.0];
let grid = 20;

function setup() 
{
  createCanvas(300, 300);
  background(255);
  
  drawGrid (); //グリッド線の描画
  drawAxes(); //座標軸の描画
  drawBarGraph(); //棒グラフの描画
  
}

function drawGrid()
{
  // グリッド線の描画
  stroke(200);
  strokeWeight(1);
  for (let x = 0; x <= width; x += grid) 
  {
    line(x, 0, x, height);
  }
  for (let y = 0; y <= height; y += grid)
  {
    line(0, y, width, y);
  }
}

function drawAxes()
{
  // 座標軸の描画
  stroke(0);
  strokeWeight(1);
  line(grid, 0, grid, height - grid);
  line(grid, height - grid, width, height - grid);
}

function drawBarGraph()
{
  // 棒グラフの描画
  stroke(0, 150, 200);
  strokeWeight(10);
  for (let n = 0; n < rainfall.length; n++) 
  {
    let x1 = n * grid + (grid * 2);
    let y1 = height - grid;
    let x2 = x1;
    let y2 = y1 - rainfall[n];
    line(x1, y1, x2, y2);
  }
}

とってもわかりやすくなりました。関数使ってるとバグの出どころもわかりやすくてすげえいいですよね～～！

コメントする