自分流「つぶやきProcessing」の作業環境

#つぶやきProcessing について

前回 PCD Tokyo に参加して以来，「つぶやきProcessing」という活動を少し行っています

wgg.hatenablog.jp

つぶやきProcessingは，1ツイートにProcessingのプログラムと，実行結果を載せてツイートします

唐突に #つぶやきProcessing というタグを作ってみる。
— はぅ君 (@Hau_kun) 2019年5月27日

自分もこんな感じで何回か投稿しています

t=i=0,draw=(e=>{if(!t++)for(createCanvas(w=900,w),w/=2,p=[];i<1200;i++)p[i]={x:0,y:0,i:i};for(b of(clear(),blendMode(DIFFERENCE),translate(w,w),rotate(-t/26),p))b.i<6*t&&(scale(1.01),a=PI/3*b.i+t/26,b.x+=2*cos(a),b.y+=2*sin(a),ellipse(b.x,b.y,3))})#つぶやきProcessing #p5js pic.twitter.com/TgZbh8am3u
— WGG (@WGG_SH) 2020年2月26日

t=0;
setup=f=>{createCanvas(w=999,w);p=[];for(i=0;i<6000;i++){p[i]={x:w/2,y:w/2,i:i}}}
draw=f=>{background(0,9);t++;for(b of p){if(t>(b.i/3)){c=b.i;a=c*c/9000+PI/3*2*(c);b.x+=cos(a)*3;b.y+=sin(a)*3;stroke(90);fill(40+30*sin(c/90));ellipse(b.x,b.y,30)}}}#つぶやきProcessing #p5js pic.twitter.com/S1QukNpctU
— WGG (@WGG_SH) 2020年2月6日

1ツイートにプログラムを収める必要があるという点から，度々文字数が足りないという問題に遭遇します
1ツイートは140文字( 半角なら280文字)で，そこにハッシュタグを付けるとなると大体 250文字くらいで作品1つを作る必要があります

というわけで，自分なりにこの問題を少しでもスマートに解決してみました

完成品

この動画です

#つぶやきProcessing で文字数が足りなくなる問題を解消するべく，保存するたびに自動で圧縮+文字数チェックをしてくれるシステムを作ってみました
これで気づいたら「文字数オーバーでツイートできない...！」っみたいな事がちょっと減る...かも？

(こーゆーのって需要あるのかな) pic.twitter.com/XyAGQ8px7w
— WGG (@WGG_SH) 2020年2月22日

この自作環境は，大体↓のような特徴を持っています

ファイルを保存するたびに実行結果が自動でリスタートされる
ファイルを保存するたびに，プログラムの圧縮 (minify) を行ってくれる
ファイルを保存するたびに，圧縮後の文字数を表示してくれる
(それなりに) 補完が効く

この環境を作ったことで，文字数制限に対してかなり書きやすくなりました

環境構築

使用言語

まず，使用するProcessingの種類ですが，完全に自分の好みで p5.jsを使っています

p5js.org

エディタ

テキストエディタは，先の動画では FVimを使っていましたが，基本的にエディタには依存していないのでVSCode でも Sublime でも NeoVim でも Atom でも何でも大丈夫だと思います

github.com

OS

OSはWindowsを使用していますが，Mac / Linux でも問題なく動作するはずです (最低限の依存を用意できれば)

ブラウザ

ブラウザもWebGLが動くなら多分何でもいいです (上の動画では Edge)

事前に用意したファイル

ローカルで動かす関係上，htmlとcssファイルは用意しています

<!-- index.html -->
<!doctype html>
<html lang="ja">

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" href="icon.png" />
  <link rel="stylesheet" href="./style.css">

  <script>
    window.addEventListener("touchstart", function (event) { event.preventDefault(); }, { passive: false });
    window.addEventListener("touchmove", function (event) { event.preventDefault(); }, { passive: false });
  </script>

  <title>つぶやきProcessing</title>
  <script src="js/p5.js"></script>
  <script src="js/main.js"></script>
</head>

<body>
</body>

</html>

一応スマホ対応していますが，そんな重要じゃないので，下の方で p5.js と，自分で書く main.js を読み込んでいるだけです

// style.css
* {
  background: black;
}

.p5Canvas {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

こっちは画面中央にキャンバスを表示する設定です

npm 使う

多分ここがこの環境構築のメインです
node.js と npm を使用しています

nodejs.org
www.npmjs.com

MacとLinuxを使っている人は brew, apt, yum 等々で簡単に入れられると思います

npm のモジュール入れる

以下4つのモジュールを使用しています

npm install browser-sync
npm install onchange
npm install concurrently
npm install minify

package.json

↓みたいな感じです

{
  "name": "p5js",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "sync": "browser-sync start --server --files='./*.html, ./*.css'",
    "minify": "onchange ./js/main.js -- minify ./js/main.js",
    "min": "onchange ./js/main.js -- node ./js/minify.js",
    "start": "concurrently \"npm run sync\" \"npm run min\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "concurrently": "^5.1.0",
    "minify": "^5.1.0",
    "onchange": "^6.1.0"
  }
}

使い方

ターミナルで， npm start を実行すると，ブラウザが開いてコーディングできるようになります
この状態で， main.js を変更して保存すれば，ブラウザが自動でリロードされソースコードの圧縮が行われます

補完について

ここはエディタごとに変わってくるので細かく説明しません
自分の場合， vim-lsp-settings をお借りしました
ただnodeモジュールとしてp5 をちゃんと使ってるわけではないので色々中途半端だったりします，文字数詰めるためにはちょっと仕方ない...
他のエディタを使っている場合，恐らく「〇〇(エディタ名) p5 補完」とかで検索するとそれなりに出ると思います

github.com