これはProcessing Advent Calender2024の記事です🎉 今年で参加5回目！
This article is part of the Advent Calendar focused on Processing in Japan. The December 10 entry, written by @senbaku, introduces the production environment for creating artworks with P5.js.
もくじ
目次
自己紹介
こんにちは。センバク(@senbaku)です。
OpenProcessing →https://openprocessing.org/user/207560/
twitter(X)→https://twitter.com/senbaku
みなさん、お世話になっております👻
スター・ウォーズと本と珈琲が好きな、クリエイティブコーディングを楽しむ者です。
子どものために買ったmicro:bitがきっかけで、2019年のクリスマスイブにprocessingに出会いました。
最近余り手入れをしていませんが、以前まとめたCreativeCodingおすすめ本リスト(2021~)を公開しています。ぜひご覧ください！
はじめに
今回は、ようこそ、わが家へ！の気持ちでエディターなどの作品制作環境を案内しようと思います。
…というのもわたしが他のクリエイティブコーダーさんにぜひ聞いてみたいのが下記の3点。
- おすすめの本はどれ？
- どんな環境で書いてるの？
- クオリティを上げるための一工夫はどんなの？
ということで、本当は他の方のものが見たいのですが、わたしのも見て！という気持ちでホームツアーをしようと思います。
物理環境
パソコン: Mac book air13インチ
サブモニタ: LGウルトラワイドモニター29インチ
キーボード: HHKB Professional HYBRID Type-S (日本語配列)
マウス: ロジクールのトラックボールマウス
椅子: コクヨのing
エディター
Visual Studio Code(https://code.visualstudio.com/)を使ってコードを書いています。
スケッチの管理は、p5-managerというツールを入れています。(シフマン先生の動画を見てセットアップしました)
9.21: p5-manager – p5.js Tutorial
月ごとにフォルダを作って管理しています。毎月１日に新しいフォルダ作るタイミングが嬉しい。
フォルダとファイル名は下記の様な感じでつけています。
年_月
└ 日_その日の何枚目のスケッチかを表す01~の番号
2024年12月10日の1枚目のスケッチならこんなかんじ。
2024_12
└ 10_01後述のスプレットシートの記録と合わせると、後で探しやすいです。
▼拡張機能
VScodeに、p5.jsのために入れている拡張機能はこれらです。
- beautify：コード整形してきれいな見た目にしてくれる
- p5js Snippets：p5.jsの入力補完してくれる
- Bracket Pair Colorizer：ペアになっている括弧と括弧閉じを色分けしてくれる
- Color Highlight：HEXに色を付けてくれる！
- LiveServer：実行結果を確認するときにつかう
- CodeSnap：コードのスクショを綺麗に撮れる
▼スニペット追加(入力補助)
blendModeのモードを思い出せなくても呼び出せるように、モード名をスニペットに追加しています。
(noteに詳細記事あり→ VScodeでp5.jsのblendModeを楽にする｜senbaku)
▼自作ライブラリ
- マイパレット(色の管理)
気に入ったカラーパレットを保存しておき、ランダムに呼び出して使ったりできるようにしています。(blogに詳細記事あり→ my カラーパレット管理 – senbaku.blog )
- イージング集
イージングをランダムに呼び出して使うために作った、イージング関数を詰め込んだファイル(使いこなせていない😭)
▼便利帳(カンペ帳)
マークダウンファイルで、テンプレートや、よく使うコードをまとめてあります。
↓ プルダウンの中はこんなふうになっています。コピペして使えます。
- 便利帳使い方
たとえば先日の作品ですが、便利帳から３箇所+ palette.js(前述の自作カラーパレット) を組み合わせたものに、ランダム、ノイズ、ラインなどを足して作られています。
なにもアイデアが浮かばなくても、基本のテンプレートに「配置」と「シェイプ」を適当にチョイスして組み合わせると、とりあえずなにかできます。そこから「もっとシェイプを歪ませたいな〜」とか「sin()で動きをつけようかな」「〇〇に見えてきたから、もっと作り込んでみよう」と手を進めていきます。
配置は便利帳にあるもの以外にも、randomGaussian()も大好きでよく使います。
記録
▼動画収録
動画を取りたいときは、ちょっと前はGIPHY Captureを使っていましたが、最近はmacに備え付けQuickTime Playerで画面を収録しています。
▼作品リスト(Googleスプレットシート)
スプレットシートに、日付け、やりたいこと、画像、ファイル名、レファレンス、アップロード先やメモ、みんなまとめておいている。気づいたことや学んだことをメモしておくと後で本当に役に立ちます。
▼ブログ
Senbaku.blog : このブログです。
頑張って調べたことなどは、時折ブログにまとめておきます。たまに役に立つことがあります。
おわりに
以上、作業環境でした！
もしそれいいね！と思う点がありましたら、やってみてください〜。これも便利だよ！というものがありましたら教えていただけると喜びます。
そして、おっ、自分も作業環境お見せするよう〜、という奇遇なコーダーさんいましたらぜひ記事がみたいです！どうかご検討ください…🙏
ではでは、Happy coding ~ 🥳🎉
おまけ
↓便利帳の最後の部分に貼っているvertexチートシートはこちら。もし良かったら保存して使ってください😊
過去のsenbakuのアドベントカレンダーの記事はこちら。
▼2023年
▼2022年
▼2021年
▼2020年
