はじめに
つぶやきProcessingとは？
chatGPTさんに聞いてみた
つぶやきProcessingというのはツイートに収まるような文字数でコードを書く取り組みらしいのですが、
あまり詳しくないので教えていただけると嬉しいです。
「つぶやきProcessing」とは？
Twitterに投稿できる範囲（元は140文字、現在は280文字）に収まる短いコードで、Processingを使って作品を作る活動のことです。
できるだけ短いコードで、面白い・美しい・動きのあるビジュアルを作る
制約（文字数）を逆手にとって、創造性を発揮する場
プログラミング版の「俳句」や「短歌」のような文化
🖥 Processingとは？
Javaベースのビジュアルプログラミング言語
短く簡潔に、図形やアニメーションを描くのに向いている
教育・アート・ジェネラティブデザインの分野でよく使われている
関連タグ・コミュニティ
Twitter（X）では #つぶやきProcessing や #TweetCoding などのハッシュタグで作品が投稿されています。
Processingの兄弟環境である p5.js（JavaScript版） を使った 「つぶやきp5.js」 もあります。
🧪 試してみたい方へ
もしあなたがProcessing環境を持っていれば、次のようなステップですぐ始められます：
Processingの公式サイト からエディタをダウンロード
140文字（または280文字）以内でコードを書く
実行して、動く・変化する作品を楽しむ
Twitterで #つぶやきProcessing タグをつけて投稿してみる（以上、一部抜粋）
つぶやきProcessingはHauKunという人がとてもたくさん投稿しているのですが、
彼について知ってることを詳しく教えていただけると嬉しいです。
@Hau_kun（はぅ君）とは？
活動名：@Hau_kun（はぅ君）
活動内容：Processingを用いて、Twitterの文字数制限（280文字以内）で動的なビジュアル作品を制作し、公開する活動を行っています。
主な活動：「つぶやきProcessing」の提唱者として知られています。
📅 代表的な活動履歴
2019年12月：Qiita Advent Calendar 2019に「つぶやきProcessing（ひとり）」として参加し、毎日1ツイートで作品を投稿する企画を実施しました。
2020年2月：自身のブログで「#つぶやきProcessing」の楽しさを紹介し、他の参加者の作品も紹介しています。
Qiita
memorandums.hatenablog.com
🎨 作品の特徴
短いコードでの表現：Processingを用いて、Twitterの文字数制限内で動的なビジュアル作品を制作しています。
創造的な表現：制約の中で創造性を発揮し、視覚的に魅力的な作品を生み出しています。
参加型の活動：他のユーザーも「#つぶやきProcessing」のタグを使用して作品を投稿し、コミュニティとして活動しています。
🌐 SNSでの活動
Twitter：@Hau_kun（はぅ君）として、作品の投稿や活動の情報を発信しています。
Qiita：技術的な記事やチュートリアルを投稿し、他の開発者と知識を共有しています。
ブログ：自身のブログで「つぶやきProcessing」の楽しさや作品の紹介を行っています。
memorandums.hatenablog.com
🔗 関連リンク
Twitter：@Hau_kun
Qiita：@Hau_kun
ブログ：Hau_kunのブログ
memorandums.hatenablog.com
@Hau_kun（はぅ君）の活動は、制約の中で創造性を発揮する楽しさを教えてくれます。「つぶやきProcessing」は、プログラミングとアートの融合を楽しむための素晴らしい手段です。（以上、一部抜粋）
そんな感じのあれです。
ここで紹介するのはp5.jsに限ります。Processing詳しくないので。なおp5のバージョンはすべて2.0です。
小星形十二面体を作る
setup=_=>{createCanvas(w=600,w,WEBGL);q=_=>{(t=translate)(0,h=209.67,0);cone(99,160.177,6,1,false);t(0,-h,0);(x=rotateX)(PI)}
draw=_=>{background(0);orbitControl();lights();q(q(fill(w)));for(i=0;i<5;i++){push();(y=rotateY)(PI);x(1.107);q(q());pop();y(TAU/5)}}}
迷路を作る
r=[];draw=_=>{if(!r[0]){createCanvas(w=512,w);background(w);strokeWeight(4);for(i=8;i<w-8;i+=16){for(j=8;j<w;j+=16){r.push([i,j,t=i+16,j],[j,i,j,t])}}shuffle(r,point(8,8));}for(let p of r){if(get(a=p[0],b=p[1])[0]-get(c=p[2],d=p[3])[0]){line(a,b,c,d);break}}}
0～9まで連続的に変化するデジタル表示を作る
f=0;b=[119,68,107,110,92,62,63,116,127,126];draw=_=>{if(f++){createCanvas(w=360,w)}fill("teal");noStroke();background("skyblue");(T=translate)(c=120,180);for(i=0;i<7;i++){rect(-15,0,30*(a=(((1<<i)&b[(f/60|0)%10])>>i)),c*a,15);T(0,c);rotate((i<3?-1:1)*PI/2)}}
ドラゴン曲線に沿って竜の字を書きまくる
x=y=v=f=0;u=40;draw=_=>{if(!f){createCanvas(w=800,w);textAlign(h=CENTER,h);textSize(20);background(0);fill(w)}translate(400,400);r=4;while(r--){text("竜",x-u/2,y+v/2);text("🐉",x-u,y+v);rotate(PI/2)}x-=u;y+=v;s=++f;while(1-s%2){s/=2}k=1-(s&2);z=u;u=-k*v;v=k*z}
工字繋ぎ（グラデーションあり）
s="@ཟőՕх߽߽хՕőཟ";
setup=_=>{createCanvas(w=480,w);applyMatrix(n=1.732,1,n,-1,-w,250);for(x=0;x<96;x++){for(y=0;y<96;y++){
c=`hsl(from teal h 60 ${(s.charCodeAt(y%12)&(1<<(x%12))?y:99)})`;(f=drawingContext).fillStyle=c;f.strokeStyle=c;square(x*5,y*5,5)}}}
メンガーのスポンジ（noStroke）
setup=_=>{createCanvas(w=600,w,WEBGL);pointLight(99,w,w,0,0,330);noStroke();rotate(2.1,[1,1,0]);u=l=>{if(l>4){for(let x of [-l,0,l]){for(let y of [-l,0,l]){for(let z of [-l,0,l]){if(x*y+y*z+z*x){push();translate(x,y,z);u(l/3);pop()}}}}}else{box(l*3)}};u(99)}
ダークモードとライトモードで違う画像
function setup(){
createCanvas(400, 400);
fill(255);rect(0,0,400,200);
fill(0);rect(0,200,400,200)
erase();
noStroke();
textSize(32);
textStyle(ITALIC);
textAlign(CENTER,CENTER);
text("dark mode", 200, 100);
text("light mode", 200, 300);
}
電撃
f=0;draw=_=>{f||createCanvas(w=800,400);background(0);r=5;while(r--){strokeWeight(r+1);g=0;h=200;stroke(99,h,w);for(k=1;k<=40;k++){a=40+8*r;line(g,h,x=k*20+a*(n=noise)(f/6,k,r)-a/2,y=200+60*sin(PI*k/40)*sin((k+f/1.6+r*2)/6.366)+a*n(k,f/6,r)-a/2);g=x;h=y}}f++}
草
setup=_=>{createCanvas(600,200);colorMode(HSB,99);
q=noise;background(0);noStroke();for(l=0;l<8;l++){for(k=0;k<30;k++){fill(52,80,4+l*12);
for(i=0;i<128;i+=.4){circle(k*24+l*3-i,200-(2+2*q(k,l))*i+i*i/(20+70*q(2,k,l)),(2+4*q(1,k,l))*(1-i/128))}}}}
セルフテクスチャー
setup=_=>{c=createCanvas(w=400,w,WEBGL);noStroke();t=createGraphics(w,w);f=0;
draw=_=>{background(30,120+40*sin(f*TAU/120),255);fill(0);plane(380);texture(t);translate(0,0,300);rotateX(f/80);rotateY(f/120);box(150);t.image(c, 0, 0);f++}}
弾幕の無限ループ
f=0;v=300;draw=_=>{f||(createCanvas(600,600)+noStroke()+fill(255));background(0);e=2;while(e--){r=-1;while(++r<150){translate(v+180*cos(a=(e+r/75)*PI),v+180*sin(a));rotate(PI*(e+r/15));t=4;while(t--){u=((r+f)*2+t*v)%600;rect(u-6,-3,12,6,3)}resetMatrix()}}f++}
リサージュコレクション
t=0;draw=_=>{t||createCanvas(w=640,w)+noStroke()+background(0);for(i=1;i<9;i++){for(j=1;j<9;j++){drawingContext.fillStyle=`hsl(${atan2(j-4.5,i-4.5)*60} 90% 50%)`;
circle(80*i-40+40*sin(i*(a=t/((i+j)*20))),80*j-40+40*sin((j>=i?j+1:j)*a),2)}}t++}
鎖
f=0;draw=_=>{if(!f){createCanvas(w=400,w,WEBGL);noStroke()}background(0);lights();rotateX(.7);(t=translate)(99,0);r=14;while(r--){t(-9.8,42.95);rotateZ(PI/7);fill(`hsl(240 80% ${75+25*cos(r/2+f/20)}%)`);(q=rotateY)(k=(r&1)*PI/2+f/40);torus(32,4,40);q(-k)}f++}
バーンズリーのシダ
z=0;setup=_=>{createCanvas(640,640);background(0);(t=translate)(w=315,600);u=d=>{z++;stroke(w,c=w-z*18,c/4);line(0,0,0,-d);t(0,-d);(r=rotate)(.06);if(d*4>5)u(d*.8);r(-.06);t(0,d*.4);r(-1);if(d*4>9)u(d*4/9);r(2);if(d*4>9)u(d*4/9);r(-1);t(0,d*.6);z--};u(120)}
marine bubbles
setup=_=>{createCanvas(w=640,w);background(w);
(h=blendMode)(DIFFERENCE);
stroke(5,3,2);for(f=0;f<=90;f++){for(i=0;i<=w;i++){n=noise(i/99,f);
line(i,2*w,i,200+f*6-240*n)}}noStroke();fill(96);h(SCREEN);
for(k=0;k<w;k++){circle(x=(u=random)(w),y=u(w),u(y/20))}}
おわりに
おわりです。