Generative Design with p5.js
https://gyazo.com/5b28a9a5f20b5dee4a0757e9560d432c
Generative Design with p5.js - (p5.js版ジェネラティブデザイン) ―ウェブでのクリエイティブ・コーディング | Benedikt Gross, Hartmut Bohnacker, Julia Laub, 深津貴之, 国分宏樹, Claudius Lazzeroni, Benedikt Gross(編著), Hartmut Bohnacker(編著), Julia Laub(編著), Claudius Lazzeroni(編著), 美山千香士, 杉本達應 |本 | 通販 | Amazon Generative Design-Processingで切り拓く、デザインの新たな地平 | Hartmut Bohnacker, Benedikt Gross, Julia Laub, 国分 宏樹, 深津 貴之, Claudius Lazzeroni, 久保田 晃弘, 津留崎 麻子, 安藤 幸央, 杉本 達應, 澤村 正樹 |本 | 通販 | Amazon 始めに
表現者が技術を学ぶには
アーティストがプログラミングを学ぶ時、最大の壁は「技術を習得することの面倒さ」
すでに表現したいものがあるのに、それをプログラミングに落とし込むのに物凄く時間がかかってしまう
それをするくらいなら手書きなりPhotoshopを使った方が早い
学ぶコツ
学習中の技術をテーマに面白い表現を模索したり、小作品を量産する
例
線の引き方を覚えたら、線をテーマにする
繰り返し文を覚えたら、繰り返しを生かした作品を作る
アーティストは技術から新しい表現を模索することが最も簡単な技術の学び方になる
技術者が表現を学ぶには
共通の悩み
何を作っていいか分からない
綺麗にならない
理由
表現技法の欠如
表現活動そのものへの経験不足
これらの問題は、初めのとっかかりと勉強の仕方で解決できる。
学ぶコツ
表現手法をお題と捉えて、そのロジックをコード化していく
コード化、ライブラリ化する例
色彩論理
構図
アニメーション演出
最初はサンプルや検証コードのつもりで作品を制作すると良い
得られるもの
表現技法を体系的に学べる
初めのうちは色彩や構図にメリハリが欠けたものになりがちだが、理論をコード化することで克服できる
エンジニア気質としても、ゴールの曖昧な作品制作を行うよりも、表現を技術として学び遊ぶ方が簡単
ライブラリを公開することで、他の人が代わりに作品を作ってくれる
上達のコツ
とにかく回数を増やすこと
1つの超大作より小さな秀作を数多く、コンスタントに発表していくのがオススメ
はじめてのp5.js
色
HELLO, COLOR
色のスペクトル
カラーパレット
形
HELLO, SHAPE
グリッド
エージェント
エージェントが作る密集状態
縁をぎっしりとつめるアニメーション
onuma.icon 密接した円を配置するためのロジックが個人的には興味深いです
ドローイング
文字
HELLO, TYPE
テキスト
フォントアウトライン
画像
HELLO, IMAGE
切り抜き
画像の集合
ピクセル値
終わりに
ジェネラティブデザインと従来のアプローチとの違い
デザインプロセスが違う
職人芸に変わって、情報と抽象化が主要な要素になっている
「どのように描くか」ではなく、「どのように抽象化するか」という問いが重要になる
アルゴリズムが先にくる
課題
漠然としたアイデアをどのように抽象化するか
そのアイデアをどうすればコンピュータの形式に沿って入力できるか
解決の一つの可能性としては、大きな問題を小さな問題群に分解すること
繰り返し
ランダム
ロジック（条件分岐）
根本的に新たな可能性を切り拓いている
創発
シミュレーション
例：振り子運動するエージェントのような物理シミュレーションを取り入れて複雑な動きを表現する
onuma.icon バイオメカトロニクスのような、生物の構造や運動の力学モデルを参考にするというのもありそう
ツール
例：ブラシの自作