ペンプロッターで紙に刻む計算の軌跡：SVGとvpypeで作る実体アート

画面の中ではどれだけ精緻にレンダリングできても、コードの結果が「そこにある」という手応えが残らない。そんな物足りなさを抱えて、生成した作品を紙とインクの実体として手元に置きたいと考える人は少なくありません。ただ、何を用意し、どこから考え始めればよいのかは見えにくいものです。この記事では プロッターアート の入口として、ペンプロッターの仕組み、ベクターデータの捉え方、制作の流れ、そして展示までを順にたどります。

スクリーンを離れ、紙の上を走るペンの息づかい：プロッターアートという潮流

ペンプロッターは、ペンを保持したヘッドを XY 方向に動かし、紙に線を引く機械です。プリンタが面を埋めるのに対して、プロッターは「線を引く」ことしかしません。その単純さが、コードとの相性のよさにつながっています。

歴史をさかのぼると、1960年代にはゲオルク・ネース、フリーダー・ナーケ、ヴェラ・モルナールといった先駆者たちが、計算機と作図機を使って図形作品を制作していました。ジェネラティブアートが「実体としての線」から出発していたことを、この系譜は思い出させてくれます。いま起きているのは、新しい発明というより、一巡した関心の再訪に近いのかもしれません。

現在は、AxiDraw のような机上で扱えるペンプロッターが広く使われています。DIY で組み立てる人もいます。SNS 上でも、制作途中の動画や、紙に定着した作品の写真が日常的に共有されています。画面上では一瞬で終わる描画が、数十分、ときには数時間をかけて進む。その遅さを鑑賞の対象として楽しむ文化が、静かに育っています。

ピクセルからパスへ：塗りではなく「線順とストローク」で捉える計算の幾何学

p5.js や Canvas の感覚で作ると、まず戸惑うのは「塗れない」ことです。プロッターに塗りの概念はありません。面を表現したければ、ハッチング、同心状の輪郭、ノイズで揺らした平行線といった、線の密度で作ります。濃淡は線の間隔と重なりで生まれます。

もう一つ、画面描画では意識しにくい要素が 線順 です。ペンは物理的に移動するので、どの線をどの順番で引くか、ペンを上げて移動する距離をどれだけ減らせるかが、所要時間と仕上がりを左右します。ベクターデータは座標の集合というだけでなく、「時間の順序を持った軌跡」でもあります。

つまり、プロッターでは描画を「点の配置」ではなく「ペンが歩く経路の設計」として考えます。線が交差するとインクが溜まりますし、同じ場所をなぞれば紙が傷みます。幾何学が、そのまま物質への配慮に変わる。この感覚が、プロッターアートの思想の核にあると私は考えています。

物質がもたらす揺らぎ：インクの滲み、紙の繊維、モーターの振動が生む唯一性

同じ SVG を二度出力しても、二枚の紙はまったく同じにはなりません。ペン先の摩耗、インクの残量、紙の繊維との相性、始点で生じるわずかなインクだまりが、線の表情をそのつど変えます。ステッピングモーターの振動が、細かなぶれとして線に刻まれることもあります。

ジェネラティブアートでは、乱数のシードを固定すれば同じ結果が得られます。再現性は、画面上の作品を支える性質のひとつです。プロッターではその再現性が物質の側で緩やかにほどけます。データは同一でも、作品は一点ごとに異なる。デジタルな複製可能性と、物としての唯一性が、一枚の紙の上で共存します。

ここで注意したいのは、揺らぎを「味」と呼んで安易に肯定しないことです。ペンの選択、筆圧の調整、紙の種類によって、揺らぎの方向はかなり制御できます。偶然を受け入れる範囲と、設計で抑える範囲の線引きが、作家の判断になります。制約をどう読むかが、そのまま作風になっていくでしょう。

制作のワークフロー：Paper.jsやCanvasからSVG出力、vpypeによる最適化まで

基本の流れは次のとおりです。

1. コードでパス(折れ線や曲線)を生成する
2. SVG として書き出す
3. vpype などで線の結合・並べ替え・簡略化を行う
4. プロッター用ソフト(Inkscape の AxiDraw 拡張など)で出力する

ベクターデータを扱うなら、Paper.js は有力な選択肢です。パスの操作や交差判定を備え、project.exportSVG() で SVG に書き出せます。p5.js は Canvas に描く設計のため、SVG 出力には別途ライブラリ(p5.js-svg など)を使うのが一般的です。何を使うにせよ、「描いた結果」ではなく「パスそのもの」を保持できる環境を選ぶのが要点です。

paper.setup(new paper.Size(800, 1100));

for (let i = 0; i < 40; i++) {
  const path = new paper.Path();
  path.strokeColor = 'black';
  for (let x = 0; x <= 760; x += 8) {
    const y = 80 + i * 24 + Math.sin(x * 0.02 + i * 0.3) * 30;
    path.add(new paper.Point(x + 20, y));
  }
  path.smooth();
}

const svg = paper.project.exportSVG({ asString: true });

書き出した SVG は、そのまま出力せず vpype に通します。vpype は Python 製のコマンドラインツールで、プロッター向けの SVG 整備に使われています。

vpype read in.svg linemerge linesimplify reloop linesort write out.svg

linemerge で端点の近い線をつなぎ、linesort でペンの移動距離を短くし、linesimplify で不要な点を減らします。単位の扱いにも注意してください。SVG の px は 96dpi 換算で読まれるため、用紙サイズと座標系の対応を最初に決めておかないと、実寸が合いません。まずは A5 程度の小さな紙で試し、描画時間と線の質を確かめてから大きな作品に進むことをお勧めします。

触れられるコードをどう見せるか：プロッター作品の展示手法とコミュニティの現在地

プロッター作品を展示するとき、見せられるものは完成した紙だけではありません。SVG のデータ、生成コード、シード値、描画の記録映像、使ったペンと紙の情報。これらを並べると、「コードが物質になるまでの時間」を鑑賞者に手渡せます。紙の前で、線の起点や重なりを目で追う体験は、画面では得にくいものです。

実践的な見せ方としては、完成作品の隣で、プロッターを実際に動かす展示があります。動いている最中は、線がまだ存在しない領域を鑑賞者が想像する余白が生まれます。一方で、会場で動かすには、インクの乾燥や機材の騒音、長時間の無人運転といった課題があります。作品の性質に合わせて、記録映像と併用する選択もあります。

コミュニティでは、制作中の写真や動画を共有し、ペンと紙の組み合わせ、vpype の使い方、作品の頒布方法といった情報が交換されています。作品を版数で区切って頒布する作家もいます。データは同一でも、紙の上の線は一点ずつ異なる。その事実を、コレクションの価値としてどう言葉にするかは、まだ模索の途中です。

次の一歩としては、手元の p5.js や Paper.js のスケッチから、一本の線を SVG として書き出すところから始めてください。機材がなくても、vpype で線順を整える過程や、Inkscape で経路を確認する時間が、すでに「物質に向かう思考」の練習になります。紙の上を走る一本の線は、あなたのコードが世界に触れた最初の痕跡になります。