1 of 42

つぶやきProcessingをしよう

@lali

2 of 42

自己紹介

  • 所属 : OPwebフロントエンジニア
  • AWSは何もわからない

最近上手く割れなかった割り箸→

3 of 42

つぶやきProcessingとは

4 of 42

Processingとは

電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境（IDE）である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。

- Wikipedia

みんな大体p5.jsを

使っている

Processingのロゴ

p5.jsのロゴ

5 of 42

「#つぶやきProcessing」をつけて

280字(タグを除くと261字)でプログラムを書いて

何か良さそうなアレを作ろう

6 of 42

7 of 42

8 of 42

9 of 42

10 of 42

279文字

11 of 42

494文字

ここから短くしていきます

12 of 42

←① 最初のセットアップ(1回)

←② 毎フレーム描画(ループ)

13 of 42

t: 毎フレーム呼び出し

background: 背景色

bezier: ベジェ曲線を作る

①

②

③

④

①

②

③

④

六角形になるように座標指定

ベジェ曲線を作成

14 of 42

  • let, const, functionの宣言を全部消す

​

  • let, const
    • 無くても宣言できる
    • 再宣言も上書きも出来る

​

  • function
    • アロー関数にすることで変数のように扱う

15 of 42

  • 関数を省略可
    • アロー関数は1行の時returnがいらない

​

​

​

  • 関数,関数式,無名関数,即時関数...
    • 関数にも色々ある
    • thisの扱いで戸惑った方も多いはず

​

  • JSにはシード値が存在しない
    • 一意に定まるランダムな値は自分で作るしかない
    • どのような乱数を用いるかは実行環境依存のため

16 of 42

  • setupを消す
    • createCanvasは1回だけ呼び出し

17 of 42

閑話休題 ～ORの扱いについて～

  • 前がtrueの場合は後ろを見ない
    • pythonも同じ挙動をする
    • 初期値を入れれる理由はそのせい

↑”a”は見てない

18 of 42

  • tは最初は0
    • つまりcreateCanvasが呼ばれる

​

  • その後は0ではない
    • つまりcreateCanvasは呼ばれない

19 of 42

  • 値を変数化
    • 関数の引数内で行う

​

  • =は単純代入演算子
    • ただの演算子なので値が帰ってくる
    • a=b=0みたいなのができるのもそのおかげ

20 of 42

  • 同じ式をまとめる
    • s→vの順でしか呼ばれないのでzは1回しか更新しなくてよい

21 of 42

  • アロー関数の引数の値を用意
    • 引数の用意をするのは勝手なので

22 of 42

  • 関数の引数に処理を突っ込む
    • ワンライナーに出来る

23 of 42

  • スペースを消す

24 of 42

  • 共通化

25 of 42

363文字

26 of 42

つぶやきProcessing Editorを使う

​

  • コードを短くしてくれるすごいやつ
  • 特に改行を消してくれる
  • gifも生成出来る
  • JSはセミコロンorコンマがあるとワンライナーにできる

27 of 42

つぶやきProcessing Editorを使う

​

284文字

28 of 42

つぶやきProcessing Editorを使う

​

284文字

😢

29 of 42

どうしろって言うんだよ～～～

30 of 42

なんか共通化出来そう?

31 of 42

  • 共通化
  • ついでに小数を省略

32 of 42

🤔

33 of 42

閑話休題 ～スプレッド演算子～

  • スプレッド演算子
    • C#に同じものがある
    • pythonだとスター演算子にあたる?

​

  • よく配列の中を展開して新しい配列を作るのに使われる
    • ディープコピーが面倒な時に役立つ

34 of 42

閑話休題 ～スプレッド演算子～

  • 実は引数にも用いることが出来る
    • 残余引数とは違うので注意!
    • 配列の長さは65536個まで!

35 of 42

閑話休題 ～スプレッド演算子～

36 of 42

  • 関数で配列を作ってスプレッド演算子で吐き出す

37 of 42

279文字

🎉

38 of 42

つーいと

39 of 42

つぶやきProcessingの良さ

​

  • 用意するものがない
    • 環境構築もいらない

40 of 42

つぶやきProcessingの良さ (仕事編)

  • 知らない言語仕様を知る機会を得れる
    • 実はJSはCと深い関係が...
  • 数学の知識を無理やり使う
    • sinとかcosとか急に使えない
  • 業務に支障が出る書き方を知れる
    • あらかじめeslintなどで防げる
  • ビルドされたコードを人力逆ビルド出来る

41 of 42

つぶやきProcessingの良さ (仕事じゃない編)

​

  • 少ないプログラムをちょっとの時間で書くだけなので日をまたぐ必要がない
    • ずっと同じものを作り続けなくていいので切り替えがしやすい
  • Processingに慣れることが出来る
    • three.jsやpixi.jsに応用出来る
    • 処理順序やメモリ管理に敏感になる
  • ビジュアルプログラミングにはまる
    • 世の中には「#つぶやきGLSL」とかいう変態タグがあるとか...

42 of 42

つぶやきProcessingをしよう

ご清聴ありがとうございました