Zenn
🕌

p5-managerでCreative Coding環境をつくる

2023/08/04に公開
shell
Processing
p5.js
tech

Tl;DR

  • Creative Codingする時にローカルでさっとやれる環境づくりがしたい
  • プロジェクト名とか考えるのプロトタイピングの時には無駄コストなんで勝手に決めて欲しい

p5-managerをつかって手軽にp5jsでのCreative Codingを始めたい。

とりあえず自分がソース管理してるディレクトリの下にp5jsというディレクトリをつくった。で、ここにnodeをいれてnpm install p5-managerをしようとしたのだが、nodenv install -lしたところ、なんかnodeのリストが古い。そこでanyenv update（この辺参照)してanyenvのアップデートを行う。

nodejs.orgを見に行くと18.17.0が最新のstableみたいなのでそれをとりあえずいれてみる（p5-managerのレポジトリをみても特にバージョンについて記載はない（ようにみえる）。

なので、

nodenv install 18.17.0
cd p5js
nodenv local 18.17.0

node -vしてv18.17.0が帰って来ればオッケー。

で、p5-managerを使うのは基本的にp5jsディレクトリの下（別のところで使う時にはそっちにも同じ手順で環境作る）なので、とりあえずp5-managerを入れたnodeを有効にしてあるディレクトリ配下でインストールする。

npm install -g p5-manager
nodenv rehash

which p5してパスが通ってるのを確認できたら、p5 new creative-codingなどとしてp5jsの環境を用意します。その後、

p5 new creative-coding
cd creative-coding
p5 generate hoge

で、p5jsのプロジェクトが作れます。あとは親ディレクトリからGithubで管理したり、つくったコードをopenprocessingにあげたりすればいいんですが、もう一工夫しておきます。

プロジェクト名をいちいち考えたくない

以下のスクリプトを用意して適当に保存(ここではcreate_p5_project.shとした）。

#!/bin/bash

# Get the current date and time in the format of YYYYMMDD_HHMMSS
DATE_TIME=$(date +%y%m%d_%H%M%S)

# The prefix for the project name
# PREFIX="project_"

# Construct the project name
# PROJECT_NAME="${PREFIX}${DATE_TIME}"
PROJECT_NAME="${DATE_TIME}"

# Now we have a unique project name. Create the project.
p5 generate $PROJECT_NAME

# Tell the user what we did.
echo "Created a new p5 project: $PROJECT_NAME"

chmod +x create_p5_project.shして実行権限を与え echo "alias p5-gen='<your_path_to_scriipt>/create_p5_project.sh'" >> ~/.zshrc してエイリアスをzshrc に登録。

使う時は p5 newでつくった親ディレクトリの中で p5-gen すると、今日の日付とその時の時間でプロジェクトを作ってくれます。一旦ここまで。次はこのプロジェクトをVScodeで実行するところを書く（というか普通にcode ./してカレントディレクトリをVScodeで開いて、LiveServerで実行しながら書けばいいだけ、な気がするけど）。

実際にコーディングする

VScodeのCLIを入れておき、ターミナルでp5 new hogeしたディレクトリの直下（ジェネレートしたプロジェクトの下ではない）に移動して、code ./で、VScodeで開く（ディレクトリ直下をVScodeで開いてればなんでもいい。が一番これが楽だとおもう）。

VScodeにはLive Serverと、p5 snipetsを入れておく。

で、Live Serverを”Go Live"というところをクリックして起動すればWebブラウザで開くので、プロジェクトの下を選択するとp5jsが実行されているとおもいます。あとは、JSファイルを修正して保存するたびにブラウザ側もリロードされるので、Live Reloadが実現されるので便利便利。

ちょっと駆け足になってるけどたいした内容じゃないのでわからないところは各自調べてみてください。

今後の時間があったらやりたい

  • p5jsをTypeScriptで書けるようにしたい。
  • でもこういう書くまでの手軽な距離感は保ちたい。

Discussion