![見出し画像](https://assets.st-note.com/production/uploads/images/101874413/rectangle_large_type_2_376bdebb87a96b17f630203cf4e1a54e.png?width=1200)
[p5.js習作#1] 螺旋のボールがゴロゴロ回転するアニメーション
ジェネラティブ・アート P.148のProcessingのコードをp5.jsに移植し、全画面表示にアレンジ。
ChatGPTは移植作業が得意です。
以下のリンクからアニメーションを見れます。
https://indepa.net/works/sphere/index.html
![](https://assets.st-note.com/img/1680423834222-9NayjRYyJM.png?width=1200)
let radius = 200; // 半径
function setup() {
createCanvas(windowWidth,windowHeight, WEBGL); // キャンバスサイズとレンダラーを指定
radius = windowHeight/3;
background(0);
stroke(255); // 線の色を白に指定
strokeWeight(5); // 線の太さを5に指定
}
function draw() {
background(0);
translate(0,0,0); // 中心に移動
rotateY(frameCount * 0.03); // Y軸周りに回転
rotateX(frameCount * 0.04); // X軸周りに回転
let s = 0; // パラメータs
let t = 0; // パラメータt
let lastx = 0; // 直前のx座標
let lasty = 0; // 直前のy座標
let lastz = 0; // 直前のz座標
while (t < 180) { // tが180未満の間ループ
s += 18; // sを18ずつ増加させる
t += 1; // tを1ずつ増加させる
//console.log(s,t);
let radianS = radians(s); // sをラジアンに変換
let radianT = radians(t); // tをラジアンに変換
let thisx = 0 + (radius * cos(radianS) * sin(radianT)); // x座標を計算
let thisy = 0 + (radius * sin(radianS) * sin(radianT)); // y座標を計算
let thisz = 0 + (radius * cos(radianT)); // z座標を計算
if (lastx != 0) { // 最初の座標でない場合に線を描画
line(thisx, thisy, thisz, lastx, lasty, lastz);
}
lastx = thisx; // 直前のx座標を更新
lasty = thisy; // 直前のy座標を更新
lastz = thisz; // 直前のz座標を更新
}
}