つぶやきProcessingアラカルト
これはProcessing Advent Calendar 2021の… 何日目の記事でもありません！
アドカレの記事を書いてる皆さんがとても楽しそうだったので、私もなにか書く。そんな記事です。
そして今回のテーマはつぶやきProcessing！
私がこれまでにTwitterに投稿したコードから、ネタ的な意味で面白そうなものをピックアップして紹介します。「１ツイートでこんなこともできる！」という色々なネタ要素を詰め込んだ、つぶやきProcessingアラカルトです。
つぶやきProcessingって？
まず、つぶやきProcessingについて簡単に紹介します。
つぶやきProcessingは、プログラミング言語（＆実行環境）のProcessingを使って、１ツイートに収まるコードでアートを作るものです。
そういえば #つぶやきProcessing の説明をしていなかった。
— はぅ君 (@Hau_kun) June 5, 2019
Processingというデジタルアートのためのプログラミング言語があります。https://t.co/ynQwP6S1RR#つぶやきProcessing はProcessingを使い、1ツイートに収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。
Twitterでたくさんの方がコードを公開されていて、今ではなんと6,000作品(!!)も投稿されています。
#つぶやきProcessing に投稿された作品が6000を越えました！
— つぶやきProcessing (@TweetProcessing) December 11, 2021
アート的な側面はもちろん、そのプログラムをどうやって１ツイートに収めるか？というパズル的な面白さが魅力です。
以下、私が投稿したつぶやきProcessingから、ネタ的に面白そうなものを紹介します。なお、Processingはpythonモードを使用しています。
色々なネタ
弾幕シューティングゲーム
def setup():size(400,400)
— ryotako (@ryotakob) December 16, 2019
def draw():
clear()
for i in range(frameCount)[-999:]:
q=noise(i)*99
t=frameCount-i
x=3*t*cos(q)+200+80*sin((i)*.02)
y=3*t*sin(q)+100+t*t*.02
circle(x,y,10)
dist(mouseX,mouseY,x,y)<10 and background(-1)#つぶやきProcessing pic.twitter.com/CaSx2uD9HF
１ツイートで遊べる弾幕シューティングゲームです。
マウスカーソルで弾を避け、被弾すると画面が点滅します。
立体視
size(400,400)
— ryotako (@ryotakob) September 13, 2021
textSize(280)
text("P5",35, 290)
for j in range(height):
d,s=0,0
for i in range(width):
g=get(i,j)-get(i+1,j)
if g<0:s=.2
if g>0:s=max(-d,0)
d=max(0,d+s)
set(i,j,color(map(noise(i *.5+d,j),.2,.8,0,255)))#つぶやきProcessing 立体視！ pic.twitter.com/9l1ZN82nJ2
寄り目にすることで立体的な模様が浮かび上がる立体視（ステレオグラム）です。スマホの画面だと、画像が小さくて立体視が難しいかもしれません。
スリットアニメーション
W,Q=99,PI/36
— ryotako (@ryotakob) October 11, 2020
def setup():size(199,199)
def draw():clear();[rect((i*18+frameCount-150),0,18,199)for i in range(9)];[set(i+W,j+W,-1)for i in range(-W,W)for j in range(-W,W)for k in range(18)if abs(cos(Q*k)*i-sin(Q*k)*j)+abs(sin(Q*k)*i+cos(Q*k)*j)<80 and i%18==k]#つぶやきProcessing pic.twitter.com/xJ2OVBiPCN
動く隙間（スリット）を通して見ると、静止画が動いて見えるスリットアニメーションをつぶやきに。スリットアニメーションの実装については繭さんの記事を参考にさせていただきました。
プログラム的なネタ
ランダム関数呼び出し
def setup():
— ryotako (@ryotakob) September 8, 2019
size(400, 400)
def draw():
d=dir(__builtins__)
del d[257]
n=int(random(241,579))
a=[random(width) for _ in range(int(random(1,7)))]
try:eval(d[n])(*a)
except:pass#つぶやきProcessing pic.twitter.com/nDKyvqp0kY
関数にランダムな変数を与えるのはジェネラティブアートではよくある方法ですが、ランダムな関数を選んで実行してみたらどうなるか？という着想で作ったものです。
選んだ関数と与えた引数の数が合わない（rect(1)みたいな）場合は、例外処理で強引に無視しています。
通信
add_library("net")
— ryotako (@ryotakob) September 18, 2021
a,s=[],Server(this,5204)
def setup():
size(400,400)
colorMode(HSB,9)
def draw():
clear()
for t,x,y in a:fill(t%9,4,7);circle(x+frameCount-t,y,100)
def mouseReleased():
p=(frameCount,mouseX,mouseY)
a.append(p)
s.write(str(p))#つぶやきProcessing
add_library("net")
— ryotako (@ryotakob) September 18, 2021
a,c=[],Client(this,"127.0.0.1",5204)
def setup():
size(400,400)
colorMode(HSB,9)
def draw():
background(9)
noStroke()
if c.available():a.append(eval(c.readString()))
for t,x,y in a:
fill(t%9,4,7)
circle(x+frameCount-t-400,y,100)#つぶやきProcessing pic.twitter.com/0vTyThcVTD
１つめのツイートがサーバー、２つ目のツイートがクライアントになり、つぶやきで通信を行うものです。
ウィンドウ操作
void void setup() {
— ryotako (@ryotakob) August 12, 2021
size(240,240);
}
void draw() {
clear();
float r=200,t=frameCount*.05;
int i=int(cos(t)*r),j=int(sin(t)*r);
textSize(300);
text("★",-i,50-j);
surface.setLocation(400+i,400+j);
}#つぶやきProcessing pic.twitter.com/r7suYwJP4f
画像を表示するウィンドウに干渉するものです。
音
ステップシーケンサ
add_library("Sound")#つぶやきProcessing
— ryotako (@ryotakob) September 8, 2020
def setup():frameRate(3);clear()
def draw():
for i in range(8):
if get(frameCount%8*9+1,i*9+1)>-2:s=SinOsc(this);s.freq(200+60*i);Env(this).play(s,0,0,.3,.3)
def mousePressed():x,y=mouseX,mouseY;fill(~get(x,y)>>16);rect(x/9*9,y/9*9,9,9) pic.twitter.com/Jv3S4uumgF
ProcessingのSoundライブラリを使用し、入力したボタンに応じて音を鳴らすステップシーケンサを実装。
上のツイートで入力しているパターンはKoji SaitoさんのつぶやきProcessingからお借りしました。
ドラム
add_library("Sound");W=128
— ryotako (@ryotakob) September 6, 2020
def setup():size(W,W)
def draw():
t,c=this,(frameCount-1)%W
if c==0:clear()
if c in[0,16,80,88]:n=BrownNoise(t)
elif c in[32,56,72,96,120]:n=WhiteNoise(t)
else:return
Env(t).play(n,0,0,.3,.1)
fill(-c*9**7);circle(64,64,c)#つぶやきProcessing pic.twitter.com/0ktceqwHP6
こちらもSoundライブラリですが、ノイズを使ってドラムっぽい効果を出したものです。
しゃべるプログラム
add_library("ttslib")
— ryotako (@ryotakob) August 4, 2020
def setup():size(200,200)
def draw():
fill(0)
circle(60,60,20)
circle(140,60,20)
if frameCount%2:
fill(200)
TTS().speak(["Tsu","bu","ya","ki","Processing"][frameCount/2%5])
else:
fill(0)
delay(200)
arc(100,120,60,60,0,PI)#つぶやきProcessing pic.twitter.com/TRpJOWHH2s
ttslibライブラリを使用した、しゃべるつぶやきProcessing！
PixelFlow
流体シミュレーション
add_library("PixelFlow")
— ryotako (@ryotakob) August 27, 2020
W=800
def setup():size(W,W,P2D);global F;F=DwFluid2D(DwPixelFlow(this),W,W,1)
def draw():background(-1);x=W/2*(1+cos(frameCount*3.13));F.addTemperature(x,700,9,-1.9);F.update();F.renderFluidTextures(g,1);filter(12)#つぶやきProcessing #pchj03 pic.twitter.com/9bEm6YrKIS
Processing標準ライブラリ界に燦然と輝くヤバいやつ（褒め言葉）こと、PixelFlowを使用して流体シミュレーション！
弾性体シミュレーション
add_library("PixelFlow")
— ryotako (@ryotakob) August 16, 2020
W,P,B=400,DwPhysics(DwPhysics.Param()),DwSoftBall2D()
P.param.bounds=[0,0,W,W]
B.create(P,50,50,99,4)
B.material_color=-2**9
def setup():size(400,400,P2D)
def draw():clear();P.update(1);B.createShapeMesh(this.g);B.displayMesh(this.g)#つぶやきProcessing pic.twitter.com/4sgmSHrPtx
add_library("PixelFlow")
— ryotako (@ryotakob) August 16, 2020
W,P,B=400,DwPhysics(DwPhysics.Param()),DwSoftBall3D();P.param.bounds=[0,0,-W,W,W,0];P.update_particle_shapes=0;B.create(P,3,99,60,70,-80)
def setup():size(W,W,P3D)
def draw():clear();P.update(1);B.createShapeMesh(g);B.displayMesh(g)#つぶやきProcessing pic.twitter.com/JTGRXZYkPS
PixelFlowなら、二次元、三次元の弾性体シミュレーションもできます。
おわりに
以上、つぶやきProcessingアラカルトでした！
ちなみに、この記事のヘッダ画像もつぶやきProcessingで作ったものです。
f=lambda x,y:abs(sin(x)+log(y))
— ryotako (@ryotakob) June 18, 2020
g=lambda x,y,z:(f(y,z),f(z,x),f(x,y))
size(800,800)
colorMode(HSB,9,1,1)
for i in range(800):
for j in range(800):
x,y,z=g(*g(*g(i*.005,j*.005,dist(i,j,200,200)*.025)))
m=max(x,max(y,z))
set(i,j,color(x/m+5,y/m,z/m))#つぶやきProcessing pic.twitter.com/4ppoyxjyES