見出し画像

[p5.js習作#1] 螺旋のボールがゴロゴロ回転するアニメーション

ジェネラティブ・アート P.148のProcessingのコードをp5.jsに移植し、全画面表示にアレンジ。
ChatGPTは移植作業が得意です。
以下のリンクからアニメーションを見れます。

https://indepa.net/works/sphere/index.html

アニメーションが始まります。
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座標を更新
  }
}


いいなと思ったら応援しよう!