#つぶやきProcessing テクニック

Twitterの1ツイートに収まるプログラムで創作する #つぶやきProcessing (のp5.js版)で使える、あまり紹介されていないワザについて書きます。
エラーは出るが想定通りに動く短縮方法も記載してあります。ご了承ください。
私自身プログラミング/p5.js初心者なので、誤りや適切でない表現もあると思います。その場合はコメントやTwitterのDMにて指摘くださると大変助かります。

また、このnoteの前にかにさんの「つぶやきProcessing Tips」をお読みになったほうがよいでしょう。とても有用なテクニックばかりで、私も日ごろから参考にしております。

background(0)の代替 その1

mp4やgifなどのアルファチャンネル非対応フォーマットで出力する場合は、background(0)の黒い背景をclear()で代替できます。(ちょっとズルいと思う方もいらっしゃるでしょうが……)
pngで出力する場合は背景が透過されてしまうので完全な代替にはなりません。

background()の代替 その2

WEBGLモードの場合、box()をbackground()の代わりに使えます。
イメージとしては、大きな箱の中に自分(カメラ)がいる感じですね。
前述のclear()を使う方法とは違い、box()の前にfill()で色を指定することで、背景の色を変えられます。
strokeを無視した場合はbox()の中の値をcanvas幅と高さのうち大きいほうの1.56倍、strokeを気にする場合は2.37倍にすると良いようです。
公式 (https://p5js.org/reference/#/p5/camera) の

If no parameters are given, the following default is used: camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0)

https://p5js.org/reference/#/p5/camera:~:text=of%20your%20camera.-,If,-no%20parameters%20are

が関係していると思うのですが、私はよくわかっていません……(教えてください)
サンプル:box()によるbackground()の代替

background(255)やfill(255)の代替

background(255)やfill(255)、stroke(255)は(255)を``(Grave Accent / backquote)に変えることで3文字減らせます。255の代わりにW(width)などの「数値を代入した変数」を使っている場合も1文字減らせますね。
サンプル:``の検証

background(255)
↓ ↓ ↓
background``

三項演算子で初期設定を行う

アニメーションを行うとき、以下のコードがよく使われています。

c=0
draw=_=>{
  c++||createCanvas(W=720,W)
  clear()
}

しかし、このコードは以下のように書き換えることで1文字減らせます。

c=0
draw=_={
  c++?clear():createCanvas(W=720,W)
}

三項演算子でelseの処理をしない

三項演算子でif else文のelse内処理にあたる部分を特に行わないとき、:0で解決できます。1文字減らせます。
エラーが出ますが、動きます。(p5.js Web Editor上で確認)
たまたま発見した書き方で、おそらくこの0はfalseのことだと思います。(こちらもお分かりになる方いらっしゃったら教えてください)

i=5
if(i<9)box(10)
↓ ↓ ↓
i=5
i<9?box(10):0

中央にtranslate

原点をcanvas中央に持ってくるtranslate(width/2,height/2)はcreateCanvas()の3つめの引数にWEBGLを入れることで代替できる可能性があります。
WEBGLモードでは原点が最初からcanvasの中央になるためです。

translate()の3つめの引数

3次元の表現をするとき、translate()の3つ目の引数が0なら省略できます。2文字減らせます。

translate(20,100,0)
↓ ↓ ↓
translate(20,100)
 

rotateZ()

同じく3次元のとき、rotateZ()を使いたい場合はrotate()で大丈夫です。1文字減らせます。
サンプル:rotate()によるrotateZ()の代替

rotateZ(PI)
↓ ↓ ↓
rotate(PI)

pointLight()

pointLight(255, 255, 255, 100, 50, 0)のようにpointLightやdirectionalLightの(1,2,3),(2,3,4),(3,4,5)番目の引数が同じときは[]を使ってまとめられます。 
1,2,3番目以外で使うとエラーが出ますが、動きます。(p5.js Web Editor上で確認)
サンプル:light系関数の引数をまとめる

pointLight(255,255,255,100,50,0)
↓ ↓ ↓
pointLight([255],100,50,0)
また
pointLight(0,255,255,255,50,0)
↓ ↓ ↓
pointLight(0,[255],50,0)

for文でTAUやPIを使うときの省略

for文の上限がPIやTAUのときは

for(i=0;i<5;i++)
↓ ↓ ↓
for(i=5;i--;)

という短い書き方ができません。そこで

for(t=0;t<TAU;t+=.01)
↓ ↓ ↓
for(t=628;t--;)

とすることで短縮します。その分for文の中は調整する必要があります。
サンプル:for文でTAUやPIを使うときの省略

eを使って0を省略する

1000や0.001のような0をたくさん使う数字は、1e3や1e-3と表せます。
AeB=A*(10^B)となっており、20000なら2e4となります。
大きい数でも小さい数でも、0の数だけeの後につける、と覚えればよさそうです。
また、このテクニックは「background()の代替 その2」で紹介したbox()によるbackground()の代替と組み合わせるのにオススメです。
サンプル:eの検証

box(1000)
↓ ↓ ↓
box(1e3)

おわりに

初めて技術記事を書きました。
私の技量はまだまだですが、参考になれば幸いです。
また何かあったら追記します。