プログラミングとアートが交差する領域に「クリエイティブコーディング」がある。コードを書くことで視覚的な表現を生み出す、テクノロジーとクリエイティブの融合を体現する分野だ。
Processing、p5.js、openFrameworks、TouchDesigner。これらのツールを使えば、プログラミング経験が浅くても、動的で美しいビジュアル表現を作り出すことができる。
本記事では、クリエイティブコーディングの基礎概念から主要ツールの特徴、そして始め方までを網羅的に解説する。
クリエイティブコーディングとは
クリエイティブコーディングとは、実用的なソフトウェア開発ではなく、芸術的・表現的な目的でプログラミングを行うことだ。
通常のプログラミングが「問題を解決する」ことを目的とするのに対し、クリエイティブコーディングは「表現を生み出す」ことを目的とする。インタラクティブなインスタレーション、ジェネラティブアート、データビジュアライゼーション、ライブパフォーマンスなど、その応用範囲は幅広い。
美術館の展示から、ミュージックビデオの映像、企業のブランディング映像まで、クリエイティブコーディングの成果物は私たちの日常のさまざまな場面に浸透している。
主要ツール・フレームワークの比較
p5.js：Webブラウザで始める最初の一歩
p5.jsは、JavaScriptベースのクリエイティブコーディングライブラリだ。Processingの思想をWeb環境に移植したもので、ブラウザさえあればすぐに始められる。
公式のWebエディタ（editor.p5js.org）を使えば、環境構築不要で即座にコーディングを始められる。初心者にとって最もハードルが低い選択肢だろう。
2Dグラフィックス、アニメーション、インタラクション、サウンド処理など、基本的な機能が揃っている。WebGLを使った3D表現にも対応している。
Processing：クリエイティブコーディングの原点
Processingは2001年にMIT Media Labで誕生した、クリエイティブコーディングのための言語・開発環境だ。Java をベースとしており、p5.jsの元となったプロジェクトでもある。
デスクトップアプリケーションとして動作するため、ブラウザよりも高いパフォーマンスを発揮できる。大量のパーティクルや複雑な3D描画が必要な場合はProcessingが有利だ。
TouchDesigner：ノードベースのビジュアルプログラミング
TouchDesignerは、Derivative社が開発するノードベースのビジュアルプログラミング環境だ。コードを書く代わりに、ノード（機能ブロック）を線でつなぐことでビジュアルを構築する。
リアルタイムの映像処理に特化しており、ライブイベント、インタラクティブインスタレーション、VJパフォーマンスなどのプロフェッショナルな現場で広く使われている。
MIDIコントローラーやKinectなどの外部デバイスとの連携も強力で、フィジカルとデジタルを融合した表現が得意だ。
openFrameworks：C++のパワーを活かすフレームワーク
openFrameworksは、C++ベースのクリエイティブコーディングフレームワークだ。C++の高いパフォーマンスを活かした、大規模でインタラクティブなインスタレーション制作に向いている。
学習コストはp5.jsやProcessingより高いが、コンピュータビジョン、機械学習、物理シミュレーションなど高度な処理を組み込みたい場合に真価を発揮する。
クリエイティブコーディングの始め方
Step 1：p5.jsで基本を学ぶ
まずはp5.jsのWebエディタを開き、基本的な図形描画から始めよう。円を描く、色を変える、マウスの動きに反応させる。小さなステップを積み重ねることで、プログラミングの基礎とビジュアル表現の感覚を同時に養える。
Step 2：アルゴリズムを学ぶ
クリエイティブコーディングの醍醐味は、アルゴリズムから予想外の美しさが生まれる瞬間にある。以下のアルゴリズムは、ビジュアル表現でよく使われる定番だ。
- パーリンノイズ：自然な揺らぎを生む関数。地形生成、煙の表現などに使用
- パーティクルシステム：大量の粒子をルールに基づいて動かす手法
- フラクタル：自己相似的な構造の再帰的な描画
- ボイド（Boids）：鳥の群れのような集団行動のシミュレーション
Step 3：作品を公開する
OpenProcessing（openprocessing.org）やp5.jsのWebエディタでは、作品をURLひとつで共有できる。SNSでの作品公開、#creativecoding のハッシュタグでのコミュニティへの参加も活発だ。
クリエイティブコーディング×AIの可能性
近年、クリエイティブコーディングの領域にもAIが浸透し始めている。
ChatGPTやClaude Codeにp5.jsのコードを生成させ、それを起点にカスタマイズするワークフローが広がっている。プログラミング経験が少ないクリエイターでも、AIの支援を受けながらコードベースの表現に挑戦できるようになった。
また、機械学習モデルをクリエイティブコーディングに組み込む実験も盛んだ。カメラの映像をリアルタイムで解析し、人の動きに反応するインタラクティブアートなどがその好例だ。
コードで表現する楽しさを体験してみよう
クリエイティブコーディングの魅力は、「プログラミングスキル」と「美的感覚」の両方が活きることだ。
エンジニアにとってはアートへの入口となり、デザイナーやアーティストにとってはプログラミングへの入口となる。テクノロジーとクリエイティブの狭間に位置するこの分野は、両者を橋渡しする存在とも言えるだろう。
まずはp5.jsのエディタを開いて、円をひとつ描くところから始めてみてはどうだろうか。
