つぶやきProcessing ellipsoid()活用術

こんにちは、AQUARING かに です。
今回は最近つぶやきProcessingでよくやっている、ellipsoid() （楕円体）を使った表現テクニックを紹介します。
調整できるパラメーターが多いため、ellipsoid() だけもでいろんな形状が作れます。そのため複数の関数を使わなくて済むのでつぶやきProcessingにおいては文字数削減にもなります。

ellipsoid() の書き方

ellipsoid(
  [radiusx],// X方向の半径
  [radiusy],// Y方向の半径
  [radiusz],// Z方向の半径
  [detailX],// X方向の分割数
  [detailY] // Y方向の分割数
)

基本的には sphere() （球体）と同じく半径とXY方向の分割数を指定しますが、ellipsoid() の場合はXYZ各方向に対しての半径の大きさをそれぞれ指定することができます。

ellipsoid(100);
radiusx のみ指定すると球体に。

ellipsoid(50, 100, 150);
radiusx,y,z それぞれ指定するとこんな歪（いびつ）な形にも。

ellipsoid(50, 100, 50, 4, 2);
detailx,y を小さくするとカクカクに。

作例

分割数の変更

t=0
draw=_=>{t||createCanvas(W=800,W,WEBGL)
background`#つぶやきProcessing`
lights(stroke``)
for(j=6;j-->0;){for(N=i=9*j;i--;){push(fill(0,W,j*50))
r=W/7*j-9
translate(cos(a=i*TAU/N+(j%2?t:-t))*r,sin(a)*r)
rotate(a+PI/2)
rotateY(-t*4)
pop(ellipsoid(30,60,30,4,j+1))}}t+=.002} pic.twitter.com/sWy8UA35oZ

— // wat 🦀 (@watabo_shi) July 19, 2022

中心から外に向かうにつれて radiusy を大きくしています。
宝石みたいでかわいいですね。

ellipsoid() の組み合わせで3Dの星

t=0
draw=_=>{t++||createCanvas(W=800,W,WEBGL)
X=rotateX
Y=rotateY
box(W*3)
X(-.4)
Y(y=-t/99)
stroke`#つぶやきProcessing`
E=_=>ellipsoid(20,99,20,4,2)
pointLight(W,W,9,0,sin(y)*W,0)
ambientLight(99,99,9)
for(i=9;i--;)push(Y(.7)),E(translate(W/3,0)),E(rotate(r=PI/2)),pop(E(X(r)))} pic.twitter.com/SVDxZumzFL

— // wat 🦀 (@watabo_shi) July 20, 2022

カクカクの ellipsoid() をXYZ軸方向に回転させて星形を作っています。

球体とカクカクの組み合わせ

t=0
draw=_=>{t||createCanvas(W=800,W,WEBGL)
E=ellipsoid
background(0)
for(i=90;i--;){J=~~(i/10),push(r=i%2?300:366)
translate(cos(a=i%10*PI/5+(J+1)*t/4)*r,sin(a)*r,-J*99)
rotate(a)
rotateY(a+t)
i%2?stroke(0):noStroke`#つぶやきProcessing`
pop(i%2?E(34,190-J*9,9,4,2):E(9))}
t+=.01} pic.twitter.com/uhRdLe3ETY

— // wat 🦀 (@watabo_shi) July 27, 2022

ellipsoid() のパラメーター違いで球体とカクカクの２種類の形状を作っています。つぶやきProcessingだと文字数の関係で１つの形状だけの表現になりがちですが、複数の形状が作れるとより面白くなりますね。

花びら

t=0
draw=_=>{t++||noStroke(createCanvas(W=800,W,WEBGL))
T=translate
T(0,99)
background`#つぶやきProcessing`
lights(rotateX(-.7))
for(j=6;j--;){for(N=i=j*5+5;i--;){push(fill(W,0,j*24))
rotateY(i*TAU/N)
rotate(sin(t/99)/5+.4+j/9)
T(0,y=-99-j*15)
pop(ellipsoid(9,-y,50-j*3,4,2))}}} pic.twitter.com/BQNtSvX7kr

— // wat 🦀 (@watabo_shi) July 28, 2022

中心から外側に向けての繰り返しで radiusy, radiusz を変化させることで、外にいくにつれて大きくなる花びらを作っています。これを sphere() でやろうと思うと scale() も必要になってくるので、かなりの文字数削減になっています。

丸みのあるペラペラ形状

t=0
draw=_=>{t++||noStroke(createCanvas(W=800,W,WEBGL))
r=50
pointLight(W,W,W,0,0,W/6)
box(W*3)
for(i=153;i--;){push(j=~~(i/9))
translate(x=(i%9-4-j%2*.5)*r*2,y=(j-8)*r)
rotateY(R=cos(mag(x,y)/W-t/99)**6*PI-PI/2)
rotate(R)
pop(ellipsoid(r,r/9,r,4,20))}}//#つぶやきProcessing pic.twitter.com/1dCVVbxjo1

— // wat 🦀 (@watabo_shi) July 29, 2022

detailx を小さく、detaily を大きくするとことで、plane() や box() とは一味違った丸みを帯びた平面になります。

まとめ

ellipsoid() だけでもパラメーターの組み合わせ次第でいろんな形状が作れるので、みなさんもぜひ使ってみてください〜！