ﾌﾟﾛｸﾞﾗﾐﾝｸﾞで創るｱｰﾄ
ｼﾞｪﾈﾗﾃｨﾌﾞｱｰﾄの世界へようこそ
講座開始にあたって
- 質問はいつでも・挙手か声をあげてもらってOKです
- 途中で進行を止めてもよいので、一つ一つ着実に進めていきましょう
- 進んだ人はコードを追記したり、書き換えたりしてみてください
- 90分の講座でプログラミングのすべてを理解するのは難しいので、きっかけを掴む気持ちで気軽に取り組んでください
講師について
高尾 俊介
クリエイティブコーダー
甲南女子大学 文学部 メディア表現学科 准教授
一般財団法人 ジェネラティブアート振興財団 代表理事
1981年熊本県出身。クリエイティブコーダー。情報技術を基盤としたプログラムコードによる表現活動と、その方法論の言語化および教育実践を横断的に行っている。人文学と計算的表現を架橋する立場から、コードを単なる技術手段ではなく、思考や感性を媒介する表現メディアとして捉え、制作・研究・教育を一体的に展開している。
- メディア表現学科開講の科目「プログラミングB」ではp5.jsをもちいて創造的なプログラミング手法を学ぶ授業を行っています
プログラムで表現すること
-
プログラミングをした経験、コンピュータを操作して「自分のための何か」を作った経験はありますか？
- 「現実世界で、手や道具を使って何かを作ること」
- 「コンピュータで制作すること」
- 2つの違いについて、考えてみてください
「デジタル」と「アナログ」の制作の違い
-
アナログな制作:素材の物理的な特性や身体動作の痕跡が直接結果に反映される
- 偶発性:物質的条件（摩擦、重力、道具の癖）
- 個別の制作行為が一回的な出来事として成立
-
デジタル制作：結果はプログラムに記述された規則の実行として現れる
- 偶発性:乱数や条件分岐など、記号的に設計された不確定性
- 同一の規則を繰り返し実行可能、作品は「生成されうる集合」として存在
- 作品は単一の完成物ではなく、振る舞いを定義する仕組み
プログラミングを学ぶ意味
-
プログラムを書くこと：手続きを記述可能な形式へ分解する思考訓練
- 曖昧な感覚や印象を条件・反復・関係として整理
- ジェネラティブアート：作者は形を直接描くのではなく、形が現れる規則を設計する
- 「結果の編集」から「過程の設計」へ
-
コンピュータ（計算機）は大量の反復処理と厳密な条件評価を高速に実行できる
- 人間の直感では把握しきれない変化の体系を観察可能に => 規則と知覚の関係を検討
- プログラミング学習：表現・認知・設計の関係を横断的に理解する現代における基礎的リテラシー
ジェネラティブアートとは
ジェネラティブアートとは、アーティストが自然言語による規則、コンピュータプログラム、機械、あるいはその他の手続き的発明といったシステムを用い、それを一定の自律性をもって作動させることで、作品の完成に寄与させる、あるいは作品を成立させるあらゆる芸術実践を指す。 — Philip Galanter, What is Generative Art? Complexity Theory as a Context for Art Theory（2003）
[普及版]ジェネラティブ・アート―Processingによる実践ガイド
ジェネラティブアートの構成要素
- 規則：ルールに基づいて実行される
- 反復：同一の手続きが繰り返し適用される
- ランダム：設計された範囲内で結果が変動する
- 自律：作者の直接操作を離れてシステムが振る舞う
- 過程：完成物ではなく生成過程が作品となる
1.規則：ルールに基づいた実行
コードエディタ
スケッチ1：座標と逐次実行
スケッチの fill(255, 0, 0) の値を変えたいときは、色を選んで上の RGB
をコードにコピーしてください。
スケッチ１の解説
2.反復：手続きの繰り返し
- 繰り返し処理を用いることで、人間が手では描画が難しい高密度・均質な配置を実現できる
- 同一の規則を大量に適用することで、複雑さを表現できる
繰り返し構文（for文）の基本形
// for (初期化; 条件; 更新) {
// 繰り返したい処理
// }
// 例：0〜9まで、合計10回くり返す
for (let i = 0; i < 10; i++) {
console.log(i);
// i は「カウンタ（何回目か）」の変数
// 0, 1, 2, ... 9 が順番に出力される
}
for文を分解して読む
- 初期化 : let i = 0 → 最初に1回だけ実行（スタート値）
- 条件 : i < 10 → true の間だけループ継続
- 本体 : { ... } → 条件が true のあいだ毎回実行
- 更新 : i++ → 1回回るごとに実行（i を 1 増やす）
まずは for 文で 5 つの円を等間隔に並べる例です。
次はグリッド状に円を並べる例です。gridSize
を変えると分割数（密度）が変わります。
再帰：関数が自分自身を呼び、領域を繰り返し半分に分割して描画しています。noLoop()
で 1 回だけ描画するようにしています。
3.ランダム：変動の設計
- 乱数を導入し、実行ごとに異なる出力が生じる状態を設計する
- 無秩序に見える結果も値域・条件・分布によって制御可能な点を確認
random() の基本形（p5.js）
// 0以上1未満
random();
// 最小値〜最大値
random(min, max);
// 配列から選択
random(array);
例：位置をランダムに配置
for (let i = 0; i < 50; i++) {
const x = random(0, width);
const y = random(0, height);
circle(x, y, 10);
}
制御されたランダムへの書き換え
- 範囲を制限する →
random(100, 300) - seed固定 →
randomSeed(1)（再現可能な結果） - 偶然性は「ノイズ」ではなく規則の内部パラメータ
draw() は毎フレーム呼ばれるため、ここでは 1 回だけ描画するように
noLoop() で止めています。
4.自律：システム自身が振る舞うことで生まれる変化
- 要素が内部状態を持ち更新され続ける構造を設計する
- 更新規則のみを与える
各円は位置と速度を持ち、毎フレーム更新されます。端に当たると速度が反転して跳ね返ります。
円同士が重なったとき、距離に応じて速度を入れ替えることで弾性衝突のように見せています。詳しい式はコード内のコメントを参照してください。
最後に：プロセスから作品へ
-
コードを段階的に書き換えることで、作品が一度に作られるのではなく、調整と観察の往復から立ち上がる
- 重要なことは作り手が気づき、試し、反映すること
- 完成形の再現ではなく、振る舞いの範囲を調整し続ける行為そのものに制作がある
参考事例：Generativemasks
補足：コードの利用について
- このページで紹介されているコードは、学習・研究目的で自由に利用できます
- コードを改変して使用することも可能です
- コードの出典を明記していただけると助かります
- 質問やフィードバックは、講師までお気軽にお問い合わせください