この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
作品の画像とコード
アニメーション。
let color1, color2;
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
color1 = color(255, 0, 0); // 赤
color2 = color(0, 0, 255); // 青
}
function draw() {
background(200);
// カメラの設定（静止）
camera(
0, 0, 500, // カメラの位置（x, y, z）
0, 0, 0, // カメラが写す画面の中心となる位置（x, y, z）
0, 1, 0 // カメラ自身の向き（x, y, z）
);
// マウス位置に基づいて回転させる
rotateX(map(mouseY, 0, height, -PI, PI));
rotateY(map(mouseX, 0, width, -PI, PI));
// マウス位置に基づいて色を補間する
let set_color = lerpColor(color1, color2, mouseX / width);
// 球体の色を設定
fill(set_color);
stroke(130);
// 球体を描く
sphere(100);
}作った感想
- 3Dで中間色を設定できるのか試した
- マウスの動きに合わせて、色が変わるのは面白い
- シンプルだが、マウス操作と色の変化を楽しめた
- あまりやったことがないインタラクティブ性だったので
ワタタクそれでは今日もレッツワクワクコーディング。