Processing誕生25年：スケッチ思想の原点とp5.jsへの表現の系譜

日々 p5.js でスケッチを描きながら、「なぜ自分はコードで描いているのか」「この表現はどこから来て、どこへ向かうのか」と立ち止まることはないでしょうか。2001年に始まった Processing は、2026年のいま四半世紀を迎えました。この記事では、コードを「絵筆」に変えた発想の原点と、それが p5.js をはじめ現代のクリエイティブコーディングにどう受け継がれているかをたどります。自らの制作を、より確かな歴史と表現の文脈に置き直すための手がかりをお届けします。

黒い画面に引かれた最初の直線：2001年に始まった「美意識と計算」の融和

Processing は2001年ごろ、MIT メディアラボの Aesthetics and Computation Group で、Casey Reas と Ben Fry によって始まりました。指導にあたっていた John Maeda が1999年前後に手がけた Design By Numbers という教育用環境が、直接の先行例として知られています。「数値でデザインを学ぶ」という試みを、より実用的で拡張性のある形に押し広げたのが Processing でした。

当時、グラフィックスをプログラムで描くには、環境構築や言語の作法という高い壁がありました。Processing はその壁を、Java ベースの簡潔な言語と、エディタと実行ボタンだけの小さな開発環境で低くしました。line(0, 0, 100, 100) と書いて実行すれば直線が引かれます。黒でも白でも、画面に最初の線が現れる瞬間は、計算と造形が出会う小さな儀式のようでした。

大切なのは、これが単なる入門用の簡易ツールではなかったことです。作者の二人自身がアーティスト、デザイナーであり、ツールの使い手でもありました。ジェネラティブアートの文脈でも、アルゴリズムを通して形を生む実践が、専門のプログラマーだけのものではなくなっていきます。もちろん、ジェネラティブアートの歴史は Processing 以前から続いています。ただ、その入口を劇的に広げた存在として語られることは多いです。

「スケッチ」という思想：完成を急がず、試行錯誤そのものを慈しむ構造

Processing では、プログラムを「スケッチ」と呼び、保存先のフォルダを「スケッチブック」と呼びます。Processing 公式でも、ソフトウェアのスケッチブックという考え方が説明されています。これは単なる言い換えではありません。コードを、仕様書通りに作る製品ではなく、手を動かしながら考えるための素描として扱うという宣言です。

その思想は、構造そのものに宿っています。

void setup() {
  size(400, 400);
}

void draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

setup で一度だけ準備し、draw が繰り返し呼ばれます。数行で動くものができ、少し書き換えてすぐ結果を見られます。この短いフィードバックのループが、試行錯誤を苦痛ではなく遊びに変えます。完成を急がず、途中の揺らぎや偶然の失敗を作品の素材として迎え入れる態度は、この構造から自然に生まれます。

注意したいのは、スケッチが「雑なもの」を意味しないことです。画家のデッサンが修練の場であるように、コードのスケッチも、考えを深めるための真剣な営みです。私自身、昔のスケッチフォルダを開くと、完成作品よりも途中経過のほうに、当時の迷いや発見が残っているように感じます。

ProcessingからWebへ：p5.jsへの継承と「誰もが表現できる場」の拡張

2000年代後半、表現の舞台はデスクトップからブラウザへ広がります。2008年には John Resig による Processing.js が登場し、Processing のコードをブラウザ上で動かす道を開きました。そして2013年ごろ、Lauren McCarthy が p5.js を立ち上げます。Processing の精神を JavaScript で再解釈するプロジェクトで、これが p5.jsの源流 にあたります。

先ほどのスケッチは、p5.js ではほとんど同じ姿で書けます。

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

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

size が createCanvas になり、型宣言が消えただけです。この近さが、Processing で培われた知識やサンプルを Web へ橋渡ししました。URL を送るだけで作品が共有され、インストール不要で誰かのスケッチを覗けます。ブラウザという場所が、もう一段「誰でも参加できる」状況を作りました。

一方で、p5.js は Processing の単なる移植ではありません。Web ならではのアクセシビリティへの配慮や、初学者向けのエラーメッセージの工夫など、独自の課題意識を育ててきました。Three.js や PixiJS のように性能や表現力を突き詰めるフレームワークと比べると、p5.js は「最初の一歩の優しさ」に重心があります。どちらが優れているという話ではなく、役割が違うのだと考えています。

教育・ツール・コミュニティ：オープンソースカルチャーが育んだ寛容な生態系

Processing を語るうえで外せないのが、2012年に設立された非営利団体 Processing Foundation です。ミッションには、視覚芸術の分野にソフトウェアリテラシーを、技術分野にビジュアルリテラシーを広げることが掲げられています。ツールを作るだけでなく、フェローシップやコミュニティイベントを通じて、多様な人が参加できる場づくりを続けてきた点が特徴的です。

オープンソースアート という言葉が示すように、ソースコードを公開し、読み、改変し、また共有するという文化が、このコミュニティの土台です。Daniel Shiffman の Coding Train のように、学ぶ過程そのものを楽しげに見せる教育実践もあります。書籍では、Casey Reas らによる『Form+Code』が、コードと造形の関係を丁寧に整理しています。openFrameworks や Cinder のような、近い志を持つ兄弟的なツールも生まれました。

さらに視野を広げれば、TouchDesigner のノードベースの環境や、Hydra のライブコーディングも、同じ流れの延長に置いて眺められます。表現手法は異なっても、「試して、見せて、分け合う」という姿勢は共通しています。ただし、これらの系譜を一本の線で結びすぎるのは禁物です。各ツールにはそれぞれの出自と文脈があり、影響関係を単純に言い切れない部分も多いからです。

四半世紀を経て見つめ直す：私たちはなぜ今もコードで表現し続けるのか

生成 AI が画像を一瞬で出力する時代に、手でコードを書いて絵を描くことには、どんな意味があるのでしょうか。私は、Processing が示した「過程を慈しむ」姿勢に、その答えのひとつがあると思います。結果の美しさだけでなく、パラメータを少し動かすと世界が変わる感触や、思いがけない挙動に驚く時間が、創作の核心にあるからです。

コードは、絵筆であると同時に、思考の記録でもあります。数行の関数に込めた選択は、あとから読み返せますし、誰かが受け取って別の形に育てることもできます。ツールが入れ替わり、ブラウザや GPU 環境が変わっても、この「書くことで考える」営みは受け継がれていきます。

次の一歩として、まず自分の古いスケッチを一つ開いてみてください。そこに、あなたなりの「最初の直線」が残っているはずです。続けて、Processing Foundation のサイトや p5.js の公式ギャラリーを歩き、先人たちの試行錯誤を眺めてみるのもよいでしょう。自分の作品を文脈の中に置き直す作業は、次に何を描くかを、静かに教えてくれます。