Vera Molnar, De La Serie (Des) Ordres,1974 本日の実習では、まず前回の課題「生成コレクション」の講評会を行います。その後はこの実習の後半のテーマである「生成芸術 (Generative Art)」について解説していきます。こうした生成芸術を生成AIのサポートを受けながら作成する方法について説明し、最終課題を出題します。
スライド資料
本日の内容
前回の課題「生成コレクション」の発表
生成芸術とは? その歴史と発展
生成AIで生成芸術
最終課題について「生成AIと生成芸術」
「生成コレクション」講評会
一人ずつ発表してもらいます
以下の内容を含めて発表してください
作品タイトル
作品のテーマ – どのような意図で画像を集めたのか
画像生成AIを使用した感想
※ 特別選抜で工学デザインプログラムに合格した高校生の見学あり
アンケート:
今回は見学している高校生に回答してもらいます。
工学デザイン実習II (情報メディアデザイン) 最終課題
「生成AIによる生成芸術」
工学デザイン実習IIの情報メディアデザインは、生成AIを活用して生成芸術 (Generative Art) を制作します。まず始めに生成芸術とは何かを解説し、課題制作のヒントとなるような情報を紹介していきます。
課題: 「生成AIによる生成芸術」
生成AIを使用して、生成芸術作品を制作する
p5.jsを用いて制作し、OpenProcessingにアップロードする
コードの作成には生成AIをどんどん活用してください!
スケジュール
(冬休み)
1月6日: 課題制作のヒント2、制作実習、質問受付
1月13日: 休み (成人の日)
1月20日: 講評会
生成芸術 (Generative Art) とは?
映像を視聴
VIDEO
Generative Art Exploration Chapter I Tracing the Roots: The History of Generative Art 生成芸術の定義
Generative art is art made using a predetermined system that often includes an element of chance – is usually applied to computer based art
ジェネラティブ・アートとは、あらかじめ決められたシステムを使って作られるアートのことで、偶然性の要素を含むことが多い。
Tate. (n.d.). Generative art. Tate. Retrieved fromhttps://www.tate.org.uk/art/art-terms/g/generative-art
Generative art is post-conceptual art that has been created (in whole or in part) with the use of an autonomous system.An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.
ジェネラティブ・アートとは、自律的なシステムを用いて（全体的または部分的に）制作されたポスト・コンセプチュアル・アートのことである。この文脈における自律的システムとは、一般的に人間以外のものであり、アーティストが直接決定しなければならないような作品の特徴を、独自に決定することができるものである。
Generative Art. (n.d.). In Wikipedia. Retrieved fromhttps://en.wikipedia.org/wiki/Generative_art
Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.
ジェネレラティブアートとは、アーティストが自然言語のルールセット、コンピュータプログラム、機械、またはその他の手続き的な発明などのシステムを使用し、そのシステムがある程度の自律性を持って作動し、完成した芸術作品に寄与したり、その結果を生み出したりする、あらゆるアート実践を指します。
Galanter, P. (2003). What is generative art? Complexity theory as a context for art theory. GA2003 – 6th Generative Art Conference. https://www.koreascience.or.kr/article/JAKO201732863553069.page
ジェネラティブアートの特徴：ランダムネスとアルゴリズム
ジェネラティブアートは、アーティストが設定したシステムが自律的に動作し、作品を生成するアートの形態だ。このシステムの中心にあるのが「アルゴリズム」であり、そこに「ランダムネス」が組み込まれることで、多様で予測不可能な結果が生み出される
1. ランダムネス（偶然性）
ランダムネスとは、予測不可能でパターンや規則性が見られない事象の性質を指す。ジェネラティブアートにおいては、乱数生成器などを用いて、システムに偶然の要素を導入することを意味する。
コンピュータプログラムにおける乱数生成関数の使用
自然現象（風、水流など）の揺らぎをセンサーで取得し、アルゴリズムのパラメータとして利用
サイコロやコイン投げなど、アナログなランダム性をシステムに組み込む
2. アルゴリズム
アルゴリズムとは、特定のタスクを実行するための、明確に定義された一連の手順やルールのこと。ジェネラティブアートにおいては、アーティストが設計したルールに基づいて、システムが自律的に動作するための「レシピ」のような役割を果たす。
幾何学的なパターンを生成するアルゴリズム
音楽のメロディーやリズムを自動生成するアルゴリズム
画像のピクセルを操作して、抽象的なイメージを生成するアルゴリズム
まとめ
ランダムネスとアルゴリズムは、ジェネラティブアートにおいて相互に補完し合う関係
アーティストが設計したアルゴリズムという「枠組み」の中で、ランダムネスが「揺らぎ」や「変化」をもたらし、予測不可能で多様な作品群が生み出される
この二つの要素の組み合わせによって、ジェネラティブアートは、静的な芸術作品とは異なる、動的で進化し続ける表現が可能となる
Le Random
Le Randomで辿るジェネラティブアートの歴史
Ben Laposky “electrical compositions” (1950)
オシロスコープを使用して、電子機械で生成されるグラフィックの概念を考案
電子機械で生成された最初のグラフィック
Herbert W. Franke “Elektronische Grafik (from the Pendular Oscillogram Series)” 1956
最初の (アナログ) コンピュータ アート作品のひとつ
John Whitney “Vertigo” タイトルシーケンス (1958)
A. Michael Noll “Gaussian Quadratic” (1962)
完全にコンピュータで作成された最初のアート作品のひとつ
AT&Tのベル研究所で制作
Georg Nees “Computergrafik (展覧会)” 1965
CTG “Return To Square (No. 1 in the Metamorphoses Series)” 1966
GTG (Computer Technique Group)
槌屋治紀と幸村真佐男の出会いをきっかけに、1966年12月に山中邦夫と柿崎純一郎を加えた４人（最終的に10名）で結成されたコンピュータ・アート集団
Frieder Nakel “Walk-Through-Raster” 1966
1966 年にComputers and Automation誌で最優秀賞を受賞
ALGOL 60 プログラミング言語と Z64 Graphomat プロッターを使用
Jasia Reichardt “Cybernetic Serendipity” (展覧会) 1968
コンピュータアートの初の国際展、ロンドン現代美術館で開催
参加アーティスト: A. Michael Noll, Frieder Nake, Georg Nees, CTG and Charles Csuri, Nam June Paik, Jean Tinguely, John Cage, Jeanne Beaman, John Whitney, Ken Knowlton など
Vera Molnár “Interruptions” 1968
自身のアルゴリズムによってランダムに配置されたさまざまな角度の直線形状のみで構成
コンピュータを使用して作品を生成する最初の女性アーティストのひとり
Harold Cohen “AARON” 1973
自律描画マシンであるAARONは、AIを使用したアート制作のパイオニア
人間とマシンのコラボレーション
Vera Molnár “(Des)Ordres” 1974
タイトルは、フランス語で「désordres」(無秩序) と「des ordres」(秩序) という2つの意味の言葉遊びを示唆
Karl Sims “Panspermia” 1990
人工生命 (Artificial Life, A-Life)
遺伝的アルゴリズムを使用して、進化する生命体のシミュレーションを行う
William Latham “The Evolution of Forms” 1990
偶然の突然変異と創造的な選択を組み合わせて、非常に複雑で進化し続ける3D形状を生み出す
Kerl Sims “Primordial Dance” 1991
Casey Reas and Ben Fry “Processing” 2001
John Maedaの指導の下、MITのACGでCasey ReasとBen Fryによって作成
クリエイティブ・コーディングを世界に飛躍的に広めた
Casey Reas “Process Compendium Series” 2004 – 20014
Zach Lieberman “Open Frameworks” 2005
The Recode Project
OpenProcessing
スライド資料
本日の内容
生成AI関連のサービスは、ChatGPT、DALL-E、Soraなど主にOpenAIが提供するサービスが有名です。しかし、最近になってGoogleも生成AIの分野で新たな技術を投入し、多くのサービスや実験的なコンテンツを提供しています。本日は、Googleが提供するAI技術の中から、特に生成AIに関連する技術を紹介します。
ちなみに… 前回紹介したMediaPipeもGoogleが提供していました。
Gemini
Googleの提供するAI系のサービスは「Gemini」というブランドで展開されている
12月11日にGemini 2.0として大幅に機能がアップデートされた
Gemini (DeepMind)
まず概要を理解
VIDEO
Introducing Gemini 2.0 | Our most capable AI model yet Gemini 2.0基本機能
Gemini App
OpenAIにおけるChatGPTに相当する機能
様々なモデルが提供されている
Gemini 1.5 Pro
Gemini Advancedの加入者が利用可能。
100万トークンのコンテキストウィンドウを持ち、最大1500ページ分の情報を一度に処理可能。
論理的推論、コーディング、創造的なコラボレーションに優れた能力を発揮。
最新の検索スニペットにアクセスし、知識カットオフがない。
Gemini 1.5 Flash
Gemini 1.5 Pro Deep Research
Gemini 1.5 Proの機能に加え、高度な推論と長文脈理解能力を持つ。
複雑なトピックを探索し、ユーザーに代わってレポートを作成する機能を搭載。
Gemini Advancedの加入者が利用可能。
Gemini 2.0 Flash
開発者や信頼できるテスター向けにリリースされた早期レビュー版。
Gemini 1.5 Flashを基に構築され、同等の高速応答時間を維持しながらパフォーマンスが向上。
テキストと組み合わせた生成画像や、操作可能なテキスト読み上げ（TTS）による多言語音声など、マルチモーダル出力をサポート。
全てのGeminiユーザーが利用可能。
Gemini 2.0 Advanced
Gemini 2.0の高度な機能を利用できるバージョン。
Geminiでコード生成
Gemini 2.0 Advancedでコード生成を試してみました…
生成されたキャラクター (かわいい!?)
Gemini 1.5 Pro Deep Research
強力な調査機能とレポート作成機能
AIエージェントが人間に代わって調査レポートを作成
プロンプトから複数のサイトにアクセスして情報を収集し、レポートを作成
現在は英語での出力のみ
生成されたレポートの例
Google Labs
https://labs.google/ Google Labsは、Googleが開発中の新技術やサービスをユーザーに試用してもらい、フィードバックを収集するためのプラットフォーム
特に、最新のAIツールや技術に焦点を当てている
ユーザーはこれらの実験的なプロジェクトに早期アクセスできます
Google Labs Experiments
ImageFX、MusicFX
VideoFX
GenChess
GenType
Food Mood
Say What You See
TextFX
Google AI Studio
Google AI Studio
Googleが提供する生成AIを試験的に活用できる開発プラットフォーム
生成AIのプロトタイピングや開発を支援
まずは紹介ビデオで概要を理解
VIDEO
Introduction to Gemini APIs and AI Studio
AI Studioの機能
サンプルメディアの使用、Google Driveからのデータアップロード、動画やPDFのリアルタイム分析
デモ内容
動画分析：恐竜の名前とタイムスタンプを取得、楽しい情報付き
コード実行機能：特定の日付の曜日計算やPythonコード実行
検索機能：外部情報をリアルタイムで取得
API活用とモデル調整
Gemini APIキー作成、チューニング可能なモデル作成、コードのエクスポート
AI Studio開発者向け情報
VIDEO
Gemini 2.0 for developers
最新モデルの登場: Googleは最新のマルチモーダル大規模言語モデル「Gemini 2.0 Flash」を発表
多様な入力と出力: テキスト、画像、音声、動画を入力として受け付け、音声や画像の生成も可能
双方向ストリーミングAPI: 「Multimodal Live API」によりリアルタイムの音声・映像で自然な会話が可能
高度なツール利用: Google検索やコード実行機能を活用して、複雑なワークフローを実現
新たな生成能力: テキストと画像の組み合わせやマルチターン編集が可能で、デザインやブレインストーミングに最適
ネイティブ音声生成: 複数言語・アクセントで自然な音声出力を実現、感情や抑揚の細かな調整も可能
性能向上: 1.5倍の速度で動作し、空間認識や物体キャプション性能も大幅に強化
開発者向けリソース: API、Google AI Studio、Vertex AIで試用可能。コード例
最終制作アンケート
引き続き調査中です!
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
この講義「データ構造とアルゴリズムでは」変数と定数、反復、乱数、論理式と条件文、アニメーションとベクトル、配列の操作、関数、そしてオブジェクト指向プログラミングと様々なトピックスを扱ってきました。最終課題はこれらの内容を総動員して、Patatap (https://patatap.com/ ) のようなインタラクティブなオーディオビジュアル作品をp5.jsで制作します。
Patatapはとてもシンプルなインタラクションで構成された作品です。キーボードを操作すると、それぞれのキーにシンプルなアニメーションが割り振られていて、同時にサンプリングされたサウンドが鳴るようになっています。仕組みはとても単純なのですが、キーボードをリズムにあわせてタイピングすることで音と映像が同期して、まるでVJのパフォーマンスをしているような気分を味わえます。キーボードの組み合わせは無限にあるので、いつまでも飽きることがありません。
今回は、最終課題に向け、p5.jsをつかってPatatapを制作するための方法について解説していきます。
映像資料
VIDEO
スライド資料
最終課題提出
最終課題「Patatapを作る」
最終課題制作のオンデマンドの教材を参考にしながら「Patatap 」のようにキーボードからのタイピングで音と映像が同期する作品を制作してください。
投稿したOpenProcessingのURLを提出
投稿の際に sfc24final のタグをつけてください!
締切 : 2025年1月16日 (木)
最終課題提出フォーム
本日のアンケート
(最終課題提出フォームとは別で) 本日の講義に参加した方は以下のフォームに回答してください。
アンケート
今後のスケジュール
2024年12月27日: 最終課題に向けて – Patatapを作る! (予備) + p5.jsを越えて
(冬休み)
2025年1月17日 : 最終課題講評会 (1)
2025年1月24日 : 最終課題講評会 (2)
サンプルプログラム
TouchDesignerのプロジェクトは階層構造を持っています。作成しているプロジェクトの中に複数のオペレーターをまとめた「サブパッチ」のような構造を作ることが可能です。複数のオペレータをまとめるにはContainer COMPを使用します。Container COMPは、複数の入力と出力を設定したり、他のオペレータの値を参照することが可能です。さらに、このContainerの仕組みを応用してGUI (グラフィクスユーザーインターフェイス) が作成できます。Widgetというユーザーインターフェイスに特化したCOMPを使用してボタンやスライダーといった様々なパーツを組合せて独自のGUIを構築して画面上に配置したり、別ウィンドウで表示することが可能です。
スライド資料
サンプルファイル
本日の課題
今回の講義資料およびサンプルプログラムを参考にして、TouchDesignerのGUI機能を使用したプログラムを作成してください。※簡単なもので構いません!
課題提出 + アンケート
本日の課題の提出は下記から行ってください。
課題提出 + アンケート
前回、前々回とTidalCyclesの様々な機能について学んできました。セットアップと起動の方法、パターン生成の基本、パターンを変形する様々な関数、エフェクト、テンポ、乱数、コード、スケールなどTidalCyclesではライブコーディングに関する膨大な機能を使用することが可能です。今回は、これまでの内容を総合して、TidalCyclesで演奏のための構造をつくるにはどのようにすれば良いのか、そのヒントとなる実例をいくつか取り上げます。今回紹介する方法が全てではありませんが、実際のライブコーディングの演奏の際のヒントとなるでしょう。
スライド資料
試しにアップロードするサウンドサンプル “uni”
サンプルコード
TidalCycles
do
d1
$every 4 (rev)
$sometimesBy 0.2 (slow 2)
$sometimesBy 0.8 (jux (iter 8))
$stack
[
sound "ifdrums(3, 8, 0)",
sound "bd(3, 8, 3)",
sound "glitch(2, 8)"
]
#n (irand 64)
#pan (rand)
#lpf (rangex 800 18000 $slow 4 $sine) #resonance "0.2"
#delay "0.3" #delaytime "1.125" #delayfeedback "0.5" #lock 1
#gain "1.3"
d2
$sometimesBy 0.3 (jux (rev))
$sometimesBy 0.2 (slow 2)
$s "supersaw(3, 8)"
#note "c4'sus4"
|+| note "[0, 7][7, 14][14, 21][7, 0]"
|+| note "[0, 7, 12]"
|+| note "0"
#lpf (range 1000 8000 $rand) #resonance "0.2"
#sustain "0.08"
#gain "1.0"
#room "0.1" #size "0.4"Strudel
$: s("bd(4, 8), hh(4, 8, 1)").bank("RolandTR909")
$: stack(
s("conga(9, 16), bongo(9, 16, 3)")
.sometimesBy(.1, x=>x.slow(2))
.n(irand(9)).gain(1.5),
s("bd(3, 8), hh(5, 8, 1), rim(4, 8, 3)")
.bank("RolandTR808").gain(1.8)
)
.sometimesBy(.5, x=>x.jux(rev))
.delay(0.5).delaytime(5/8)
$: stack(
s("supersaw(9, 16)")
.n("[-12, 1, 2, 3, 4]")
.chord("<Am Am9>/4").voicing()
.legato(0.8)
.lpf(sine.slow(16).range(1000, 2000)).resonance(15),
s("supersaw(5, 16, [0, 5])")
.n(irand(19).add(-8))
.scale('A2 minor')
.jux(rev)
.legato(0.5)
.lpf(sine.slow(12).range(1000, 8000))
.resonance(15)
)
.delay(0.5).delaytime(1/8)
.room(0.5)
.gain(0.5)アンケート
本日の講義を履修した方は以下のアンケートに回答してください。
※ 旧カリ「サウンドプログラミング」「環境情報デザイン」で履修の方はこちら
本日の実習では、まず前回の課題「生成コレクション」の提出を行います。その後、生成AIと創造性についての動画を視聴し生成AIがもたらす可能性と問題について考えます。その後、生成AIを使ってp5.jsでプログラミングを行います。最後に、最終課題について説明します。
スライド資料
本日の内容
前回の課題「生成コレクション」の提出
AIと創造性
生成AIでプログラミング
実習: 生成AI + p5.jsで「顔」を描く
最終課題について「生成AIと生成芸術」
前回の課題「生成コレクション」の提出
以下の手順で提出してください。
figma.com にアクセスしてログインレイアウトした「生成コレクション」を開く
画面右上の「共有」ボタンをクリック
表示されるポップアップ画面の「リンクをコピー」をクリック
コピーしたURLを下記のフォームに貼り付けて提出
https://x.gd/My4pG
未提出の人は今週中に必ず提出!! 絶対!!
課題未提出のままだと落第します。
「生成コレクション」の発表と講評
来週(12/23)、一人ずつ発表してもらいます
特別選抜で工学デザインプログラムに合格した高校生の見学あり
以下の内容を含めて発表してください
作品タイトル
作品のテーマ – どのような意図で画像を集めたのか
画像生成AIを使用した感想
アンケート: 今回もMentimeterでアンケートを実施します!
AIと創造性
「AIと創造性に関する」2種類の動画を視聴
How This Guy Uses A.I. to Create Art | Obsessed | WIRED
VIDEO
AI Art: How artists are using and confronting machine learning | HOW TO SEE LIKE A MACHINE
VIDEO
生成AIによる創作に対するよりクリティカル(批判的)な視点
参考資料
Refik Anadole, Unsupervised — Machine Hallucinations — MoMA (2023)
KATE Crawfordt, Trevor Paglen, Training Humans
VIDEO
Trevor Paglen, Behold these Glorious Times! (2020)
Kate Crawford, Vladan Joler, Anatomy of an AI System (2018)
Kate Crawford, Vladan Joler, Calculating Empires: A Genealogy of Power and Technology, 1500-2025
ここまでのポイント
生成AIの技術はとても強力で新たな表現を生みだす可能性に満ちている
しかし、その背後には様々な問題も存在する
データの偏り
巨大企業による独占
大量なエネルギーの消費
プライバシーの問題
著作権侵害のリスク
フェイクニュース
AIのブラックボックス化
生成AIを完全に拒否するわけではない
しかし無批判に全て受け入れるのでもない
生成AIの利便性を享受しつつ、その問題や構造について批判的に考えていきたい
そのためには、生成AIの技術について正確なイメージを持つ必要 (!= 魔法)
生成AIでプログラミング
コーディングの題材: p5.jsの簡単な紹介
p5.js は、プログラミング初心者でも簡単に使えるJavaScriptのライブラリProcessingのJavaScript版
画面上に図形を描いたり、アニメーションを作ったりできる
公式サイトには多くのチュートリアルやリファレンスがあり
活発なコミュニティによるサポート
生成AIの力を借りて、p5.jsでプログラミングをしてみよう
p5.jsでどんなことができるのか – OpenProcessing
https://openprocessing.org
p5.jsを用いたプログラムをオンラインで作成・共有できるサービス
世界中のクリエイティブコーダーが作成した作品がソースコードを含めて閲覧できる!
簡単なプログラム例
function setup() {
// 画面全体にキャンバス作成
createCanvas(windowWidth, windowHeight);
}
function draw() {
// 背景をグレーに
background(220);
// 円を描く
circle(width / 2, height / 2, 400);
}※ 現段階では全く意味が分からなくてOK!
実行結果
このようなプログラムをAIの力を借りて生成してみましょう!
AIによるコーディング 1 : ChatGPTに質問する
おそらく最も手軽に始められる方法
ChatGPTにコーディングの質問をするだけ
例:
ブラウザの画面中央に円を描くプログラムを作りたいです。どのようにすればよいでしょうか？表示領域はフルスクリーンにしてください。使用する開発環境は、p5.jsを使用してください。
ChatGPT 4oに質問してみました。
p5.js を使用してブラウザの画面中央に円を描くプログラムを作成するには、以下のようにコードを書きます。p5.jsは簡単にキャンバスを作成し、グラフィックを描画できるライブラリです。
以下は、フルスクリーンのキャンバスに円を描くシンプルなコードです。
プログラム例
function setup() {
// ウィンドウサイズに合わせてフルスクリーンキャンバスを作成
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(220); // 背景色（薄いグレー）
// 円の色を設定
fill(100, 150, 255); // 青系の塗り色
noStroke(); // 円の境界線をなしに
// 画面中央に円を描く
let centerX = width / 2;
let centerY = height / 2;
let diameter = 100; // 円の直径
ellipse(centerX, centerY, diameter, diameter);
}
function windowResized() {
// ウィンドウサイズが変更されたとき、キャンバスを再調整
resizeCanvas(windowWidth, windowHeight);
}コードの説明
setup 関数
createCanvas(windowWidth, windowHeight) を使って、ブラウザウィンドウ全体をキャンバスとして利用。
draw 関数
background(220) で背景を塗りつぶし、リセット。ellipse(centerX, centerY, diameter, diameter) を使い、画面の中心に直径 100 の円を描画。
windowResized 関数
ウィンドウサイズが変更されたときにキャンバスのサイズを自動調整。
実行手順
p5.js Webエディタ を開きます。上記のコードをコピーペーストします。
「再生」ボタンを押すと、ブラウザ画面全体に円が表示されます。
必要に応じて円の色やサイズを変更してみてください！
実行結果 (完璧!!)
実習: ChatGPTによるコード生成を試してみる
ChatGPTにp5.jsで生成したいコードをリクスト
冒頭で「p5.jsで」などと制作環境を指定すると良い
生成されたコードをp5.js Web Editorにコピー&ペースト
コードを実行してみる
AIによるコーディング 2 : AI機能を搭載したエディターを使う
もっと高度な機能を利用したい!
よりインタラクティブに生成結果をみながらAIのサポートを受けたい
エラーが発生した際にもAIに助けて欲しい
あらかじめ作成したコードをAIに改良して欲しい
p5.CodingWithAIを使ってみる
https://app.kyabe.net/p5-coding-with-ai/ ChatGPTとの連携機能を搭載した自作のp5.jsのWebエディタ
きゃべ / Masaya Kurahashiさん作
ユーザーが自然言語でAIにリクエストを送信すると、AIが解説とともにリクエストに合わせたコードを提案する。
提案されたコードを基にユーザーが工夫を凝らし、作品を創作することで、人間とAIの共創の実現性を探求。
詳細な使用方法は、実際にデモをしながら解説していきます!
ちなみに先程と同じChatGPTにした質問をp5.CodingWithAIに送ってみました
実習: p5.CodingWithAIでコード生成
最初にプロンプトから基本となるコードを生成
質問をくりかえしながら、徐々に自分の好みの生成結果に近づけていく
提案されたコードを受け入れるかは、その都度吟味する
最終的にどのようなコードが完成するのか!?
参考: AIによるコーディング 3 : さらに高度なAIとの連携
Github Copilotを使用してみる
※ この方法は環境設定やユーザー登録などが少し難解なので必須ではありません。興味のある方はぜひ挑戦してみてください!
GitHub Copilotは、OpenAIのCodexを基盤としたAIペアプログラミングツールである。主にプログラマーのコード作成を支援することを目的としており、エディタ内でリアルタイムにコード提案を行う。コード補完、関数生成、コメントからのコード生成など、多様な支援機能を備える。主要なIDEやエディタ（Visual Studio Codeなど）に統合可能で、多言語対応であることも特徴である。効率的なコーディングを実現し、初心者から上級者まで幅広いユーザーに対応するツールである。
https://github.com/features/copilot
GitHub Copilotの主な機能
コード補完 ：開発者がコードを入力する際、次に来るであろうコードを予測し、提案する。関数生成 ：関数名やコメントから、対応する関数のコードを自動生成する。コメントからのコード生成 ：自然言語で記述されたコメントを基に、対応するコードを生成する。多言語対応 ：Python、JavaScript、TypeScript、Rubyなど、複数のプログラミング言語に対応する。主要なIDEとの統合 ：Visual Studio Code、Visual Studio、Neovim、JetBrains製品など、主要な統合開発環境と連携可能である。
テストコードの生成 ：既存のコードに対するテストコードを自動的に生成し、テストの効率化を支援する。コードのリファクタリング提案 ：既存のコードに対して、より効率的な書き方や改善点を提案する。プルリクエストの概要作成 ：プルリクエストの変更内容を分析し、その概要を自動生成する。チャット機能 ：開発者が自然言語で質問や指示を入力すると、AIが適切なコードや情報を提供する。マルチモデル対応 ：Anthropic、Google、OpenAIなど、複数のAIモデルを選択して利用できる。
Github Copilotを使用するための事前準備
使用のための手順
Githubへのユーザー登録
Github Copilotのトライアル版登録
Visual Studio Codeのインストール
Visual Studio Codeの環境設定
環境設定が完了するとVSCodeとGithub Copilotが統合された最強のコーディング環境が実現されます!
生成された「かわいいキャラクター」!
Github Copilotを使用したコード生成
詳細は、ハンズオン：AIを使ったコード生成 (YCAMワークショップ 2024) の資料を参照してください
実習! : 生成AI + p5.jsで「顔」を描く
生成AIを使って、p5.jsで「顔」を描くプログラムを作成
作成する方法は自由
ChatGPTで質問してコードを生成
p5.CodingWithAIを使ってコードを生成
Github Copilotを使ってコードを生成
「かわいい顔」「リアルな顔」「笑顔」「悲しい顔」などいろいろな顔の生成に挑戦してみましょう!
Media Pipe – Face Landmark Detection
本日の内容
今回はこの講義の最終課題制作のためのヒントの3回目として、最新の機械学習のライブラリーとその活用方法について紹介します。
今回は2つのライブラリーを紹介します。
MediaPipe: Googleが提供するオープンソースの機械学習ライブラリー
ml5.js: 一般的な機械学習モデルを簡単に利用できるJavaScriptライブラリー
今回はソースコードの詳細な解説までは行いませんが、それぞれのライブラリーを活用してどのような作品が制作できるかを紹介していきます。
スライド資料
MediaPipeは、Googleが提供するオープンソースの機械学習ライブラリで、リアルタイムな画像や動画処理を効率的に行うためのツールです。
MediaPipe ソリューション ガイド (Google)
多機能なビジョンタスク対応 : 顔検出、手のランドマーク推定、ポーズ推定、物体検出など、さまざまなビジョンタスクをサポートしています。リアルタイム処理 : 軽量設計により、リアルタイムでのデータ処理が可能で、インタラクティブなアプリケーションの開発に適しています。マルチプラットフォーム対応 : Windows、Linux、macOSなどのデスクトップ環境だけでなく、AndroidやiOSなどのモバイルプラットフォーム、さらにはWebブラウザ上でも動作します。
複数言語サポート : Python、C++、JavaScriptなど、さまざまなプログラミング言語で利用可能で、開発者は自身のプロジェクトに適した言語を選択できます。モジュール化された設計 : 各機能がモジュール化されており、必要な機能を組み合わせて柔軟にパイプラインを構築できます。オープンソース : ソースコードが公開されており、コミュニティによる改善やカスタマイズが可能です。
MediaPipeでどのようなことができるのか、GoogleではWeb上ですぐに試すことができるデモを公開しています。その内容を見てみましょう。
Object Detection (物体検出)
Image Classification (画像分類)
Image Segmentation (画像セグメンテーション)
Hand Landmark Detection (手のランドマーク検出)
画像や動画内の手とそのランドマーク（キーポイント）を検出
デモ
Face Stylization (顔のスタイル変換)
画像内で検出された顔をカートゥーンやアニメ顔といったスタイルに変換
デモ
Face Detection (顔検出)
Face Landmark Detection (顔のランドマーク検出)
顔のランドマーク（キーポイント）を検出
バーチャル試着や表情を模倣するバーチャルアバター作成に利用可能
デモ
Pose Landmark Detection (ポーズのランドマーク検出)
MediaPipeでは、Web、Python、Android、iOSと用途にあわせてさまざまなプラットフォームで利用可能
一部のソリューションではモデルをカスタマイズすることも
詳細: MediaPipe ソリューション ガイド
Face Mesh: 顔のランドマーク検出
ml5.js
MediaPipe
MediaPipeはとても高機能かつ様々なプラットフォームで利用可能
ただし、高度な機能を使うためにはそれなりのプログラミングスキルが必要
別のアプローチ – ml5.js
ml5.jsは、機械学習のモデルを簡単に利用できるJavaScriptライブラリー
p5.jsとの親和性が高く、クリエイティブコーディングに適している
ml5.jsについて
ml5.jsでできること
BodyPose：全身のポーズ推定
HandPose：手の骨格と指の追跡
FaceMesh：顔のランドマーク検出
ImageClassifier：画像内容認識
SoundClassifier：音声の検出と分類
NeuralNetwork：独自のニューラルネットワークを訓練可能
ml5.js + Hand Pose
ml5.js + Face Mesh
ml5.jsでどんなことができるか
Fece meshを使用
Pose Detcetionを使用
Hand Poseを使用
おすすめ学習リソース
A Beginner’s Guide to Machine Learning in JavaScript with ml5.js
NYU ITPのDaniel Shiffmanによるml5.jsの入門ガイド
ml5.jsの基本から応用までを学べる
応用: TouchDesignerでMediaPipeを利用する!
TouchDesignerからのMediaPipeの利用は、Bryan Wai-ching CHUNG さんによる素晴しいサンプル集があります! ダウンロードして試してみましょう。Python 3.9系でMediaPipeが正しくインストールされていれば、そのまま利用できるはずです。
応用することで、下記のようにFaceMeshを使用した3Dサーフェスの合成なども可能になります!
最終制作アンケート
この講義ではここまで解説してきた生成AIの技術と自分自身の専門性を生かした作品制作を行い、その成果をAMCのギャラリーで展示します。どのような作品を制作する予定か下記のアンケートに記入してください。※まだ最終の確定版でなくても構いません
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
今回も前回に引き続き、p5.jsによるオブジェクト指向プログラミング (OOP) について学んでいきます。
今回は、オブジェクトを生成する際に実行される初期化のための関数であるコンストラクター (constructor) に注目します。ここまでやってきたようにコンストラクターはオブジェクトが初期化 (インスタンス化) される際に自動的に実行されます。つまりクラスの初期化関数として機能しています。インスタンス化は以下のように行ってきました。
let object = new ClassName();クラス名の後に () があるところに注目してください。クラス側で設定することによってインスタンス化の際にコンストラクターの引数としてパラメータを受け取ることが可能です。つまり以下のようになります。
let object = new ClassName(arg1, arg2, arg3...);こうすることで、クラスからオブジェクトを生成する際に引数の値によって様々なバリエーションのオブジェクトを生成することが可能となります。1つの工場 (= クラス) から、様々なバリエーションの車 (= オブジェクト) を生成するイメージです。
実際にp5.jsのコードを動かしながら、インスタンス化とコンストラクターについて理解していきましょう。
映像資料
VIDEO
スライド資料
本日のスタートポイント
本日の課題
1つのクラスから複数のオブジェクトを生成して表現してください。
クラスのコンストラクタの引数からパラメータを読み込み
様々なバリエーションのオブジェクトが生成されるように
本日作成した「Blob」クラスの例を参考にしてみてください!
投稿したURLをアンケートから提出
投稿の際に sfc241213 のタグをつけてください!
締切: 2024年12月19日(水)まで!
今回も、前回の提出作品の人気投票を行います!
前回のタグ sfc241206 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
課題提出フォーム
サンプルコード
コード（和音）は、複数の音が同時に鳴り響く音の組み合わせであり、音楽の調和や感情を生み出す重要な要素です。基本的なコードは、音階（スケール）の特定の音を組み合わせて作られます。例えば、Cメジャースケール（ド・レ・ミ・ファ・ソ・ラ・シ）を基に、1番目（C）、3番目（E）、5番目（G）の音を重ねることでCメジャーコードが形成されます。
一方、スケール（旋法）は、特定の音階に基づいた音の並びであり、音楽の「枠組み」や「雰囲気」を決定します。メジャースケール（長音階）は明るく、マイナースケール（短音階）は暗く感じられる特徴を持ちます。また、モード（教会旋法）など多様なスケールが存在し、それぞれ独自の個性を持っています。
TidalCyclesやStrudelでは、コードネーム (コードの名前) やスケールネーム (旋法の名前) によって和音やスケールを構成する音列を取り出すことが可能です。この機能を使用することで、和音やスケールを指定してその枠組みの中で即興演奏を行うことが可能となります。
参考:
VIDEO
VIDEO
スライド資料
アンケート
本日の講義を履修した方は以下のアンケートに回答してください。
※ 旧カリ「サウンドプログラミング」「環境情報デザイン」で履修の方はこちら
サンプルコード
TidalCycles
-- TidalCycles 応用3 - コード (和音) とスケール (旋法)
-- 同時に音を鳴らす
d1
$ s "superpiano*4"
# note "[c, e, g]"
-- コード (Chord = 和音) ---------------------
-- コードを演奏する
d1
$ s "superpiano*4"
# note "c'maj"
-- いろいろなコードを試してみる
d1
$ s "superpiano"
# note "<c'maj f'maj g'maj c'maj>"
-- よりきれいにボイシング
d1
$ s "superpiano"
# note "<c5'maj f4'maj'ii g4'dom7'ii c5'maj'i>"
-- カノン進行
d1
$ s "superpiano*2"
# note "<c'maj g'maj a'min e'min f'maj c'maj f'maj g'maj>"
-- カノン進行よりきれいにボイシング
d1
$ s "superpiano*2"
# note "<c4'maj'ii g4'maj a3'min'ii e4'min f4'maj c4'maj f4'maj g3'dom7'iii>"
-- 王道進行 (J-Pop風?)
d1
$ s "superpiano*4"
# note "<f'maj7 g'dom7 e'min7 a'min>"
-- 王道進行アンサンブル
do
d1
$ s "supersaw(11, 16)"
# note "<f5'maj7 g4'dom7'ii e5'min7 a4'min'ii>"
# lpf (range 2000 8000 $ slow 16 $ sine)
# resonance 0.2
# room 0.5 # size 0.8
d2
$ s "supersaw(9, 16)"
# note "<f2 g2 e2 a2>"
|+ note "<0 12>*8"
# lpf (range 1000 8000 $ slow 12 $ sine)
# resonance 0.2
# gain 1.5
d3
$ s "[bd(3, 8), hc(4, 8, 1)]"
# gain 1.5
-- 王道進行アンサンブル + 分数コード
do
d1
$ s "supersaw(11, 16)"
# note "<f5'maj7 g4'dom7'ii e5'min7 a4'min'ii>"
# lpf (range 1000 8000 $ slow 16 $ sine)
# resonance 0.2
# room 0.5 # size 0.8
d2
$ s "supersaw(9, 16)"
# note "<f2 e2 d2 c2>/2"
|+ note "<0 12>*8"
# lpf (range 1000 8000 $ slow 12 $ sine)
# resonance 0.2
# gain 1.5
d3
$ s "[bd(3, 8), hc(4, 8, 1)]"
# gain 1.5
-- カノン進行 (クリスマス!)
do
d1
$ s "superpwm*2"
# note "<c4'maj'ii g4'maj a3'min'ii e4'min f4'maj c4'maj f4'maj g3'dom7'iii>"
# legato 1.2
# delay 0.5 # delaytime (5/8) # lock 1
# lpf (range 2000 4000 $ slow 8 $ sine) # resonance 0.1
# room 0.7 # size 0.9
d2
$ s "supersaw*4"
# note "<c3 b2 a2 g2 f2 e2 d2 g2>"
|+ note "<0 0 12 -12>*4"
# lpf 600 # resonance 0.2
# room 0.7 # size 0.9
# gain 1.2
d3
$ s "bd(2, 8)"
# room 0.7 # size 0.9
# gain 1.2
-- スケール (scale = 旋法) ----------------
-- イオニアンスケール
d1
$ s "supersaw*8"
# note (scale "ionian" "[0..7]")
-- スケールいろいろ
minPent majPent ritusen egyptian kumai hirajoshi iwato chinese indian pelog prometheus scriabin gong shang jiao zhi yu whole augmented augmented2 hexMajor7 hexDorian hexPhrygian hexSus hexMajor6 hexAeolian major ionian dorian phrygian lydian mixolydian aeolian minor locrian harmonicMinor harmonicMajor melodicMinor melodicMinorDesc melodicMajor bartok hindu todi purvi marva bhairav ahirbhairav superLocrian romanianMinor hungarianMinor neapolitanMinor enigmatic spanish leadingWhole lydianMinor neapolitanMajor locrianMajor diminished diminished2 chromatic
-- スケール内の音をランダムに演奏
d1
$ s "superpiano*8"
# note (scale "hirajoshi" (irand 12))
-- スケールを使用した即興演奏
do
let mode = "minPent"
let root = "c"
d1
$ jux (("[10, 5]"/8)<~)
$ s "superhammond(7, 8, [0, 5])"
# voice 4
# note "c2"
|+ note (scale mode (irand 24))
|+ note root
# room 0.8 # size 0.9
# lock 1
d2
$ s "superhammond*16"
# voice 3
# note "c5"
|+ note (scale mode (irand 7))
|+ note root
# room 0.8 # size 0.9
# lock 1 Strudel
// 音を同時に鳴らす
$: sound("piano*4")
.note("[c, e, g]")
// --------------------------------------------
// コード (Chord = 和音)
// コードを演奏する
$: sound("piano*4")
.n("[1, 2, 3]")
.chord("C").voicing()
// いろいろなコードを試してみる
$: sound("piano*4")
.n("[1, 2, 3]")
.chord("<C F G>").voicing()
// カノン
$: sound("piano*4")
.n("[1, 2, 3, 4]")
.chord("<C G Am Em F C F G>").voicing()
// 王道進行
$: sound("piano*2")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
// 王道進行アンサンブル
$: sound("supersaw(11, 16)")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
.lpf(sine.slow(32).range(1000, 8000)).resonance(10)
.room(0.9)
$: sound("supersaw(9, 16)")
.note("<F2 G2 A2 E2>".add("<-12 0 12>*4"))
.lpf(sine.slow(24).range(1000, 8000)).resonance(8)
.room(0.9).gain(1.8)
$: sound("bd(3, 8), hh(4, 8, 1)").bank("RolandTR909")
.gain(1.2)
// 王道進行アンサンブル + 分数コード
$: sound("supersaw(9, 16, 3)")
.n("[1, 2, 3, 4, 5]")
.chord("<FM7 G7 Em7 Am>").voicing()
.lpf(sine.slow(32).range(1000, 8000)).resonance(10)
.room(0.9)
$: sound("supersaw(9, 16)")
.note("<F2 E2 D2 [C2 A1]>/2".add("<-12 0 12>*4"))
.lpf(sine.slow(24).range(1000, 4000)).resonance(10)
.gain(1.8)
$: sound("bd(4, 8), hh(4, 8, 1)").bank("RolandMC303")
.delay(0.5).delaytime(3/8)
.gain(1.3)
// --------------------------------------------
// スケール (scale = 旋法)
// イオニアンスケール
$: sound("piano*8")
.n("0 1 2 3 4 5 6 7")
.scale("C:ionian")
// スケール内の音をランダムに演奏する
$: sound("piano*8")
.n(irand(12))
.scale(“C:hirajoshi")
// スケールによる即興
$: sound("supersaw(5, 8)")
.n(irand(19))
.scale("C1:pentatonic").jux(rev).room(0.8)
.delay(0.7).delaytime(3/8)
.lpf(rand.range(400, 5000)).resonance(12).legato(1.2)
$: sound("supersaw*16")
.n(irand(19))
.scale("C3:pentatonic").jux(rev).room(0.8)
.lpf(rand.range(400, 4000)).resonance(8)
.delay(0.7).delaytime(5/8).legato(0.75)
今回も前回に引き続いてTouchDesignerとGLSLを組合せて高度な表現に挑戦します。前回はフラグメントシェーダー (ピクセルシェーダー) を用いてテクスチャー (TOP) を生成する2次元的な表現に留まっていました。今回はさらにGLSLを応用して3次元の形態(SOP)にGLSLを適用していきます。まず始めにGLSL TOPを用いてバンプマッピング (Bump mapping) をPhongマテリアル(Phong MAT)に適用しレンダリングの際に3Dの形状を変形するという手法を行います。さらに、続いて、GLSL MATを使用して頂点シェーダー (vertex shader) を用いて座標の情報をもとにマテリアルを動的に生成する手法に挑戦します。
スライド資料
サンプルプログラム
本日の課題
今回の講義資料およびサンプルプログラムを参考にして、GLSLを使用した高度な表現をTouchDesignerを用いて行ってください。今回も内容はかなり難しいので、サンプルのプログラムを元にして、何か少しだけ変更を加えるだけで大丈夫です!
課題提出 + アンケート
本日の課題の提出は下記から行ってください。
課題提出 + アンケート
