Zenn
Closed4

つぶやきprocessing - 解剖

p5.js
暁の流星暁の流星

とりあえずコードを見やすくする

twitterのやつ
t=0
draw=_=>{
  t++||createCanvas(W=600,W,WEBGL)
  lights(background(W))
  T=translate
  X=rotateX
  Z=rotateZ
  rotateY(Q=PI/2)
  Z(.9)
  for(j=26;j--;pop()){
    for(push(u=t/60%2)+T(0,98*(u-j+3))+X(j%2?0:2*Q),i=6;i--;T(0,49)){
      box(1,97)+X(i%2?-Q:Q)+T(0,49)+Z(map(i-u+j,7,8,Q,0,1))
    }
  }
}
見やすくしたやつ
t=0
draw=_=>{
  t++||createCanvas(W=600,W,WEBGL)
  lights(background(W))
  rotateY(Q=PI/2)
  rotateZ(.9)
  for(j=0;j<26;j++){
    push(u=t/60%2)
    translate(0,98*(u-j+3))
    rotateX(j%2?0:2*Q)
    for(i=5;i>=0;i--){
      box(1,97)
      rotateX(i%2?-Q:Q)
      translate(0,49)
      rotateZ(map(i-u+j,7,8,Q,0,1))
      translate(0,49)
    }
    pop()
  }
}
暁の流星暁の流星

見やすさ整え

t=0
draw=_=>{
  t++||createCanvas(W=600,W,WEBGL)
  lights(background(W))
  translate(100,-100)
  Q=PI/2
  rotateY(Q)
  u=t/60%5
  for(i=5;i>=0;i--){
    box(1,97)
    rotateX(i%2?-Q:Q)
    translate(0,49)
    rotateZ(map(i-u,0,1,Q,0,1))
    translate(0,49)
  }
}
暁の流星暁の流星

box設置(box)→向き変更(rotateX)→回転軸移動(translate)→回転(rotateZ)→translate(移動)

このスクラップは2023/01/03にクローズされました