つぶやきProcessingアラカルト

2021年12月11日 17:21

これはProcessing Advent Calendar 2021の… 何日目の記事でもありません！

アドカレの記事を書いてる皆さんがとても楽しそうだったので、私もなにか書く。そんな記事です。

そして今回のテーマはつぶやきProcessing！
私がこれまでにTwitterに投稿したコードから、ネタ的な意味で面白そうなものをピックアップして紹介します。「１ツイートでこんなこともできる！」という色々なネタ要素を詰め込んだ、つぶやきProcessingアラカルトです。

つぶやきProcessingって？

まず、つぶやきProcessingについて簡単に紹介します。

つぶやきProcessingは、プログラミング言語（＆実行環境）のProcessingを使って、１ツイートに収まるコードでアートを作るものです。

そういえば #つぶやきProcessing の説明をしていなかった。

Processingというデジタルアートのためのプログラミング言語があります。https://t.co/ynQwP6S1RR #つぶやきProcessing はProcessingを使い、1ツイートに収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。
— はぅ君 (@Hau_kun) June 5, 2019

Twitterでたくさんの方がコードを公開されていて、今ではなんと6,000作品(!!)も投稿されています。

#つぶやきProcessing に投稿された作品が6000を越えました！
— つぶやきProcessing (@TweetProcessing) December 11, 2021

アート的な側面はもちろん、そのプログラムをどうやって１ツイートに収めるか？というパズル的な面白さが魅力です。

以下、私が投稿したつぶやきProcessingから、ネタ的に面白そうなものを紹介します。なお、Processingはpythonモードを使用しています。

色々なネタ

弾幕シューティングゲーム

def setup():size(400,400)
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
— ryotako (@ryotakob) December 16, 2019

１ツイートで遊べる弾幕シューティングゲームです。
マウスカーソルで弾を避け、被弾すると画面が点滅します。

立体視

size(400,400)
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
— ryotako (@ryotakob) September 13, 2021

寄り目にすることで立体的な模様が浮かび上がる立体視（ステレオグラム）です。スマホの画面だと、画像が小さくて立体視が難しいかもしれません。

スリットアニメーション

W,Q=99,PI/36
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
— ryotako (@ryotakob) October 11, 2020

動く隙間（スリット）を通して見ると、静止画が動いて見えるスリットアニメーションをつぶやきに。スリットアニメーションの実装については繭さんの記事を参考にさせていただきました。

プログラム的なネタ

ランダム関数呼び出し

def setup():
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
— ryotako (@ryotakob) September 8, 2019

関数にランダムな変数を与えるのはジェネラティブアートではよくある方法ですが、ランダムな関数を選んで実行してみたらどうなるか？という着想で作ったものです。

選んだ関数と与えた引数の数が合わない（rect(1)みたいな）場合は、例外処理で強引に無視しています。

通信

add_library("net")
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
— ryotako (@ryotakob) September 18, 2021

add_library("net")
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
— ryotako (@ryotakob) September 18, 2021

１つめのツイートがサーバー、２つ目のツイートがクライアントになり、つぶやきで通信を行うものです。

ウィンドウ操作

void void setup() {
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
— ryotako (@ryotakob) August 12, 2021

画像を表示するウィンドウに干渉するものです。

音

ステップシーケンサ

add_library("Sound")#つぶやきProcessing
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
— ryotako (@ryotakob) September 8, 2020

ProcessingのSoundライブラリを使用し、入力したボタンに応じて音を鳴らすステップシーケンサを実装。
上のツイートで入力しているパターンはKoji SaitoさんのつぶやきProcessingからお借りしました。

ドラム

add_library("Sound");W=128
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
— ryotako (@ryotakob) September 6, 2020

こちらもSoundライブラリですが、ノイズを使ってドラムっぽい効果を出したものです。

しゃべるプログラム

add_library("ttslib")
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
— ryotako (@ryotakob) August 4, 2020

ttslibライブラリを使用した、しゃべるつぶやきProcessing！

PixelFlow

流体シミュレーション

add_library("PixelFlow")
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
— ryotako (@ryotakob) August 27, 2020

Processing標準ライブラリ界に燦然と輝くヤバいやつ（褒め言葉）こと、PixelFlowを使用して流体シミュレーション！

弾性体シミュレーション

add_library("PixelFlow")
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
— ryotako (@ryotakob) August 16, 2020

add_library("PixelFlow")
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
— ryotako (@ryotakob) August 16, 2020

PixelFlowなら、二次元、三次元の弾性体シミュレーションもできます。

おわりに

以上、つぶやきProcessingアラカルトでした！

ちなみに、この記事のヘッダ画像もつぶやきProcessingで作ったものです。

f=lambda x,y:abs(sin(x)+log(y))
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
— ryotako (@ryotakob) June 18, 2020

この記事が気に入ったらサポートをしてみませんか？