今月１２日に以下のツイートを発見しました。
s=[m=0]
— Naoto HIÉDA (@naoto_hieda) February 11, 2020
draw=_=>{
createCanvas(b=400,b)
a=m++%255
noStroke()
colorMode(HSB)
e=b*sin(m/(get(99,99)[1]-99+.5))
s[m%64]=`d=m-${m}
fill(${m*2%b},b,b)
circle(${e*cos(c=m/10+random(2))}+200,${e*sin(c)}+200,sin(d/20)*${e})`https://t.co/AgtOCRVzLy(eval)}//#つぶやきProcessing pic.twitter.com/qXFMzzCkzK
一見してコードがわからなかったので、１つ１つばらしてJSについて勉強させていただきました。バックスラッシュ記法？とかRubyの式展開のような記述もできて、この短いコードでこんなに不思議で綺麗な表現ができるんだな。。。って驚きでした。
このツイートについているハッシュタグ「#つぶやきProcessing」が何か調べてみると、はぅ君 @Hau_kun さんが思いつかれた活動？のようでした。面白いですね。。。短いコードなら短時間で書けるし、制約の中で工夫するのはパズルのような面白さがあります。
これまでいくつか書いてみたのでご紹介。
初ツイートがこれですね。以前、enchant.jsの少人数授業をしたときにマリオを作りたいという子がいて、ヒント用に書いたコードがあったので、それを短くしてみました。
//#つぶやきProcessing
— タカハシラボ (@ke_takahashi) February 17, 2020
setup=_=>{s=400;t=s*.8;x=s/4;y=t;dy=0;box=[]}
draw=_=>{createCanvas(s,s);fill(0);circle(x,y,20);y-=dy;dy-=2
if(y>t){y=t;dy=0}
box=box.filter((e)=>{e.x-=15;rect(e.x,t-e.y,30,e.y);return e})}
mousePressed=_=>{dy=30;box.push({x:width,y:random()*s/2});}
//むずい pic.twitter.com/as9ObJQC0D
コードを短くするテクは上で最初に紹介したものとか、既にたくさんツイートされているのでそれらの作品から勉強させてもらいました。コツとしてはなるべく１文字変数を多用します。メソッドとかに値をセットするときに変数に代入して、同じ値を使うときにその変数で省略しちゃいます。通常はdrawメソッドで最初に画面を全消しするためbackgroundを使いますが、createCanvasを呼ぶことによって全消しする効果があります。最初みたときなんじゃこりゃ？と思いましたがある方のコードから教えてもらいました。
次に作ったのがこれ。配列にオブジェクトを突っ込んでmapメソッドで処理します。これは簡単な方程式で運動を表現したいな。。。という感じでした。
//#つぶやきProcessing
— タカハシラボ (@ke_takahashi) February 18, 2020
s=(S=400)/2;l=[];c=0
draw=_=>{createCanvas(S,S);colorMode(HSB,9)https://t.co/3pHxIx953s(e=>{t=atan2(e.y,e.x);e.X-=cos(t)/2;e.Y-=sin(t)/2;e.x+=e.X;e.y+=e.Y;fill(e.i,s,s);circle(e.x+s,e.y+s,20)})}
mousePressed=(e)=>{l.push({x:e.x-s,y:e.y-s,X:5,Y:0,i:++c%9})} pic.twitter.com/ebTwFi8DVG
つづいてこれ。YouTubeでコンテンツをロードするときに表示されるアイコンですね。意外とこれ難しいんです。YouTubeのアイコンを画面録画して低速で何度も再生してどうやって作るのか考えました。。。実は、似ているんですが、まだ本物とは違うんですね。。。動きが。ぜひ、挑戦してみてください。
//#つぶやきProcessing
— タカハシラボ (@ke_takahashi) February 20, 2020
s=(S=400)/2;p=[0,0];f=true;sp={true:0.05,false:0.2}
draw=_=>{createCanvas(S,S);strokeWeight(40);stroke(0);noFill()
p[0]+=sp[f];p[1]+=sp[!f];g=abs(p[0]-p[1])
if(f&&g>TWO_PI*0.8||!f&&g<TWO_PI*0.1)f=!f
arc(s,s,s,s,p[0],p[1],OPEN)
}
//頑張ったけど限界,なんか違う pic.twitter.com/dTj9r1Hvi4
つづいて。これも過去に作ったコードですが、元ネタは別の方が作ったものです。それをつぶやきProcessingにしてみた感じです。MSの採用試験問題ですね。実はこれ脱出成功したことがありません。。。Nintendo DSやenchant.jsで作ったときにはうまくいけたんですが。。。どこか違うのかなぁ？
//つぶやきProcessing
— タカハシラボ (@ke_takahashi) February 21, 2020
t=(s=(S=400)/2)/2;x=y=X=Y=0
draw=_=>{createCanvas(S,S);circle(s,s,s);u=mouseX-s;v=mouseY-s
a=atan2(v-y,u-x);circle*1+s,(y+=sin(a))+s,7)
b=atan2(Y,X);c=atan2(y,x);d=c-b;if(d<0)d+=TWO_PI
e=4/t;if(d>PI)e=-e
b+=e;circle*2+s,(Y=t*sin(b))+s,7)} pic.twitter.com/5VQGlUaCRx
そして、昨日作ったのがこれですね。最初、ルンバのようなロボットを表現するコードを書きたかったんです。衝突検知して動き回るロボット。で、実際に書いてみると線をトレースする感じになって、これはこれで面白いな。。。と思って、じゃ、文字の枠線に沿って動かしたら面白いかもな。。。と思って作りました。今回は短くするのに本当に苦労しました。その証拠に、本当は「//#つぶやきProcessing」と書かなければならないのですが、// を入れるとオーバーしてしまい、それ以上削る手立てが浮かばず。。。あきらめて削りました。ちょっと反則です。。。
b=[]
— タカハシラボ (@ke_takahashi) February 27, 2020
draw=_=>{R=random;C=cos;S=sin;createCanvas(s=460,90);b.push({x:R(s),y:R(200),t:R(3)})
textSize(81);text("Processing",3,65)https://t.co/LpfVnCVgNd(e=>{if(get(e.x+(c=5)*C(e.t),e.y+c*S(e.t))[3]!=0)e.t+=0.1
else{e.x+=C(e.t);e.y+=S(e.t)}
circle(e.x,e.y,c)})}#つぶやきProcessing pic.twitter.com/tu0deLI46r
ただ、これも本当は、最初に以下を作ったんですね。。。それからどうしても短くすることができず。。。作品自体を妥協して上記のようになった。。。という感じです。
ほんとうはこれを作ったんだけどねぇ。。。縮まらなかったのよねぇ。。。残念。 pic.twitter.com/UyfDUHGGYt
— タカハシラボ (@ke_takahashi) February 27, 2020
ちなみにルンバ的なやつは以下になります。
ロボット作るのも面白いけどハード作るのは面倒だし。とりあえずソフトの中で遊ぶのも悪くはないかなぁ。ライントレーサー。#p5js #processinghttps://t.co/elqzSx5Rrm pic.twitter.com/vY1EClqsVF
— タカハシラボ (@ke_takahashi) February 27, 2020
#つぶやきProcessingって、他の作品をみていただければわかるのですが、アート的な作品が中心なんですね。。。この短いコードでよくここまで楽しくて美しい表現ができるものだな。。。とつくずく感心します。
私のはそういうのとは違うので。。。ちょっと邪道な感じもしますが。。。
これからも気が向いたら書いて行きたいな。。。と思います。
