この記事でわかること
- クリエイティブコーディングの基本と、通常のプログラミングとの違い
- Processing・p5.js・openFrameworks・TouchDesignerの得意領域
- 個人ポートフォリオ・展示・商用利用それぞれの成功パターン
- コードでアートを作る面白さを体験する最短ステップ
読了目安: 8分 ／ 最終更新: 2026年4月
プログラミングとアートが交差する領域に「クリエイティブコーディング」がある。コードを書くことで視覚的な表現を生み出す、テクノロジーとクリエイティブの融合を体現する分野だ。
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のエディタを開いて、円をひとつ描くところから始めてみてはどうだろうか。
まとめ——実践に移すために
クリエイティブコーディングの世界は、プログラミング経験の有無を問わず、誰にでも門戸が開かれている。p5.jsやProcessingといったツールは、複雑な環境構築なしにブラウザ上で即座に表現を始められる点が大きな魅力だ。
実践の第一歩として推奨したいのは、既存の作品を模写することだ。OpenProcessingやp5.jsのサンプルギャラリーには数千のスケッチが公開されている。気になった作品のコードを読み、パラメータを一つずつ変えてみる。色相を変える、速度を変える、要素の数を増やす。その過程で、アルゴリズムと視覚表現の関係が体感的に理解できるようになる。
次のステップとして、日常の中で「コードで表現できそうなもの」を探す習慣をつけてみてほしい。雨粒の軌跡、群衆の動き、音楽のリズム。身の回りの現象をアルゴリズムに翻訳する視点が、クリエイティブコーディングの本質だ。
コミュニティへの参加も推奨する。毎日コードでアート作品を投稿する「#Genuary」や「#36DaysOfType」といったチャレンジは、モチベーション維持と技術向上の両方に効く。他の作家の作品に触れることで、自分だけでは思いつかない発想に出会える。
技術とアートの境界は、もはや明確に引くことができない。コードを書くことは、キャンバスに筆を走らせることと地続きの行為になった。あなたの最初のスケッチは、どんな形を描くだろうか。
導入5ステップ
ステップ1: p5.js Web Editorを開く
ブラウザでeditor.p5js.orgにアクセスし、アカウントを作成する。環境構築なしでコードを書き、実行結果を即座に確認できる状態を整える。
ステップ2: 基本の図形描画とインタラクションを書く
createCanvas、ellipse、rect、fillなどの基本関数で円や矩形を描く。mouseX、mouseYを使ってマウスに反応するスケッチに発展させ、draw関数のループ構造を体感する。
ステップ3: 定番アルゴリズムを1つ実装する
パーリンノイズ、パーティクルシステム、フラクタル、ボイドのいずれかを選び、チュートリアルを写経する。The Coding TrainやNature of Codeを教材に、パラメータを変えて表現の幅を確認する。
ステップ4: OpenProcessingで作品を公開する
完成したスケッチをOpenProcessingまたはp5.js Web EditorからURL共有する。X（旧Twitter）で#creativecodingハッシュタグと共に投稿し、コミュニティからの反応を受け取る。
ステップ5: #Genuaryなど毎日投稿チャレンジに参加する
1月のGenuaryや36DaysOfTypeなど、テーマ指定の日次投稿チャレンジにエントリーする。短期間で多くのスケッチを生む運用を通じて、アルゴリズムと視覚表現の対応関係を体で覚える。
よくある質問（FAQ）
Q. 数学が苦手でもできる？
できます。最初は三角関数・ベクトルの基礎だけで十分。徐々に線形代数・確率論を覚えると表現の幅が広がりますが、最初から数学の深い知識は不要です。Q. NFTに出品する価値はある？
市場は冷え込んでいますが、コレクター層は一定数存在。作品を並行して個展・SNS発信することで収入源を多角化するのが現実的です。Q. どこから学ぶ？
The Coding Train（YouTube）、Daniel Shiffman氏のNature of Codeシリーズが世界的に定番。日本語リソースはp5.js Web Editorで即実行できる点が利点です。よくある質問
Q1. p5.jsとProcessingはどちらから始めるべきか？
環境構築の手間を省きたいならp5.jsを推奨する。公式のWebエディタで即座にコーディングが始められ、JavaScriptの知識もWeb開発で応用が利く。重い描画やデスクトップ配布が前提ならProcessingが適している。
Q2. TouchDesignerは独学でも習得できるか？
ノードベースのためコード経験が浅くても入りやすいが、商用案件で使うレベルまで持っていくには公式チュートリアルとコミュニティ参加が前提となる。MIDIや映像信号の知識も並行して学ぶと現場で通用する。
Q3. ジェネラティブアートは商用利用できるか？
各ライブラリのライセンスを確認すれば商用展開は可能である。p5.jsはLGPL、ProcessingはGPL/LGPL、openFrameworksはMITに近い形態で、企業のブランディング映像やNFT作品にも実際に使われている。
