練習問題5-1-1
上の関数化したコードを実行し、第4章の棒グラフと同じ見た目になることを確認しなさい。
私が作ったプログラムと所々違うので、完璧に同じではないかもしれませんが、できるものはほとんど同じでした。
次に、この記事の冒頭にある第4章のコードと見比べ、関数に分けたこと以外に変わった点を探し、先生に報告しなさい。
関数の外に変数があり、どの関数からもアクセスできるようになっている。
練習問題5-1-2
次のコードは、練習問題4-3-9と同じ棒グラフですが、まだ1つの setup にまとまっています。drawGrid と drawAxes の2つの関数を作り、該当する処理を setup から切り出しなさい。
棒グラフの部分は setup に残して構いません。
ヒント：練習問題5-1-1で確認したとおり、drawGrid から grid を使う場合はファイルの先頭で let grid; と宣言し、setup の中で grid = 20; と代入します。
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);
}
練習問題5-1-3
練習問題5-1-2の続きとして、棒グラフを描く処理を drawBarGraph という関数に切り出しなさい。setup からは、3つの関数を順番に呼び出す形にまとめてください。
呼び出しの行末には、「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()//棒グラフを描く関数
// 棒グラフの描画
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);
}
// 棒グラフの描画
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);
}
}多分こういうことであっていると思います。