雑記

05-02 引数

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

練習問題5-2-1

上の解説のサンプルを元に、drawStar の呼び出しを2つ追加して、星を全部で7つにしなさい。
追加する星の位置は、空いているところに自由に決めて構いません。

function setup() {
  createCanvas(400, 400);
  background(18, 24, 60);
  noStroke();

  drawStar(80, 90);
  drawStar(230, 70);
  drawStar(320, 150);
  drawStar(130, 230);
  drawStar(280, 300);
  drawStar(200, 200)
  drawStar(50, 340)
}

function drawStar(x, y) {
  fill(255, 230, 160);
  ellipse(x, y, 36, 10);
  ellipse(x, y, 10, 36);
}
もっと前に理解しておくべきだったのでしょうが、セットアップに関数を入れると、その関数を持っているところが動くということに、この課題をやっている時に気づきました。

練習問題5-2-2

練習問題5-2-1の drawStar に、大きさの引数 w と h を追加しなさい。
横長の楕円の幅・高さを w, h とし、もう1つの楕円では h, w の順で使います。
完成例のとおり、星ごとに大きさを変えて5つ描きなさい（色はまだ関数の中で固定で構いません）。

function setup() {
  createCanvas(400, 400);
  background(18, 24, 60);
  noStroke();

  drawStar(80, 90, 72, 20);
  drawStar(230, 70, 36, 10);
  drawStar(320, 150, 15, 4);
  drawStar(130, 230, 42, 14);
  drawStar(280, 300, 24, 8);
}

function drawStar(x, y, w, h) {
  fill(255, 230, 160);
  ellipse(x, y, w, h);
  ellipse(x, y, h, w);
}

練習問題5-2-3

練習問題5-2-2の drawStar に、色の引数 r, g, b を追加しなさい。
fill には、渡された3つの値を使います。
完成例のとおり、星ごとに色も変えて5つ描きなさい。

function setup() {
  createCanvas(400, 400);
  background(18, 24, 60);
  noStroke();

  drawStar(80, 90, 72, 20, 255, 80, 80);
  drawStar(230, 70, 36, 10, 250, 250, 250);
  drawStar(320, 150, 15, 4, 255, 200, 100);
  drawStar(130, 230, 42, 14, 100, 255, 255);
  drawStar(280, 300, 24, 8, 100, 255, 100);
}

function drawStar(x, y, w, h, r, g, b) {
  fill(r, g, b);
  ellipse(x, y, w, h);
  ellipse(x, y, h, w);
}
元の色に似せるのは、なかなか困難を極めそうだったので、自分で色を考えましたが、選ぶのがなかなか大変でした。

コメントする