![見出し画像](https://assets.st-note.com/production/uploads/images/83662678/rectangle_large_type_2_6f1b22ba6d3c57fadf98f69a7a21a9ac.png?width=1200)
つぶやきProcessing ellipsoid()活用術
こんにちは、AQUARING かに です。
今回は最近つぶやきProcessingでよくやっている、ellipsoid() (楕円体)を使った表現テクニックを紹介します。
調整できるパラメーターが多いため、ellipsoid() だけもでいろんな形状が作れます。そのため複数の関数を使わなくて済むのでつぶやきProcessingにおいては文字数削減にもなります。
ellipsoid() の書き方
ellipsoid(
[radiusx],// X方向の半径
[radiusy],// Y方向の半径
[radiusz],// Z方向の半径
[detailX],// X方向の分割数
[detailY] // Y方向の分割数
)
基本的には sphere() (球体)と同じく半径とXY方向の分割数を指定しますが、ellipsoid() の場合はXYZ各方向に対しての半径の大きさをそれぞれ指定することができます。
![](https://assets.st-note.com/img/1659150086101-j9xs0Q2Zf3.png)
radiusx のみ指定すると球体に。
![](https://assets.st-note.com/img/1659150355017-muOIBoLJSY.png)
radiusx,y,z それぞれ指定するとこんな歪(いびつ)な形にも。
![](https://assets.st-note.com/img/1659153260156-ifj2CEnKJm.png)
detailx,y を小さくするとカクカクに。
作例
分割数の変更
t=0
— // wat 🦀 (@watabo_shi) July 19, 2022
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
中心から外に向かうにつれて radiusy を大きくしています。
宝石みたいでかわいいですね。
ellipsoid() の組み合わせで3Dの星
t=0
— // wat 🦀 (@watabo_shi) July 20, 2022
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
カクカクの ellipsoid() をXYZ軸方向に回転させて星形を作っています。
球体とカクカクの組み合わせ
t=0
— // wat 🦀 (@watabo_shi) July 27, 2022
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
ellipsoid() のパラメーター違いで球体とカクカクの2種類の形状を作っています。つぶやきProcessingだと文字数の関係で1つの形状だけの表現になりがちですが、複数の形状が作れるとより面白くなりますね。
花びら
t=0
— // wat 🦀 (@watabo_shi) July 28, 2022
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
中心から外側に向けての繰り返しで radiusy, radiusz を変化させることで、外にいくにつれて大きくなる花びらを作っています。これを sphere() でやろうと思うと scale() も必要になってくるので、かなりの文字数削減になっています。
丸みのあるペラペラ形状
t=0
— // wat 🦀 (@watabo_shi) July 29, 2022
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
detailx を小さく、detaily を大きくするとことで、plane() や box() とは一味違った丸みを帯びた平面になります。
まとめ
ellipsoid() だけでもパラメーターの組み合わせ次第でいろんな形状が作れるので、みなさんもぜひ使ってみてください〜!
この記事が気に入ったらサポートをしてみませんか?