リプライで p5.js のプログラムを実行する TwitterBot を Raspberry Pi で作った話
Twitter Bot を作った話
ふと,↓こんなことを思いつきました
TwitterBotで、複数人からプログラムの一部をリプライしてもらい、それを組み合わせて #つぶやきProcessing 作るみたいな遊び考えてたんだけどできるかな
— WGG (@WGG_SH) 2020年5月26日
自分がループ回数を指示して、次の人は色を、3人目は描画する形をそれぞれ渡すって感じで (そもそもプログラムとして成立させられるか怪しい)
それか、予め用意したソースコードの一部を穴埋めしてもらうとかでも良さそう
— WGG (@WGG_SH) 2020年5月26日
ジェネラティブアートの数値をちょっと弄るだけで結果が様々に変化するプロセスを学べる君みたいな感じ
このツイートのうち,後者の方の仕組みでちょっと TwitterBot を作ったので,その仕組とかの話です
作ったbot
bot の遊び方
この bot が呟いてる, #p5js と付いているツイートを探します
// #p5js
— ProcessingBot (@p5_bot) 2020年6月10日
n=Number
P1=Math.max(Math.min(n($1),50),6)
P2=n($2)
P3=n($3)
,setup=(a=>{createCanvas(w=600,w),noLoop(),blendMode(DIFFERENCE),w/=2}),draw=(e=>{for(translate(w,w),i=0;i<P1;i++){for(a of(beginShape(),[0,P2,P3]))a=TAU/P1*(i+a),vertex(w*cos(a),w*sin(a));endShape()}})
このツイートに, $1
$2
のように $
から始まる文字があるので,その個数分数値を入力してリプライを送ります
このツイートの場合, 3つですね
17 4 5
— WGG (@WGG_SH) 2020年6月10日
すると,元のプログラムから $1
$2
... と書かれていた部分が,リプライで送った値に置き換わってプログラムが実行されます
— ProcessingBot (@p5_bot) 2020年6月10日
動画の場合
元となるプログラムが書かれたツイートに, // #p5js mov
と書かれている場合があります
その場合は,実行結果を動画で出力してくれます
// #p5js mov
— ProcessingBot (@p5_bot) 2020年7月24日
n=(a=>Math.min(Math.max(Number(a),50),200)),P1=n($1),P2=n($2)
t=0,draw=(e=>{t++||(createCanvas(w=900,w),blendMode(DIFFERENCE)),noFill(),stroke(255),strokeWeight(5),rectMode(CENTER),rect(w/2,w/2,w*sin(PI/P1*t),w*sin(PI/P2*t))})
80 130
— WGG (@WGG_SH) 2020年7月24日
— ProcessingBot (@p5_bot) 2020年7月24日
この bot を作った経緯
僕自身, #つぶやきProcessing が結構好きで,色んな方が作られた作品を見させていただいているのですが, #つぶやきProcessing に限らずジェネラティブアートでは,わずかなパラメータの違いで見栄えが大きく変わります
元として投稿された作品は色々試行錯誤した結果良いと思ったパラメータを選んでいると思うのですが,Twitter に投稿されるものとしては, 投稿者なりの1つの解 しか見せられないです
そのプログラムにはもっと可能性があるかもしれないのに,たった1つの面しか見られないのは勿体ないと思って, 人のプログラムを簡単に改変して,結果が見られる bot を作りたいと思いました (OpenProcessing など, ソースコードの共有ができるサービスもありますが,Twitter上で実質的なコーディングから実行結果の確認まで完結するのは結構大きな利点だと思います)
他人に改変してもらう力
自分でジェネラティブアートを作っていると, 自分らしさ ,みたいなものができてくると思います. しかし,このbotはそんな自分らしさから,ほんの一部を他人に任せることができます
bot 稼働後から受け取ったリプライの中には,元のプログラムの規則性を破壊するような仕組みを埋め込んだ人もおり,自分で見ていて何度もびっくりさせられました
bot の仕組み (ここから先は技術的な話です)
今回作ったTwitterBot は,すべてこちら↓でソースコードを公開しています
そのため,こちらのリポジトリをcloneして,環境構築だけすれば他のアカウントでもこの bot を動かせるようになっています
また,botのプログラム自体は Raspberry Pi に入れたUbunt上で動かしています.最低限の構成をした小型のコンピュータです (もうちょっといいやり方あるだろうけど,別の用途でも手に入れてたRasPiを使いたかったので)
最新版の Raspberry Pi 4 でも一番安いモデルなら ¥5000 程で購入できます
Twitter API Key の取得
こちらのサイトでTwitter社に, bot 作りたいからAPI Key 発行してくださいとお願いします developer.twitter.com
(ここの工程が一番面倒でした... 慣れない英文書くの苦労する...)
環境構築
README ちょっと更新できていないのですが, nodejs
npm
chromium-browser
imagemagik (convert コマンド)
があれば動くはずです
( convert
使うのあんまり気に入ってないので npm モジュールで完結させたいところ...)
あとは .env_example
に倣って .env
ファイルを作成し,API Key などを入力して, npm run start
を実行すると bot が起動します
bot の実装解説
bot を実行すると, p5-start
twitter-start
と2つのタスクが実行されます
前者は,p5.js のプログラムを走らせることができるローカルサーバの立ち上げで, 後者は Twitter API を実行するプログラムの立ち上げです
p5-start
"p5-start": "browser-sync start --server --no-open --files='./p5js/script.js'",
以前自分のブログの他の記事で書いた方法で,p5.js のプログラムを実行するローカルサーバを起動します ( browser-sync
を使用)
./p5js/script.js
は,後者のタスクでユーザのリプライを受けて作られる p5.js のソースコードです
twitter-start
"twitter-start": "node ./twitter.js",
ここから,メインの nodejs のプログラムです
ファイル構成
bot のプログラムは,以下の構成で成り立っています
- twitter.js
- p5js/
- modify.js
- movie.js
- p5save.js
- p5save-movie.js
twitter.js
TwitterBot としての機能を制御する部分です
一定時間ごとに,自身に向けられたリプライを取得して,まだ返信していないツイートに対してリプライの返信などを行います
昔は User Stream API というのが使用できたので,リプライに反応して即座に返したりすることもできたのですが,今は個人レベルではできないので,他のAPIで代用しています
TwitterAPI の実行回数制限を越えないように, 1分ごと に実行されます.また,最新のリプライを取得すると,1分前の実行でも取得したリプライが再度拾われたりする問題があるのですが, tweet_id
を 保存しておくことで同じツイートに2回反応することを回避しています
( リポジトリの tweet_data/
内に保存されるので bot を運用していると少しずつ膨らんでいきます)
リプライを受け取ると, modify.js
によってソースコードを生成して p5save.js
または p5save-movie.js
で実行結果を取得します
p5save.js / p5save-movie.js
この2つは, puppeteer というライブラリを使い,ブラウザを操作しています
ヘッドレスブラウザを起動し,先に p5-start で立てておいた p5.js が実行されるローカルサーバのページを開くことで,その実行結果の取得まで行うことができます
p5save-movie.js
の場合は少し特殊で,リプライによって作られた script.js
とは別に, movie.js
というプログラムも合わせて実行します
これは p5.js のプログラムの実行速度を固定したり,フレームごとにスクリーンショットを取るなどの処理を行っています
(実行環境によって動作速度に差が出ることが予測されるので)
これで取得された画像・動画を, twitter.js
で受け取ってリプライに添付して返信することで,この Bot の機能が実現されています
終わりに
こんな感じで, TwitterBot を作ってみました
まだまだ不完全で,機能不足な点もありますが少しずつ拡張できたらなあ~といった状態です (割と忙しくてこれの開発に取り組めてない)
一応今後の機能拡張としては, 第三者がこのbotに改変元となるプログラムを提供できるようにする 機能とか追加したいなーって思ってます
自分で作った #つぶやきProcessing の作品のURLを,この bot にリプライなり DM なりで送ると, bot がそのソースコードをツイートしてくれて,他の人がそれを改変できるようになる... みたいなのを想定しています
(ただ自由に呟かせられることになるのでリスクとかが結構ありそうで着手できていない...)
あと, TwitterBot 作ったのは初めてではないのですが,身内向けじゃなく,こうして誰かに使ってもらうために作ってみたのは初めてで,実際に触ってくれる人が居てすごい嬉しかったです