p5.jsのローカルクリエイティブコーディング環境を作ってみた

概要

p5.jsで何かクリエイティブコーディングの作品を作るとなった時に, 多くの人は p5 web editer や openprocessing を用いていると思います.
これらはサクッとwebでアクセスして瞬時に作品を作り始めることができてクリエイティブコーディングへの敷居を下げている要因にもなっていると思います.

ただ, 私のように1つの作品をコネコネして作品を増やしていくタイプだと, たまに作品を複製しないままいじって保存して, あ.....ということが出てきます. (このローカル環境を作るに至った事故でおよそ5回目くらい)

しかも, この記録が残っていないから本当に幻の作品となってしまいます.
ちなみに幻となって映像のみとなったのはこちらです.

そこで, この機会にローカル(mac)でかつ, web editer のように即時的にコードを書けるような環境を作ろうということを目指します.

結論

やったことはこちらです.

1. 用意しておいたテンプレを複製したい
   • .commandファイルで, その日時の名前がついたテンプレのコピーをターミナルから1行で作れるようにする
   • テンプレにはカラーパレットなどなどを入れる
2. 色々と使いがちなものを入れておく
   • よく使うフリー画像や曲, フォントを入れておく
   • ライブラリを入れとく
3. gitにあげる手間を少なくしたい
   • .commandファイルで, gitの操作をまとめる (日時を入れたcommitメッセージ)
4. 細かめなところ
   • アイデアや効率化のメモを入れておく
   • raycastでvscodeをパッと開けるようにしておく

こんな感じでやっています.

1. 用意しておいたテンプレを複製したい

.commandファイルの作成

p5.js には p5-managerという最強のテンプレから複製して作成してくれるのがありますが, 自分はテンプレを変えたい機会が多いなと思ったのと, テンプレも複数用意できるといいなと思いました.
そこで, 同一フォルダ内に用意したテンプレを.commandファイルで動かす形を取っています.

.commandファイルとは, コマンドを一気にいくつも動かせる的なやつみたいです.
前に先輩が教えてくれていたのを少し思い出してやってみました.

gen.command

# 日時を取得
now=`date +%Y-%m-%d-%H-%M-%S`

# テンプレートをコピーしてくる
cp -R templete/basic src/$now
# 作成したjsファイルを開く
code -r src/$now/sketch.js
# live-serverで表示する
cd src/$now
live-server

これを, bash gen.command で実行しています.

やっていることとしてはシンプルで, 基本はコメントに書いた通りです.

日時の取得の部分は, 変数を宣言できるみたいな感じでした.
用意した変数は, $XXXみたいな形で使用できるようです. (全然知識はないです.笑)
ここで取得した日時を, フォルダの名前に使います. (p5-editerのランダムな単語で名前をつける感じも好きだったので名残惜しいのですが；；)

コピーの部分は, フォルダ丸ごとコピーしたいので, -Rをつけます.

live-serverの部分は, こちらの記事を参考にしました.

ここで自分は一応, シンプルなp5のスケッチを作りたい時と, shaderを主に使いたい時用にテンプレートを2つ用意しておきました. (これらの使い分けはうまく実装できてなくて工事中です...)

テンプレにはカラーパレットなどなどを入れる

テンプレートはカラーパレットやイージングなどを入れています.
この辺りはtakawoさんのコードをとっても参考にさせていただきました.

また, カラーパレットにはこちらのサイトのものを主に使わせていただきました.
たまたまこちらのサイトに出会ったのですが, このカラーパレットで作品を作るのが楽しみです.

2. 色々と使いがちなものを入れておく

ここはそんなにたくさん書くことがないのですが, ローカルで作る時ならではの良さだなと思いました.
意外と画像や曲, フォントをとりあえず何か適用してみたい時って多いので, 最近使ったものを入れています.

主に画像はo-dan, 曲はD-elf.comにお世話になりました.

3. gitにあげる手間を少なくしたい

ここがそもそもは大事なところです.
もしやらかしても履歴が残っている状態が欲しいので, gitに細かくpushするようにしたいのですが, これも.commandファイルでサクッとできるようにしました.

git.command

now=`date +%Y/%m/%d-%H:%M:%S`

git add .
git commit -m "${now} save"
git push

上の1でテンプレートを複製した時と同様にして, 日時をコミットメッセージに含めています.
ただ, それ以外はコマンドをまとめただけで特になにもしていません.

あとは細かくあげる癖をつけるまでです...

4. 細かめなところ

raycastを使う

そもそもvscodeをあけるのも早くしたいということで, 私はraycastを使っています.
いわゆるランチャーツールで, 他に似ている有名どころだとAlfredがあると思います.

これで Create Quicklink からフォルダをサクッとvscodeで開くショートカットを作成できました.

改善案やアイデアをメモっておく

また, この記事に書いているような改善できる余地について, マークダウンを作成してメモしていたりもします.
作品のアイデアについてもメモしておくようにしました.

このあたりの良さもあるかなと思います.

最後に

実際にローカルの環境を作ってみると, メインのgitにあげる部分よりも素材やメモなどの作品を作るときの一手間が省けるところがいいなと思いました.

そして, 結局web editerの手軽さには勝てないと思います.

結局, うまく使い分けながらp5.jsを今後も楽しんでいきたいと思います!!