こんにちわ kotaron7です！
夏休みが始まりました。
夏休み中の課題が高校１年生に比べて5,000,000倍くらい増えてます。
課題の多くが下限を指定するもので、最低ノート一冊、上限はなしなので、無限にできちゃいますね。頭よくなっちゃいそうですね。
夏休みの期間が３６日もなければこんなに課題に苦労することなかったのになあ。
うれしいんだけどさあ？
さて、本題に入ります。
惑星の距離データを使って太陽系を作ってみます。
練習問題4-3-1
function setup() {
createCanvas(500, 500);
noFill();
// 太陽から各惑星までの距離をスケールダウンしたもの
let radii = [5, 10, 15, 23, 78, 143, 288, 450];
for (let i = 0; i <= 7; i++)
{
circle(width / 2, width / 2, radii[i]);
}
}リストはこういう法則のない数字の羅列に強いですねえ。
太陽系ができました。
練習問題4-3-2
見事に引っ掛かりました。もしかして万が一…いや億が一でも太陽系の惑星が増えたり減ったりするかもしれませんしね。修正しましょう
function setup() {
createCanvas(500, 500);
noFill();
// 太陽から各惑星までの距離をスケールダウンしたもの
let radii = [5, 10, 15, 23, 78, 143, 288, 450];
for (let i = 0; i <= radii.length -1; i++)
{
circle(width / 2, width / 2, radii[i]);
}
}長さを引っ張ってくることにしました～～。
練習問題4-3-3
惑星を100pxごとに並べてみました。
function setup() {
createCanvas(800, 300);
noFill();
// 惑星のサイズ（直径）
let sizes =[7, 17, 18, 10, 200, 167, 73, 70];
for (let i = 0; i <= sizes.length-1;i++)
{
circle(i*100 + 10,height/2,sizes[i]);
}
}
どれがどの惑星なのかリストならきっと作りやすいですよね。
練習問題4-3-4
これめっちゃ時間かかりました。
circleの座標をめちゃめちゃ半径で指定していると勘違いしたためです。ちゃんと読み直したら惑星が直径で書かれてることに気づきました。
function setup() {
createCanvas(800, 300);
fill(255, 0, 0, 128);
// 惑星のサイズ（直径）
let sizes =[7, 17, 18, 10, 200, 167, 73, 70];
let sum = 0;
for (let i = 0; i <= sizes.length-1;i++)
{
circle(sizes[i]/2+sum,height/2,sizes[i]);
sum = sum + sizes[i];
}
}
作れて本当によかったです。この勘違い何回目？？？？？？？？？
練習問題4-3-5
パレットにある数ごと円を敷き詰めることに成功した。
function setup() {
createCanvas(300, 300);
// 色の配列
let palette = ["#E76F51", "#F4A261", "#E9C46A", "#2A9D8F", "#264653", "#5c374c", "#985277", "#ce6a85"];
// ここにコードを書いてください
for (let i = 0; i <= palette.length-1;i++)
{
fill(palette[i]);
noStroke();
let circleX = width/palette.length;
circle(circleX * i+circleX/2,height/2,circleX);
}
}グラデーションだときれいだよね。次の問題の現代アートが楽しみだな
練習問題4-3-6
現代アートを作ってみゆ
きれいやね。これ、もっと試行回数増やして大きさをもっと小さくしてみると
un。こっちのほうが好きかも。
randomの中にrandomを入れて作ると、最大値のマンネリ化が起きないし、まばらになるからいいね。
function setup() {
createCanvas(600, 400);
background(245); // 背景色
noStroke(); // 枠線なし
// カラーパレット
let palette = ["#264653", "#2A9D8F", "#E9C46A", "#F4A261", "#E76F51"];
// 100個の円を描く
for (let i = 0; i < 150; i++) {
// ここにコードを書いてください
// 1. パレットから色を選ぶ（順番に、あるいはランダムに）
let color = int(random(5));
// 2. ランダムな位置(x, y)とサイズ(d)を決め,円を描く
fill(palette[i%palette.length]);
circle(random(width),random(height),random(1,50+random(50)))
}
}練習問題4-3-8
できる限りgrid使いました～～
function setup() {
createCanvas(300, 250);
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 i = 0; i*grid <= 300;i++)
{
line(i*grid,0,i*grid,height);
line(0,i*grid,width,i*grid);
}
// 座標軸の描画
stroke(0);
strokeWeight(1);
line(grid,0,grid,height);
line(0,height-height%grid,width,height-height%grid)
}
練習問題4-3-9
グラフを作ってみようと思います
できました
function setup() {
createCanvas(300, 250);
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 i = 0; i*grid <= 300;i++)
{
line(i*grid,0,i*grid,height);
line(0,i*grid,width,i*grid);
}
// 座標軸の描画
stroke(0);
strokeWeight(1);
line(grid,0,grid,height);
line(0,height-height%grid,width,height-height%grid)
// グラフの描画
stroke(0, 150, 200);
strokeWeight(10);
for (let u = 0; u <=12; u++)
{
line(40+u*grid,height-height%grid,40+u*grid,height-rainfall[u]-height%grid);
}
}こだわりはy座標の端数を合わせるために％使って余りを出して、その分上にあげたことです。
とっても見やすい！