つぶやきProcessing作品集

# はじめに
　つぶやき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です。

## 小星形十二面体を作る
```js
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)}}}
```

![qdqwf3wfwf2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/f66ae88f-c54d-412b-8cd7-77e884d622a1.png)

## 迷路を作る
```js
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}}}
```

![wfwfwgwg3g3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/f23ebe3d-bb15-4158-8c31-557146b22694.png)

## 0～9まで連続的に変化するデジタル表示を作る
```js
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)}}
```

![fwfwgg3g.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/73d62f1f-fe16-4e28-b1a7-7ea2dedb3735.png)

## ドラゴン曲線に沿って竜の字を書きまくる
```js
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}
```

![wrqg33g3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/6579808a-263b-410b-abc9-df534ec40c02.png)

## 工字繋ぎ（グラデーションあり）
```js
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)}}}
```

![3t3tg4g4g34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/0ac87bfc-20db-42f9-b40a-c46aa21e98e0.png)

## メンガーのスポンジ（noStroke）
```js
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)}
```
![wdqdqfwf2w.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/7e851bac-1121-4d28-a453-f528d45491b8.png)

## ダークモードとライトモードで違う画像
```js
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);
}
```

![GrWd_OdagAAvOg4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/1d35ea32-47be-4426-9281-3cfb6ffff797.png)

## 電撃
```js
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++}
```

![wf2wf3g3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/1b7e2d32-430d-46b4-ac48-0c647e9cd9f1.png)

## 草
```js
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))}}}}
```

![r2f2f2g3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/5b76aa6f-bbfe-4198-bbe9-868d59c477df.png)

## セルフテクスチャー
```js
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++}}
```

![wfwv3g3v3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/c04821f1-4781-4f53-84ac-b9a598fe36fd.png)

## 弾幕の無限ループ
```js
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++}
```

![gwg3b3h4b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/26cfe279-fe0f-4393-85c3-f722b40e9834.png)

## リサージュコレクション
```js
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++}
```

![22f22g32g33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/cc0ab6ce-932a-4e8a-a7d1-b51afa0fc761.png)

## 鎖
```js
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++}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/d0fa29e1-3ba5-4244-86f7-7a6151f7594a.png)

## バーンズリーのシダ
```js
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)}
```

![wfwf33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/7a53997f-6232-49c6-9a9f-8091fb5e108d.png)

## marine bubbles
```js
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))}}
```

![wf2w3rt3efefegegege.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/8ef8828f-66d2-4ccb-9be6-596c5e660eae.png)

# おわりに
　おわりです。