クリエイティブ・コーディングの新たなプラットフォーム「Pattlas （パトラス）」を使ってみました。
Pattlas では、あなたの p5.js コードに「スライダー」による動的な変数操作を組込み、誰もが簡単に描画結果を変化させ、好みの瞬間を記録・共有できます。
この記事では、Pattlas の魅力と、使い始めるための手順を解説します。
Pattlas（パトラス）では何ができるのか？
Pattlas は、誰もが楽しくクリエイティブ・コーディングできるプラットフォームを目指して Ryota Hagihara （@ryotahagihara）さんにより開発されました。
p5.js のコードを投稿し、コード中の変数の値を動的に変更できるスライダーを簡単に装着できるのが大きな特徴です。
p5.js エディタも装備されており、関数の自動補完機能も使えます。ブラウザのコンソールを用いたデバッグも通常どおり使用できます。
他の人が投稿したコードからフォークしたり、スライダーの設定値（パラメータ）を変更して描画結果とセットで保存することも可能です。
Pattlas（パトラス）の用語
サイト上に出てくる Pattlas 用語をまとめておきます。
| アルゴリズム | コードと、あるパラメータ値のセット |
| パターン | アルゴリズムに特定のパラメータ値を適用した結果（一般に描画結果） |
一つのアルゴリズムから、パラメータを変えることで複数のパターン（描画結果）を生み出せます。アルゴリズムとパターンは「1 対 多」の関係です。
| リポジトリ | アルゴリズムとパターンの保存場所 |
| フォーク | 既存アルゴリズムから派生物を作ること。一般的なフォークと同様の意味。 |
| バリアント | 既存パターンのパラメータ値を変更して作った派生パターン。 |
別パターン作成やバリアント作成の際に変更できるのはパラメータ値だけで、パラメータそのものの追加や削除はできません。別パターン作成とバリアント作成は機能としては似ていますが、どのパラメータ値を元にするかが異なります。
| 別パターンの作成 | 元アルゴリズムのパラメータ値 |
| バリアントの作成 | 派生元パターンのパラメータ値 |
Pattlas（パトラス）の利用手順
アカウントを登録すると、パラメータを変更してパターンの変化を試したり、アルゴリズムの投稿、パターンの作成などを行えます。
アカウント無しで利用できるのはアルゴリズムやパターンの閲覧のみです。
アカウント登録
メールアドレスがあれば登録可能です。
トップページ右上の「ログイン」→「新規登録はこちら」から登録できます。登録の手順は一般的なものなので問題ないでしょう。
登録後のプロフィール画面に「アルゴリズムを作成しましょう！」とありますが、作成はこのページからは行いません。
新規にアルゴリズムやパターンを作成
アルゴリズムの作成は、画面上部メニュー「アルゴリズム」 → 「アルゴリズムを作成」の順に操作します。
パターンの作成は、画面上部メニュー「パターン」 → 「パターンを作成」の順です。
アルゴリズムの作成例
Pattlas ではコードを p5.js のインスタンスモードで書く必要がありますが、エディタにコードのテンプレートが記載されているので心配ありません。
コードは以下 2つのルールを守って書きます。
- p5.js の関数や定数は頭に p. を付ける。
例：p.circle()、 p.TWO_PI - パラメータとして使う変数は頭に params. を付ける。
例：パラメータが speed なら、コード中の変数は params.speed
パラメータ用の設定フォームがあり、入力していくだけで簡単にスライダーを生成できます。
初期値について
数値のパラメータの場合、初期値はスライダー生成直後に一度だけ設定される値です。
アルゴリズム保存時にはその時点のスライダー設定値が保存されますので、初期値は最小値と同じ値にしておけば問題ありません。
最小値、最大値、ステップは後から変更可能です。ステップは最小 0.1 刻みなので、より小さい刻みが欲しい場合はコード中で 0.01 かけて使うなどの工夫が必要です。
コード例と実行結果：パラメータとして「params.speed」を使っています。
p.setup = () => {
p.createCanvas(300, 300);
p.pixelDensity(1);
p.background("Snow");
p.noFill();
p.stroke("DarkBlue");
//p.blendMode(p.DIFFERENCE);
};
p.draw = () => {
const theta = (params.speed * p.frameCount) % p.TWO_PI;
const radius = p.width * 0.4 * p.sin(p.frameCount % p.HALF_PI);
p.translate(p.width * 0.5, p.height * 0.5);
p.circle(
radius * p.cos(theta),
radius * p.sin(theta),
30
);
};
既存のアルゴリズムやパターンからの作成
コードを変更したい場合、変更したいアルゴリズムを選択後に「このアルゴリズムをフォーク」をクリックします。
パラメータを変更したい場合は以下の 3パターンがあります。
- アルゴリズムを選択して「このアルゴリズムでパターンを作成」をクリック
- パターンを選択して「同じアルゴリズムで新しいパターンを作成」 ※アルゴリズムのパラメータ値を保持したい場合、つまり、1. と同じ
- パターンを選択して「バリアントを作成」 ※元のパターンのパラメータ値を保持したい場合
Pattlas（パトラス）で新しいクリエイティブ・コーディング体験を
あらためて Pattlas の魅力をまとめてみます。
試行を加速する
p5.js のコードにスライダーを簡単に追加し、パラメータをダイナミックに操作することで、予測不能な美しい「瞬間」を見つけ出すプロセスが格段に楽しく、速くなります。
「発見」や「驚き」を共有する
あなたが見つけた「最強のパラメータ値」を、コードや描画結果とのセットで「パターン」として保存・公開できるため、単なるコードの共有を超えた「発見」や「驚き」の共有ができます。
創造的参加が容易
アルゴリズムのフォークはもちろん、手軽なパラメータ操作だけでもパターンからバリアントを生み出すことが可能で、クリエイティブ・コーディングの創造性に簡単に、そして深く参加できます。
Pattlas は、新たなクリエイティブ・コーディング体験をひらく可能性を秘めたプラットフォームです。
まずはアカウントを登録し、誰かのパターンを操作して、その楽しさを体感してみませんか？
本解説は 25/11/11 時点のもので、著者（@deconbatch）の主観にもとづいています。正式、かつ最新の情報は公式文書を参照ください。
