「デジクリゼミ」レクチャー④

クリエイティブコーディング

2025/09/11 

高尾俊介 | @takawo

tkwshnsk@gmail.com

今日の目標

1-クリエイティブコーディングを知る

2-コードを「表現手段」として捉える

進め方

• 自己紹介、これまでの活動紹介
• クリエイティブコーディングってなに？
• 歴史や有名な作品の紹介
• コードがどのように表現になるかを知る
• つくるプロセスを体験する
  • アイデアから作品になるまでの流れ
  • 偶然や発見を楽しむ

目次

高尾 俊介

ジェネラティブアーティスト
クリエイティブコーダー

ジェネラティブアート振興財団代表理事

1981年熊本県生まれ、兵庫県神戸市在住。コードを書く行為が持つオルタナティブな創造的価値を探求する活動として、デイリーコーディングを提唱、実践している。代表作として「Generativemasks」、「Flows of Pattern」がある。作品制作と並行して、ジェネラティブアートの教育普及活動に従事している。

自己紹介

自己紹介

高尾のオリジンかもしれない：母のキルト

自己紹介

YCAM Interlab Camp vol.5

ホモ・コーデンス—AI時代、人類はどう描くのか（2024）

https://www.ycam.jp/events/2024/interlab-camp-vol5/

写真提供：山口情報芸術センター [YCAM]

活動紹介

ICC キッズ・プログラム 2024

キミ( ).コード( ).セカイ( )（2024）

https://www.ntticc.or.jp/ja/exhibitions/2024/icc-kids-program-2024-you-code-world/

写真提供：NTTインターコミュニケーション・センター [ICC]

活動紹介

ジェネラティブアート振興財団

第一回ジェネラティブアートアワード受賞作品展

https://generativeart.or.jp/generative-art-award/generative-art-award-winner-2024

活動紹介

たまがわLOOP

ジェネラティブアート ワークショップ（2025）

https://loop.tamagawa-sc.com/tamagawaloop/asp-webapp/web/WWebKozaShosaiNyuryoku.do?kozaId=8088967

活動紹介

クリエイティブ

コーディングって

何だろう?

高尾が考えるクリエイティブ・コーディング

• コードを媒体として用いた、アートとテクノロジーをつなぐ表現の実践

• 課題や機能解決ではなく表現を目的に行う

• 探索・反復・発見（＋共有）が重要

• ジェネラティブアート／ライブコーディング／インタラクティブ作品／Webアプリなど多様な実践が内包

• 他の表現との違い
  • コードの再利用性
  • オープンソース文化（共創）
  • バージョニング（作品の履歴を保存・遡行可能）

クリエイティブコーディング？

コードの再利用と発展の例

Generativemasks / 高尾俊介 (2021)

• ジェネラティブアート + ブロックチェーン（NFT）
• 10,000点の個別の仮面のNFT

コードの再利用と発展の例

Converted originals to 3D models by Ayumu Nagamatsu

3D Printed Generativemasks（2023）

• コードをもとに2Dから3Dモデルを作成
• 3Dプリントの作品を販売

コードの再利用と発展の例

コードの再利用と発展の例

• 低解像度のドットや基本図形を対称配置し、“顔”や“キャラクター性”を見出す実験から始まった。

• 構造は固定しつつ色彩を変化させる仕組みにより、NFTとしてのユニーク性と継続的な発展を実現した。

クリエイティブ ＝ 創造的な表現を主軸とした

コーディング

ふつうとは違ってもOK

クリエイティブコーディング？

保育園のこどもたちを見て絵を描く

クリエイティブコーディング？

クリエイティブコーディング？

「大きな壁に絵を飾りたい」をコンピュータ内で実現する

クリエイティブコーディング？

机から花火を打ち上げる

https://openprocessing.org/sketch/1241678

クリエイティブコーディング？

太宰治の「走れメロス」を疾走させる

https://openprocessing.org/sketch/1241678

クリエイティブコーディングの歴史

• コンピュータアート

• 1960年代〜70年代前半、日本でも計算機×表現の試行が活発化。核は1968年。

• パイオニア群：川野洋（日本初のコンピュータ画像, 1964）／CTG（プロッタ&インタラクティブ, 1966–）／出原栄一（生成的樹木構造, 1973）。

• 高コストな大型計算機とアクセス制約：制作できるアーティスト・研究者が限られた

Re-creation of Kawano's Simulated Color Mosaic by ucnv-seika
川野洋の著作・論考に基づいてアルゴリズムを参照

クリエイティブコーディングの歴史

• ジョン・マエダによるDesign By Numbers（1999年）

• プログラミング未経験のデザイナーやアーティストに向けて「コードで絵を描く」体験を提供すること

• 「数学や工学」ではなく「表現」を入口にしたプログラミング教育の試み

• PCの普及により、より多くの人がコードを用いた表現に参入するきっかけに

クリエイティブコーディングの歴史

Processing / p5.js の登場

• Processing（2001年〜）
  • Casey Reas、Ben Fryによって開発
  • アーティストやデザイナーのための「学びやすいプログラミング環境」
  • 特徴
    • シンプルなコードでビジュアル表現
    • 教育現場やメディアアートで広く普及
• p5.js（2014年〜）
  • Lauren McCarthy によりWeb版Processingとして誕生
  • 特徴  
    • JavaScriptベース、ブラウザ上ですぐ動作  
    • 誰でもアクセスしやすいオープンソース  
    • コミュニティが活発化（世界中で利用）

どのように始める？

1. 環境の準備

• 公式サイトでエディタを開く→ p5.js Web Editor

2. 基本：コードに触れる

• 最初は setup() と draw() を理解するのがポイント
• ellipse, rect, line など基本的な形を描く
• random(), noise() を使って「偶然性」を取り入れる

3. 「小さな遊び」をたくさんやってみる

• お絵かきや簡単なインタラクションに取り組む
  • マウスやキーボードで色や形を変える
    • mouseX, mouseY を使って描画位置を変える
    • keyPressed() で色を変える
• 1つの簡単なスケッチを「ちょっとずつ改造して遊ぶ」

p5.js Web Editor

実際にコードを書いてみよう

https://editor.p5js.org/

参考資料：p5.js 超速入門https://www.dropbox.com/scl/fi/nb020h9u4l70x02l9on7w/p5.js.paper?rlkey=66dsjnmul23tmame7853lzk7y&dl=0

おまけ：コードを改造してみよう

https://openprocessing.org/user/6533/#sketches

どのように続ける？

4. 他の参考にできる学習リソース

• The Coding Train (Daniel Shiffman)YouTubeチャンネル。
  • 初心者〜発展まで丁寧にカバー
• p5.js 日本語リファレンス
  • コピペして試す

5. 続けるコツ

• 「1日1スケッチ」的に、短時間で遊ぶテーマを決める
• SNSやDiscordで共有、他の人のコードや発想に触れる
• 完成品を目指すより「発見」を楽しむ
• 困ったらChatGPTやDiscordでコードを共有して相談、合わせてエラーの解決方法を学ぶ

The Coding Train

p5.js日本語リファレンス

どのように理解していく？

今後のスケジュール