08-02 クラスの基本

練習問題8-2-2

例題8-2-1 を改造し、次の位置・色の星を new Star(…) でつくって表示しなさい。

位置：(100, 150)
大きさ：size = 40
色：(180, 220, 255)

let star;

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

  // 設計図から実物をつくる
  star = new Star(100, 150, 40, 180, 220, 255);
  star.display();
}

class Star {
  // new されたときの初期化（最初の位置・色などをセットする）
  constructor(x, y, size, r, g, b) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.r = r;
    this.g = g;
    this.b = b;
  }

  // この星を描く
  display() {
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, this.size, this.size * 0.28);
    ellipse(this.x, this.y, this.size * 0.28, this.size);
  }
}

とても便利だと思いました。

練習問題8-2-3

Star クラスを使い、次の2つの星を描きなさい。

let star;

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

  // 設計図から実物をつくる
  starA = new Star(100, 120, 40, 180, 220, 255);
  starB =new Star(280, 260, 28, 255, 180, 210)
  starA.display();
  starB.display();
}

class Star {
  // new されたときの初期化（最初の位置・色などをセットする）
  constructor(x, y, size, r, g, b) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.r = r;
    this.g = g;
    this.b = b;
  }

  // この星を描く
  display() {
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, this.size, this.size * 0.28);
    ellipse(this.x, this.y, this.size * 0.28, this.size);
  }
}

とても見やすくすることができて、楽しいです。

練習問題8-2-5

例題8-2-4 を改造し、2つの星 がそれぞれ瞬くようにしなさい。
位置と色は自由で構いません（解答例の値でもよいです）。
片方の星だけ offset を変えて、明滅のタイミングをずらしてみましょう。

let star;

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

  // 設計図から実物をつくる
  starA = new Star(100, 120, 40, 180, 220, 255, 0, 1);
  starB =new Star(280, 260, 28, 255, 180, 210, 20, 1)
}

function draw(){
  background(18, 24, 60);
  starA.display();
  starB.display();
  starA.blink();
  starB.blink();
}
  class Star {
    // new されたときの初期化（最初の位置・色などをセットする）
    constructor(x, y, size, r, g, b, offset, scale) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.r = r;
    this.g = g;
    this.b = b;
    this.offset = offset;
    this.scale = 1
  }

  blink() {
    if ((frameCount + this.offset) % 60 < 30) {
      this.scale = 0.8;
    } else {
      this.scale = 1;
  }
}

// この星を描く
  display() {
    fill(this.r, this.g, this.b);
    let s = this.size * this.scale;
    ellipse(this.x, this.y, s, s * 0.28);
    ellipse(this.x, this.y, s * 0.28, s);
  }
}

結構難しかったです。特に、それぞれの星の設定をもう一度替えるのが面倒くさかったので、前自分で作った方を改造したのですが、displayの中身がよくわからずチャットgptに聞いてしまいました。それでも、今回の課題は大体理解しました。

練習問題8-2-6

例題8-2-4 の Star に、次の displayRotated メソッドを追加しなさい。
setup では angleMode(DEGREES) も書いておきます（07-04 と同じです）。

display では (this.x, this.y) に描いていましたが、ここでは translate で原点を星の位置に移し、(0, 0) に描きます。こうすると、その場で回転します。

draw の中では、次の順で呼び出します（いつもどおりの display の代わりに displayRotated を使います）。

let star;

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
  noStroke();
  star = new Star(200, 200, 40, 255, 230, 160);
}

function draw() {
  background(18, 24, 60);

  star.blink();
  star.displayRotated();
}

class Star {
  constructor(x, y, size, r, g, b) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.r = r;
    this.g = g;
    this.b = b;
    this.offset = 0;
    this.scale = 1;
  }

  blink() {
    if ((frameCount + this.offset) % 60 < 30) {
      this.scale = 0.8;
    } else {
      this.scale = 1;
    }
  }

  displayRotated() {
    fill(this.r, this.g, this.b);
    let s = this.size * this.scale;
    push()
    translate(width/2, height/2)
    rotate(frameCount%360)
    ellipse(0, 0, s, s * 0.28);
    ellipse(0, 0, s * 0.28, s);
    pop()
  }
}

回る速度が少し違うような気もしますけど、変えたければframeCountに2とかかければ位いと思うので、これでいいと思います。

練習問題8-2-7

練習問題8-2-6 のプログラムを 別ファイル版 に書きかえ、動きが同じか確認しなさい。

動きは同じでしたが、知らないことが急にたくさん出てきました。
プログラムを作るうえで、今までいじってきたものの更に根幹を、操作することで、ファイルを読み込んでいました。仕組みは聞けばわかりそうでしたが、知らない文字列が複数出てきたので、頭に入り切りません。とりあえず、ファイルを読み込む方法は、一応頭に入ったと思います。

練習問題8-2-8

次の問いについて、自分の言葉で説明しなさい。答えはレポートに書き、先生と話し合いなさい。

Q　クラスとオブジェクトの違いは何ですか？
A　クラスはオブジェクトを作る型という感じらしいです。私はこう解釈しました。
Q　08-01 の drawStar(star) と、08-02 の star.display() は、呼び方として何が違いますか？
A　drawStar(star)は、オブジェクトの数字を関数で使っていましたが、star.display()はstarの中のdisplayを呼び出しているイメージです。
Q　this.x の this は、ざっくり言うと何を指していますか？
A　クラスで受け取った数字を入れておくための、オブジェクトのようなイメージです。