アートコードデザインラボ

デザインツールから一歩先へ：p5.jsで学ぶインタラクティブなベクター描画の基礎

デザイナーのためのクリエイティブコーディング入門：p5.jsでベクター描画を操る

デジタルアートやUI/UXデザインの世界で活躍されている方々は、Photoshop、Illustrator、Figmaといった強力なツールを駆使し、表現の幅を広げてこられたことと思います。しかし、既存のツールでは実現が難しい、より複雑で動的な表現、あるいはユーザーとのインタラクションによって変化するアート作品を自力で生み出したいと感じることはないでしょうか。ツールの制約を超え、自身のアイデアを直接コードで形にするクリエイティブコーディングは、そうした課題を解決し、新たな創造性を解放する強力な手段となります。

本記事では、デザインツールの概念を活かしつつ、p5.jsというプログラミング言語を使ってインタラクティブなベクター描画を学ぶ第一歩を踏み出します。p5.jsは、ビジュアル表現に特化したJavaScriptライブラリであり、デザイナーがプログラミング学習に入る上で非常に親しみやすい設計になっています。

1. デザインツールのベクター概念とp5.jsの描画

IllustratorやFigmaで、図形がパスとアンカーポイントの組み合わせで構成されていることは、多くのデザイナーにとって馴染み深い概念です。この「ベクター」という考え方は、p5.jsでの描画にも共通しています。p5.jsでは、数値によって図形の形状や位置を定義し、それをコードで描画します。

基本的な図形の描画

p5.jsで描画を行うには、まずキャンバスを準備し、色や線の設定を行います。

function setup() {
  createCanvas(600, 400); // 幅600px、高さ400pxのキャンバスを作成
  background(220); // 背景色を灰色に設定
}

function draw() {
  // 線の設定
  stroke(0); // 線の色を黒に設定
  strokeWeight(2); // 線の太さを2pxに設定

  // 塗りの設定
  fill(255, 0, 0); // 塗りの色を赤に設定（R, G, B）

  // 長方形を描画
  // rect(x座標, y座標, 幅, 高さ)
  rect(50, 50, 100, 80);

  // 塗りをなしに設定
  noFill();
  // 楕円を描画
  // ellipse(中心X座標, 中心Y座標, 幅, 高さ)
  ellipse(250, 100, 120, 120);

  // 線の色と太さを変更し、三角形を描画
  stroke(0, 0, 255);
  strokeWeight(4);
  // triangle(x1, y1, x2, y2, x3, y3)
  triangle(350, 150, 400, 50, 450, 150);
}

上記のコードでは、setup()関数で一度だけ実行される初期設定（キャンバス作成、背景色設定）を行い、draw()関数で繰り返し実行される描画処理（図形描画）を記述しています。rect()やellipse()、triangle()といった関数が、Illustratorでツールを使って図形を描くように、コードで具体的な数値によって図形を生成します。stroke()、fill()、noStroke()、noFill()は、それぞれ線や塗りの色、有無を設定し、これはデザインツールのプロパティパネルで色を設定するのと同様の操作です。

2. インタラクティブ性の導入：マウスで図形を動かす

p5.jsの醍醐味の一つは、ユーザーの操作に反応するインタラクティブな表現を簡単に実装できる点です。デザインツールの「アニメーション機能」や「プロトタイピング機能」では、決まった動きを定義することが多いですが、p5.jsではユーザーのリアルタイムな入力に応じて、無限のバリエーションを生み出すことができます。

p5.jsには、マウスの現在位置を常に取得できるmouseXとmouseYという特別な変数があります。これらを利用して、マウスに追従する図形を描画してみましょう。

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220); // 毎フレーム背景をクリア

  fill(0, 100, 200); // 青っぽい色で塗りつぶし
  noStroke(); // 線なし

  // マウスのX座標とY座標に追従する円を描画
  // ellipse(mouseX, mouseY, 幅, 高さ)
  ellipse(mouseX, mouseY, 50, 50);

  // マウスのX座標に応じて幅が変化する長方形を描画
  // rect(x座標, y座標, 幅, 高さ)
  rect(0, 300, mouseX, 50);
}

このコードを実行すると、マウスを動かすたびに円が追従し、画面下の長方形の幅がマウスのX座標に合わせて変化します。これは、draw()関数が毎フレーム（通常は1秒間に60回）実行され、そのたびにmouseXとmouseYの最新の値に基づいて描画が更新されるためです。既存のデザインツールでは、タイムラインを使ったキーフレームアニメーションで実現するような動的な表現を、コードではシンプルな変数の使用によってリアルタイムに実現できます。

3. パスの操作と応用：カスタムシェイプの描画

Illustratorのペンツールのように、p5.jsでも自由にパスを定義してカスタムシェイプを描画できます。beginShape()とendShape()の間にvertex()を使って頂点座標を指定することで、複雑な形状を作り出すことが可能です。

function setup() {
  createCanvas(600, 400);
  noFill(); // 塗りをなしに
  stroke(0); // 線を黒に
  strokeWeight(2); // 線の太さ
}

function draw() {
  background(220);

  // マウスの位置を基準に、星形のようなパスを描画
  beginShape();
  vertex(mouseX, mouseY - 50);
  vertex(mouseX + 20, mouseY - 20);
  vertex(mouseX + 50, mouseY);
  vertex(mouseX + 20, mouseY + 20);
  vertex(mouseX, mouseY + 50);
  vertex(mouseX - 20, mouseY + 20);
  vertex(mouseX - 50, mouseY);
  vertex(mouseX - 20, mouseY - 20);
  endShape(CLOSE); // CLOSEを指定することでパスを閉じる
}

この例では、マウスの位置を中心に、複数のvertex()を繋いで星形のようなカスタムシェイプを描画しています。endShape(CLOSE)を使うことで、最後の頂点から最初の頂点までが自動的に閉じられ、完全な図形になります。ペンツールでアンカーポイントを打っていく作業と、vertex()で座標を指定していく作業は、考え方として非常に似ていることに気づかれるかもしれません。

4. コードによる創造性の拡張：ランダム性と繰り返し

プログラミングでは、ランダムな要素を取り入れたり、ループ処理を使って繰り返しパターンを生成したりすることが得意です。これにより、既存のツールでは労力を要する、あるいは実現が難しいような、予測不能な、あるいは複雑なパターンやアニメーションを簡単に生成できます。

ランダムな円を繰り返し描画する例

function setup() {
  createCanvas(600, 400);
  noStroke();
}

function draw() {
  background(220, 10); // 背景を薄く透明にして残像効果

  // マウスが押されている間だけ円を描画
  if (mouseIsPressed) {
    let r = random(0, 255); // ランダムな赤成分
    let g = random(0, 255); // ランダムな緑成分
    let b = random(0, 255); // ランダムな青成分
    let size = random(10, 50); // ランダムなサイズ

    fill(r, g, b, 150); // 半透明のランダムな色
    ellipse(mouseX, mouseY, size, size); // マウスの位置に円を描画
  }
}

このコードでは、マウスがクリックされている間、ランダムな色とサイズの円がマウスの位置に連続して描画されます。random()関数を使うことで、毎回異なる値が生成され、多様な表現が生まれます。background(220, 10)のように背景を半透明で再描画することで、残像効果が生まれ、よりアート的な表現になります。

また、forループなどの繰り返し構文を使うことで、整然としたパターンからカオスなパターンまで、アルゴリズムに基づいた生成アートを容易に作成できます。

結論：デザインとコードの融合がもたらす新たな表現の可能性

本記事では、p5.jsを使ってデザイナーがベクター描画やインタラクティブな表現をコードベースでどのように実現できるか、その基礎をご紹介しました。既存のデザインツールで培ったベクターグラフィックの概念は、p5.jsにおける描画の理解に大いに役立ちます。

コードによる表現は、ツールのGUI（グラフィカルユーザーインターフェース）に依存しない自由度と、ユーザーとのインタラクションによって変化する動的な作品を生み出す可能性を秘めています。p5.jsは、アーティストやデザイナーがプログラミングの面白さを体感し、創造的なアイデアを形にするための強力な入り口となるでしょう。

今回学んだ基礎を土台として、今後はより複雑なアニメーション、データビジュアライゼーション、あるいは人工知能と組み合わせたインタラクティブアートなど、多様な領域へと応用を広げていくことができます。デザイン思考の観点からは、p5.jsを使ったプロトタイピングは、アイデアを素早く検証し、反復的に改善していくプロセスにおいて非常に有効です。ぜひ、コードの力でご自身のクリエイティブな表現をさらに一段階レベルアップさせてみてください。