練習問題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 クラスで受け取った数字を入れておくための、オブジェクトのようなイメージです。