学習日
2025年8月5日
名前
樋口桜大
自分で作った図形（コードと画像）
✅ 例題 4-7-1
ｘ軸（横）方向に移動する画面の左右端で跳ね返してみよう。
コード
let x = 100, y = 0, z = 0;
let dx = 10, dy = 10, dz = 10; // 移動量
function setup() {
createCanvas(400, 400, WEBGL);
frameRate(10);
}
function draw() {
background(200);
rotateX(frameCount * 0.01);
translate(x, y, z);
sphere(40);
x += dx;
if ( x< -160 || 160 < x) // 跳ね返す
dx = -dx;
}📷 実行結果
✅ 練習問題 4-7-1
球体（sphere）を、Y方向に上下に動かしてみよう。
一番上または下まで動いたら、跳ね返るようにします。translate() で位置をずらし、dy を使って上下の移動を制御する。
回転も入れて、立体的に動いているように見せよう。
コード
let x = 0, y = 0, z = 0;
let dx = 10, dy = 10, dz = 10; // 移動量
function setup() {
createCanvas(400, 400, WEBGL);
frameRate(10);
}
function draw() {
background(200);
rotateY(frameCount * 0.01);
translate(x, y, z);
sphere(40);
y += dy;
if ( y< -160 || 160 < y) // 跳ね返す
dy = -dy;
}📷 実行結果
✅ 練習問題 4-7-2
球体を、X・Y・Zのすべての方向に動かしてみよう。
それぞれの方向で、端（−160 または +160）に到達したら、跳ね返るようにする。
translate() を使って球体の位置を3D空間で動かし、dx, dy, dz を使って速度をコントロールする。
球体は回転させて立体的に見せる。
コード
let x = 100, y = 0, z = 0;
let dx = 10, dy = 10, dz = 10; // 移動量
function setup() {
createCanvas(400, 400, WEBGL);
frameRate(10);
}
function draw() {
background(200);
translate(x, y, z);
sphere(40);
rotateX(frameCount * 0.01);
x += dx;
if ( x< -180 || 180 < x) // 跳ね返す
dx = -dx;
rotateY(frameCount * 0.01);
y += dy;
if ( y< -180 || 160 < y) // 跳ね返す
dy = -dy;
rotateZ(frameCount * 0.01);
z += dz;
if ( z< -160 || 160 < z) // 跳ね返す
dz = -dz;
}📷 実行結果
まとめ・感想
・dxやdyなどを使うときに、この文字がどの数字を表しているかを理解したうえで考えるのがとても大切だと思った。
・最初の例題から一文一文の意味を理解して、最後に作品を見るときにどの動作と一致しているかをしっかりと確かめるところが少し難しくて時間がかかった。
・最初に文字の数を決めるときの変化もしっかりと変えることを忘れずに！