学習日
2025年7月22日
名前
樋口桜大
立方体のトーラス（円環面）[torus]を使って作る！
自分で作った図形（コードと画像）
✅ 例題 4-6-1
2つのトーラスを90度の角度で交差させ、鎖のように配置しよう！
コード
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(220)
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(60, 20);
translate(60, 0);
rotateX(PI/2);
torus(60, 20);
}📷 実行結果
✅ 練習問題 4-6-1
2つのトーラスを、それぞれ独立して回転させてみよう。push() と pop() を使って、回転の影響を個別に分けるようにする。
たとえば…⇓
- 1つ目のトーラス：ゆっくり回転（
frameCount * 0.01） - 2つ目のトーラス：速く逆方向に回転（
-frameCount * 0.02）
translate() を使って、2つを少し離して配置しよう。
用語の内容
push…「ここからはこの図形に対してだけ、命令を通しますよ」という意味。 pop…‥「この命令を止めて、もとに戻しますよ」という意味。
コード
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(220);
//１つ目の図形
push();
translate(0, 0);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(60, 20);
pop();
//２つ目の図形
push();
translate(60, 0);
rotateX(PI/2);
rotateX(-frameCount * 0.02);
torus(60, 20);
pop();
}📷 実行結果
まとめ・感想
・pushとpopの命令の意味をしっかりと理解することで、一つ一つの図形を描くことが大切なんだと思った。
・3D描画で使った「変速」の命令を使って、トーラスの図形を様々に表せたのが面白かった。
・次はトーラスに色を付けてみたいと思った！