練習問題8-1-2
例題8-1-1 の star を使って、キャンバスに星を1つ描きましょう。drawStar 関数の ??? を埋めて完成させなさい。
function setup() {
createCanvas(400, 400);
background(18, 24, 60);
noStroke();
let star = {
x: 200,
y: 200,
size: 36,
r: 255,
g: 230,
b: 160
};
drawStar(star);
}
function drawStar(star) {
fill(star.r, star.g, star.b);
ellipse(star.x, star.y, star.size, star.size*0.28);
ellipse(star.x, star.y, star.size*0.28, star.size);
}
なんとなく使い方がわかってきました。
練習問題8-1-3
練習問題8-1-2 を改造し、次の2つの星をオブジェクトで表して描きなさい。
function setup() {
createCanvas(400, 400);
background(18, 24, 60);
noStroke();
let starA = {
x: 100,
y: 120,
size: 40,
r: 180,
g: 220,
b: 255
};
let starB = {
x: 280,
y: 260,
size: 28,
r: 255,
g: 180,
b: 210
}
drawStar(starA)
drawStar(starB);
}
function drawStar(star) {
fill(star.r, star.g, star.b);
ellipse(star.x, star.y, star.size, star.size*0.28);
ellipse(star.x, star.y, star.size*0.28, star.size);
}
なんか少し強引な気がしますが、そんなに変数のように多用するものというより、一つの何かを作るための数字などを持たせておくためのもののような気がするので、多分この使い方であっていると思います。
練習問題8-1-4
次のプログラムでは、星のオブジェクトを作ったあと、いくつかプロパティを書き換えています。
function setup() {
createCanvas(400, 400);
background(18, 24, 60);
noStroke();
let star = {
x: 80,
y: 300,
size: 20,
r: 100,
g: 100,
b: 100
};
// ここにプロパティの書き換えを書く
star.x = 300
star.y = 100
star.size = 50
star.r = 255
star.g = 245
star.b = 210
drawStar(star);
}
function drawStar(star) {
fill(star.r, star.g, star.b);
ellipse(star.x, star.y, star.size, star.size * 0.28);
ellipse(star.x, star.y, star.size * 0.28, star.size);
}
変えられるのはとても便利だと思いましたが、オブジェクトというのはそこまで中身を変更しまくるもののようには思わなかったので、すごく多用するものではないのかなと思いました。
練習問題8-1-5
上のサンプルを改造し、瞬く星を3つ にしなさい。
位置や色は自由で構いません（解答例の値でもよいです）。
練習問題6-4-7 と同じ発想で、星ごとに offset を変えて、明滅のタイミングをずらしてみましょう。
let starA;
function setup() {
createCanvas(400, 400);
starA = {
x: 50,
y: 200,
size: 40,
r: 20,
g: 230,
b: 160,
offset: 0, // 明滅のタイミングのずれ
scale: 1 // いまの拡大率（blinkStar が更新する）
};
starB = {
x: 302,
y: 278,
size: 60,
r: 255,
g: 40,
b: 100,
offset: 1,
scale: 1
}
starC = {
x: 200,
y: 356,
size: 25,
r: 0,
g: 40,
b: 255,
offset: 5,
scale: 2
}
}
function draw() {
background(18, 24, 60);
noStroke();
blinkStar(starA); // 外の関数で状態を更新
drawStar(starA); // 外の関数で描画
blinkStar(starB);
drawStar(starB);
blinkStar(starC);
drawStar(starC);
}
function blinkStar(star) {
// 06-04 と同じく、frameCount で大小を切り替える
if ((frameCount + star.offset) % 60 < 30) {
star.scale = 0.8; // 小さい
} else {
star.scale = 1; // 基準サイズ
}
}
function drawStar(star) {
fill(star.r, star.g, star.b);
let s = star.size * star.scale;
ellipse(star.x, star.y, s, s * 0.28);
ellipse(star.x, star.y, s * 0.28, s);
}
増やすのがなかなかに面倒くさかったですが、手ごたえもありました。