練習問題7-2-1
次のプログラムは、ファイルからデータを読み込み、1月と6月の降水量を表示するものです。
実行して確認を行い、for 文のブロックについて何をしているのか、レポートに書き、先生と話し合いなさい。
let rawData;
let rainfall = [];
function preload() {
rawData = loadStrings("data.csv");
}
function setup() {
createCanvas(300, 300);
background(255);
for (let i = 1; i < rawData.length; i++) {
let row = rawData[i].split(",");
rainfall.push(float(row[1]));
}
fill(0);
textSize(16);
textAlign(LEFT, TOP);
text("データ数: " + rainfall.length, 20, 20);
text("1月: " + rainfall[0] + " mm", 20, 50);
text("6月: " + rainfall[5] + " mm", 20, 80);
}splitというものを習ったかどうかは忘れてしまったのですが、配列になにか作用するものだと思いました。翻訳してみると割るに関することが書かれていました。なので、今回の場合は」「,」で区切っているのだと思いました。
なのでこれを前提にしてこのforの中身を推測すると、「,」のうしろと前をそれぞれ別で配列に入れて、後ろの数字だけをまた別の配列に入れていると思いました。
練習問題7-2-2
練習問題4-3-9 の解答例を雛形として、rainfall 配列の直書きをやめ、data.csv から読み込む形に書き換えなさい。読み込み方は練習問題7-2-1 と同じです。罫線・座標軸・棒グラフの描画はそのまま使えます。
let rainfall=[];
let textData
function preload(){
textData = loadStrings("data.csv")
}
function setup() {
createCanvas(300, 300);
background(255);
let grid = 20;
for(let i=0; i<textData.length; i++){
let data=textData[i].split(",")
rainfall.push(float(data[1]))
}
// グリッド線の描画
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);
}
}
それと動かなかったのでAIに聞き凡ミスを四つほど直しました。
結局また凡ミスです。まったくほんとに何で減らないんですかね？
今日は全く頭が回っている感じがしないのでそれもあるかもしれませんが、それにしても凡ミスが多いような気がします。
それと次の問題を見てから気づいたのですが、変数を別のものに変更してしまいました。ですが問題がないので変えていません。
練習問題7-2-3
練習問題7-2-2 の棒グラフの 下 に、data.csv の 月の列 を読み込んで表示しなさい。
- 月の名前は
months配列に入れる（row[0]をそのままpush） - 棒の下の表示は
months[n]を使う - 文字サイズ … 12
- 文字色 … 黒
- 各月の x 座標は、棒と同じ。y 座標は X 軸線の5px下
let rainfall=[];
let textData;
let months=[];
function preload(){
textData = loadStrings("data.csv")
}
function setup() {
createCanvas(300, 300);
background(255);
let grid = 20;
for(let i=0; i<textData.length; i++){
let data=textData[i].split(",")
if(!isNaN(data[1])){
rainfall.push(float(data[1]))
months.push(data[0])
}
}
// グリッド線の描画
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);
// グラフの描画
textAlign(CENTER, TOP);
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];
stroke(0, 150, 200);
strokeWeight(10);
line(x1, y1, x2, y2);
noStroke()
fill(0)
textSize(12);
text(months[n], x1, height-grid+5)
}
}
それ以外だと、なぜか数字が真ん中にならなということがあり、前の例題でTOPなどが書いてあったのを思い出して、以前LEFTだったところをCENTERに変えたら直りました。
練習問題7-2-4
data.csv の月の列を、次のように 英語の略称 に書き換えてください。
let rainfall=[];
let textData;
let months=[];
function preload(){
textData = loadStrings("data.csv")
}
function setup() {
createCanvas(450, 300);
background(255);
let grid = 30;
for(let i=0; i<textData.length; i++){
let data=textData[i].split(",")
if(!isNaN(data[1])){
rainfall.push(float(data[1]))
months.push(data[0])
}
}
// グリッド線の描画
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);
// グラフの描画
textAlign(CENTER, TOP);
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];
stroke(0, 150, 200);
strokeWeight(10);
line(x1, y1, x2, y2);
noStroke()
fill(0)
textSize(12);
text(months[n], x1, height-grid+5)
}
}