学習日
2025年10月21日
名前
河西恵太
練習問題4-6-1
2つのトーラスを、それぞれ独立して回転させなさい。push() と pop() を使って、回転の影響を個別に分けるようにする。
たとえば：
- 1つ目のトーラス：ゆっくり回転（
frameCount * 0.01） - 2つ目のトーラス：速く逆方向に回転（
-frameCount * 0.02）
translate() を使って、2つを少し離して配置しよう。
push() / pop() の使い方サンプル
2つの箱（box）を表示し、それぞれを別々に回転させるサンプルです。push() と pop() を使うことで、1つ目の回転が2つ目に影響しないようにしています。
サンプルコード
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(220);
// 左の箱
push(); // ← ここからこの図形だけの変形が始まる
translate(-100, 0);
rotateY(frameCount * 0.01);
box(50);
pop(); // ← ここで変形をリセット
// 右の箱
push(); // ← もう1つの図形も独立して変形できる
translate(100, 0);
rotateX(frameCount * 0.01);
box(50);
pop(); // ← リセット
}ポイント解説（コメント付きで教えるときに便利！）
push()は「ここから1つの図形だけに変形や回転をかけますよ」の合図pop()は「変形の影響をここで止めて元に戻すよ」というリセットtranslate()やrotateX/Y/Z()を複数使うとき、図形ごとに囲むと干渉せずに済む
回答
function setup() {
createCanvas(1000, 1000);
background(220);
const RADIAN = Math.PI / 180;
for (let xx = 0; xx <= 4; xx += 1) {
for (let yy = 0; yy <= 4; yy += 1) {
for (let a = 0; a <= 360; a += 2) {
x = 100+xx*110*Math.sin(RADIAN * xx * a) + 200;
y = 200 - 100+yy*110*Math.sin(RADIAN * yy * a)
if (a == 0)
setpoint(x, y);
else
moveto(x, y);
}
}
}
}感想
変えるべき数字をしっかり見極めてから変えるのと先に問題の答えを考えてからプログラムを書き始める
時間がかかってしまったのは、その数字を変えるとどうなるかがわからず一つ一つ試していたことだと思います