「つぶやきProcessing」を始めるまで
Processingというデジタルアートやかっこいいビジュアルなど作成するためのプログラミング言語があります。また、その一連の制作過程をクリエイティブコーディングと呼んだりもします。
そんなProcessingによるコードをTwitterの1ツイート（全角140文字／半角280文字）におさめてどこまでアートを表現できるかという「つぶやきProcessing」という取り組みがあります。概要については創始者でもある@Hau_kunさんのページを参照してください。
Processing自体は何年も前に触っておりつぶやきProcessingの存在自体も認識していたのですが、いつか挑戦しようと思いつつなかなか手が出せず……
そんな時に@PCD_Tokyoさんの「#AltEdu2022」というコーディングチャレンジ企画が始まり、その14日目のお題がつぶやきProcessingだったので良い機会だと思い初挑戦してみました（ProcessingのJavaScript版であるp5.jsを使用しています）。文字数をいかに少なくするかがポイントなので以下の記事も参考にさせていただきました。
そうした流れで作ったものが以下。初めは適当にコードを打ち込んでいたのですが、だんだんと顕微鏡で除いた微生物のビジュアルが頭に浮かんできて最終的にこんな感じになりました。なんとなく円形の背景色はTwitterのブランドカラーにしております。
//#つぶやきProcessing
— __hahTD (@eatora22) February 14, 2022
f=0
w=500
draw=_=>{f++||createCanvas(w,w)
c=circle
n=noise
background(0)
fill("#55acee")
c(w/2,w/2,w)
noFill()
s=0.0001
for(i=0;i<50;i++)v=3*s*i*f*n(s*i*f),x=w*n(1-v),y=w*n(v),r=i*n(v),c(x,y,r),i>48?(rect(x-r,y-r,r*2),fill(0),text("missing",x+r+2,y-r)):0} pic.twitter.com/oDCnuzb62V
初心者ならではのミスとして、Twitter投稿時の改行分の文字数を考慮しておらず投稿直前に気づきました。なくなく他にも付けていたタグを削除（今となってコードを見返すともうちょい文字数を減らせるな……）。
ついでにコードはGitHubにアップしてWeb上でも動かせるようにしております。デモは以下より。
久しぶりにコードを適当にいじりつつ良さげなビジュアルを模索するという過程を思い出すことができて良かったであります。はてなブログでもいろいろ記事を書いてますので良かったらチェックしてみてください。
いいなと思ったら応援しよう！
