スライド資料
※ このふりかえりの資料は今期の「人工知能と創作」のWebページから Gemini 1.5 Pro with Deep Research を用いて作成されたレポートです。生成AIによって作成された資料を元にこの講義を振り返ってみましょう。Geminiによって生成された元の資料。
1. 講義の概要 本レポートは、東京藝術大学芸術情報センター (AMC) で開講されている講義「人工知能と創作」の内容を詳細にまとめ、人工知能と創作の関係性と将来展望について考察したものです。この講義は、美術学部、音楽学部、国際学部の学生を対象に、後期に開講され、基準単位数は2単位です。講義は上野校地のAMCで、金曜日の3時限に行われます。 1
この講義では、急速に発展する人工知能 (AI) 技術、特に生成AIに焦点を当て、その基礎から応用までを学び、AIを用いた創造的作品の制作プロセスを探求します。 1 GoogleのTeachable Machineなどのツールを用いた機械学習体験から始まり、ChatGPTに至るAIの歴史、画像生成AI、動画生成AI、AIと音楽制作、AIを活用したプログラミングと、多岐にわたるテーマを扱います。最終的には、生成AIを用いた創作プロジェクトを企画・制作・展示・講評し、実践的なスキルを習得します。 1
2. 各回の講義内容の詳細
講義テーマ : 人工知能と創作 – オリエンテーション 1講義内容 :講義全体のガイダンスとシラバスの説明
人工知能、機械学習、深層学習、生成AIについての基本的な概念を解説
創作におけるAIの活用事例を紹介
AIと創作における倫理的な問題や著作権問題について議論
GoogleのTeachable Machineを用いた機械学習の体験 1
キーワード : 人工知能、創作、生成AI、倫理、著作権、AIの社会的影響 1
講義テーマ : 人工知能、機械学習、深層学習、生成AIについてTeachable Machineで機械学習体験 1講義内容 :人工知能、機械学習、深層学習の基礎を解説
ニューラルネットワークの仕組みを解説
機械学習の種類（教師あり学習、教師なし学習、強化学習）を解説
GoogleのTeachable Machineを用いた画像認識の体験 1
生成AIの基本的な概念を解説
キーワード : ニューラルネットワーク、機械学習、深層学習、Teachable Machine、教師あり学習、教師なし学習、強化学習 1
講義テーマ : ChatGPTへ至る30年の歴史、画像生成AI導入 1講義内容 :自然言語処理の歴史とChatGPTの登場までの流れを解説
画像生成AIの仕組みと種類を解説
Stable Diffusion, Midjourney, DALL-E 2 などの画像生成AIツールを紹介
GPT-3 や Transformer などの技術について解説
画像生成AIを用いた創作の事例を紹介
キーワード : 自然言語処理、画像生成AI、Stable Diffusion, Midjourney, DALL-E、GPT-3、Transformer 1
講義テーマ : 「AI生成自画像」講評 / 生成芸術の歴史と未来 1講義内容 :前回の講義で作成した「AI生成自画像」の講評
生成芸術の歴史を解説
AIアート、NFTアート、アルゴリズムアート、メディアアートなどの関連分野を紹介
生成芸術の将来展望について議論
キーワード : 生成芸術、NFTアート、AIアート、アルゴリズムアート、メディアアート 1
講義テーマ : 動画生成AIを使ってみる 1講義内容 :動画生成AIの仕組みと種類を解説
Runway ML, Pika Labs などの動画生成AIツールを紹介
テキストから動画を生成する方法を解説
画像から動画を生成する方法を解説
動画生成AIを用いた創作の事例を紹介
キーワード : 動画生成AI、Runway ML, Pika Labs、テキストから動画生成、画像から動画生成 1
講義テーマ : 生成動画「幻覚 – バッド・トリップ」講評 / AIと音楽制作 1講義内容 :前回の講義で作成した生成動画「幻覚 – バッド・トリップ」の講評
音楽生成AIの仕組みと種類を解説
Amper Music, MuseNet などの音楽生成AIツールを紹介
MIDIデータの活用方法を解説
AIを用いた作曲、編曲の事例を紹介
キーワード : 音楽生成AI、Amper Music, MuseNet、MIDI、作曲、編曲 1
講義テーマ : AIを活用したプログラミング入門 1講義内容 :p5.js と Processing を用いたプログラミングの基礎を解説 2
ChatGPT を用いたコーディング支援の方法を解説 2
AI機能を搭載したエディターの紹介 2
AIと連携した高度なプログラミングの可能性について議論 2
キーワード : p5.js、Processing、ChatGPT、AIコーディング、GitHub Copilot 1
講義テーマ : 最終課題制作のヒント1 – 生成コレクション 1講義内容 :生成AIを用いた作品制作のヒントを提供 1
データセットの作成と活用方法を解説 1
生成AIによる大量生成とキュレーションの方法を解説 1
生成コレクションの事例を紹介
キーワード : データセット、生成AI、キュレーション、画像生成、大量生成 1
講義テーマ : 最終課題制作のヒント2 – Speculative Design with Generative AI (生成AIによるスペキュラティブデザイン) 1講義内容 :スペキュラティブデザインとAIの関係性を解説 1
生成AIを用いた未来のデザインを探求 1
デザインフィクション、クリティカルデザインなどの関連分野を紹介 1
生成AIを用いたスペキュラティブデザインの事例を紹介
キーワード : スペキュラティブデザイン、AI、未来、デザインフィクション、クリティカルデザイン 1
講義テーマ : 人工知能と創作最終課題制作のヒント3 – 機械学習ライブラリーを使ってみる MediaPipeとml5.js 1講義内容 :機械学習ライブラリー MediaPipe と ml5.js の紹介 1
MediaPipe を用いた姿勢推定、画像認識の活用方法を解説 1
ml5.js を用いた物体検出、画像分類の活用方法を解説 1
機械学習ライブラリーを用いた創作の事例を紹介
キーワード : MediaPipe、ml5.js、機械学習、姿勢推定、画像認識、物体検出 1
講義テーマ : 人工知能と創作最終課題制作のヒント4 – Google関連のAIテクノロジーの紹介 1講義内容 :Google AI, TensorFlow, Magenta などのGoogle関連のAIテクノロジーを紹介 1
AIプラットフォーム、クラウドAIなどの活用方法を解説 1
Google関連のAIテクノロジーを用いた創作の事例を紹介
キーワード : Google AI, TensorFlow, Magenta、AIプラットフォーム、クラウドAI 1
3. 人工知能と創作の関係性に関する考察 AIは、創作プロセスにおいて、人間の創造性を拡張するツールとしての役割を果たしています。 3 AIは大量のデータを学習し、新しいアイデアや表現方法を提案することで、人間の創造性を刺激することができます。 3 例えば、AIを用いた画像生成ツールは、アーティストに新たなインスピレーションを与えたり、これまでになかった表現方法を提示したりすることができます。また、AIは、これまで人間には不可能だった複雑な処理や表現を可能にすることで、新しい芸術表現を生み出す可能性を秘めています。 4 一例として、AIによるリアルタイムでの音楽生成は、人間の演奏では不可能な複雑なリズムやメロディーを生み出すことができます。
AIは創作物に様々な影響を与えています。AIによって生成された画像や音楽は、従来の芸術作品とは異なる美しさや表現力を持つことがあります。 4 例えば、AIが生成した絵画は、人間の画家が描く絵画とは異なる質感や色彩を持ち、鑑賞者に新たな感動を与える可能性があります。また、AIは、人間の感情や行動を分析し、それに合わせた作品を生成することもできます。 4 例えば、鑑賞者の表情や心拍数を分析し、それに合わせて音楽や映像を変化させるインタラクティブアートなどが考えられます。
AIと人間の創造性の違いは、AIは既存のデータに基づいて作品を生成するのに対し、人間は独自の感性や経験に基づいて作品を創造するという点にあります。 5 AIは、学習したデータのパターンを元に新たなアウトプットを生成しますが、人間のように感情や意識に基づいた真にオリジナルな発想を生み出すことはできません。しかし、AIは人間の創造性を模倣するだけでなく、それを超える可能性も秘めています。 6 例えば、AIは人間が思いつかないような斬新なアイデアを提案したり、人間の限界を超えた表現を可能にすることで、新たな芸術の領域を切り開く可能性があります。
AIは人間の創造性を拡張するためのツールとして、様々な可能性を秘めています。 6 AIは、人間のアイデアを形にするためのサポートツールとして、あるいは、人間の創造性を刺激するためのインスピレーション源として、活用することができます。 6 例えば、AIによる自動作曲機能は、作曲家がメロディーやコード進行を考案する際のサポートツールとして活用できます。また、AIが生成した画像や音楽は、アーティストに新たな発想のきっかけを与えるインスピレーション源となりえます。
AIと創作におけるデータとバイアス
AIによる創作において、トレーニングデータは重要な役割を果たします。 3 AIは、大量のデータからパターンや特徴を学習し、それを基に新たな作品を生成します。そのため、トレーニングデータの質や量、多様性が、AIが生成する作品の質に大きく影響します。例えば、偏ったデータで学習したAIは、偏った作品を生成する可能性があります。これは、AIによる創作におけるバイアスの問題として認識されており、倫理的な観点からも重要な課題です。 3
AIと創作における哲学的考察
AIと創作の関係を考える上で、意識や創造性とは何かという哲学的な問いは避けて通れません。 5 AIは、人間のように意識や感情を持つのでしょうか？もしAIが意識を持つとしたら、それは人間の意識とは異なるものなのでしょうか？また、AIが生成した作品は、本当に「創造的」と言えるのでしょうか？これらの問いに対する答えはまだ明確ではありませんが、AI技術の発展に伴い、今後ますます議論が深まっていくと考えられます。 5
AIと創作における著作権と所有権
AIが生成した作品の著作権や所有権は、現在、法的な整備が進んでいない領域であり、多くの議論を呼んでいます。 3 AIが生成した作品の著作権は、AIを開発した者に帰属するのか、AIを利用した者に帰属するのか、あるいはAI自体に帰属するのか、明確な基準はまだありません。また、AIが生成した作品が既存の作品と類似していた場合、著作権侵害の問題も発生する可能性があります。 3 これらの問題は、AIによる創作の普及に伴い、今後ますます重要になってくると考えられます。
4. 人工知能と創作の将来展望 AIは今後、さらに進化し、より高度な創作活動を可能にすることが予想されます。 7 例えば、AIは、人間の感情や意図を理解し、それに合わせた作品を生成することができるようになるかもしれません。 7 また、AIは、人間と共同で創作活動を行うことで、これまでにない新しい芸術表現を生み出す可能性も秘めています。 7 例えば、人間の作曲家とAIが共同で作曲を行うことで、人間の感性とAIの高度な処理能力を組み合わせた、新たな音楽を生み出すことができるかもしれません。
AIは創作プロセスを大きく変えていく可能性があります。 8 例えば、AIは、人間の代わりに面倒な作業を自動化することで、人間がより創造的な活動に集中できるよう支援することができます。 8 例えば、AIが絵画の下書きや音楽の編曲を自動的に行うことで、画家や音楽家はより創造的な表現活動に集中できるようになります。また、AIは、新しいツールやプラットフォームを提供することで、創作活動の幅を広げることもできます。 9 例えば、AIが生成した3DモデルをVR空間で自由に編集できるツールや、AIが作曲した音楽をリアルタイムで演奏できる楽器などが開発されるかもしれません。
AIは、これまで想像もつかなかったような新しい創作物を生み出す可能性を秘めています。 10 例えば、AIは、人間の五感を刺激する新しいメディアアートや、人間の感情に訴えかけるインタラクティブな作品を生み出すことができるかもしれません。 10 例えば、AIが鑑賞者の脳波を分析し、それに合わせて変化する映像作品や、AIが生成した音楽と香りを組み合わせた、人間の感情に直接働きかける作品などが考えられます。
AIと人間の創造性の関係性は、今後ますます密接になっていくと考えられます。 9 AIは、人間の創造性を拡張するためのツールとして、あるいは、人間と共同で創作活動を行うパートナーとして、重要な役割を果たしていくでしょう。 9 AIは、人間の創造性を脅かすものではなく、それを支援し、新たな可能性を切り開くものとして、今後ますます発展していくと考えられます。
AIと創作における倫理的考察
AI技術の進化は、創作活動においても倫理的な問題を提起しています。 authorship, originality, and the potential impact on human creativity. 例えば、AIが生成した作品を人間が自分の作品として発表することは倫理的に許されるのでしょうか？また、AIが人間の創造性を模倣することで、人間の創造性が失われてしまう可能性はないのでしょうか？これらの問いに対する答えは簡単ではありませんが、AI技術の倫理的な側面について深く考えることが重要です。
5. 結論 本レポートでは、東京藝術大学で開講されている「人工知能と創作」の講義内容を概観し、人工知能と創作の関係性について考察しました。AIは、創作プロセスにおいてツールとして、あるいはパートナーとして、人間の創造性を拡張する可能性を秘めています。AIは、新しいアイデアや表現方法を提案することで、人間の創造性を刺激し、これまでにない新しい芸術表現を生み出す可能性を秘めています。しかし、AIの進化は、著作権や倫理的な問題など、新たな課題も提起しています。今後、AI技術がさらに発展していく中で、これらの課題と向き合いながら、AIと人間の創造性を共存させていく方法を探求していく必要があるでしょう。
6. 参考文献 徳井直生. “創るための AI: 機械と創造性のはてしない物語.” ビー・エヌ・エヌ (2021)1.
Manovich, Lev. AI aesthetics. Moscow: Strelka Press, 20181.
Works cited 1. 人工知能と創作 2024 – yoppa org, accessed December 26, 2024, https://yoppa.org/geidai-ai24 https://yoppa.org/geidai-ai24/16835.html https://www.wipo.int/about-ip/en/frontier_technologies/ai_and_ip.html https://arxiv.org/html/2403.07924v1 https://creation.com/artificial-intelligence-and-evolution https://www.tomorrow.university/post/exploring-the-relationship-between-artificial-intelligence-ai-and-design https://www.calmu.edu/news/future-of-artificial-intelligence https://pg-p.ctme.caltech.edu/blog/ai-ml/the-future-of-ai-a-comprehensive-guide https://builtin.com/artificial-intelligence/artificial-intelligence-future https://www.simplilearn.com/future-of-artificial-intelligence-article
【重要】今後のスケジュール
1月24日にどうしても調整できない用事ができてしまいました (申し訳ありません…) 。最終発表は1月17日に集約します。
12月27日 (本日)
(冬休み) ※ 1月10日は休み (福澤先生誕生日)
1月17日: 最終課題発表
1月17日の発表を希望する方は以下のフォームに氏名を記入してください。発表の順番を優先するようにします。
本日の内容
この講義ではp5.jsを使用してクリエイティブ・コーディングの基礎を学んできました。今回は、これまでのまとめと、ここから先へ進むためのステップについて解説します。
p5.jsの基礎を身に付けてから次に進む様々な手段がありますが、ここでは次の3つの方法を紹介します。
さらに高速化を追い求める – openFrameworks
ノードベースのビジュアルプログラミング – TouchDesigner
ゲームエンジンの活用 – Unreal Engine
openFrameworks は、クリエイティブコーディングのためのC++のオープンソースツールキットです。その最大の利点はスピードです。p5.jsでは処理が追いつかずコマ落ちしてしまうような表現も高速な演算で実現可能です。より本格的な作品制作を目指す方にはp5.jsを習得した後、openFrameworksにステップアップすることをお勧めします。openFrameworksには、p5.jsのライブラリーにあたるアドオン(addons)という拡張機能があり、膨大な数のアドオンが公開されている のも魅力の一つです。
TouchDesigner は、ノードベースのビジュアルプログラミング環境です。様々な機能が内包された箱(オペレーター)を画面上に配置して、それらをパッチケーブルで接続していくことで、多彩で高機能なプログラム開発が可能となります。ただし、TouchDesignerはDerivative社が開発販売している製品であり、p5.jsやopenFrameworksとは違いオープンソースのプロジェクトではありません。ただし、非商用の利用で、画像の最大サイズが1280×1280 Pixel以内であれば、無料で使用することが可能です。
Unreal Engine は、ゲームエンジンに分類されるゲームを開発するための環境です。様々な最新技術をとり入れることで驚くようなリアリティーのある表現が可能となります。Unreal Engineもオープンソースのアプリケーションではありませんが、学生のみなさんであれば完全に無料でフルの機能を使用可能です。
自分の作品の表現形態やテーマにあわせて、次のステップへ進んでいきましょう!
スライド資料
アンケート
本日の講義に参加した方は以下のアンケートに答えてください。
アンケート
Vera Molnar, De La Serie (Des) Ordres,1974 本日の実習では、まず前回の課題「生成コレクション」の講評会を行います。その後はこの実習の後半のテーマである「生成芸術 (Generative Art)」について解説していきます。こうした生成芸術を生成AIのサポートを受けながら作成する方法について説明し、最終課題を出題します。
スライド資料
本日の内容
最終課題について「生成AIと生成芸術」
前回の課題「生成コレクション」の講評会 (高校生の見学あり)
生成芸術とは? その歴史と発展
生成AIで生成芸術
工学デザイン実習II (情報メディアデザイン) 最終課題
課題:「生成AIによる生成芸術」
工学デザイン実習IIの情報メディアデザインは、生成AIを活用して生成芸術 (Generative Art) を制作します。生成芸術 (Generative Art) の概念やその歴史を踏まえた上で、生成AIの力を最大限に活用してp5.jsを用いて作品を制作してください。
生成AIを使用して、生成芸術作品を制作する
p5.jsを用いて制作し、OpenProcessingにアップロードする
提出の際に以下のタグをつけること edpws2-24
最終課題制作のヒント
コードの作成には生成AIをどんどん活用してください!
生成AIをどのように活用すれば良いか?
方法 1. テキストでプロンンプト (指示) を生成AIに与える
例: (※ 「p5.jsで」と指示に入れるのがポイント)
p5.jsで、ランダムな場所に膨張する円が描かれるプログラムを作成してください。
p5.jsで、ノイズで生成したベクトル場に浮遊するパーティクルが模様を描くプログラムを作成してください。
など
方法2. 既存のコードを生成AIに与えて、新しいアイデアを得る
まず、生成的なコードをp5.jsで作成しているサイトを参照
そのコードを生成AIに与えて、新しいアイデアを得る
詳細は、次回 (1/6) により詳細に解説します!
スケジュール
12月23日:
「生成コレクション」講評会
生成芸術について
最終課題の出題
最終課題制作のヒント1
(冬休み)
1月6日:
1月13日: 休み (成人の日) 1月20日: 講評会
「生成コレクション」講評会
一人ずつ発表してもらいます
以下の内容を含めて発表してください
作品タイトル
作品のテーマ – どのような意図で画像を集めたのか
画像生成AIを使用した感想
※ 特別選抜で工学デザインプログラムに合格した高校生の見学あり
生成芸術 (Generative Art) とは?
映像を視聴
VIDEO
Generative Art Exploration Chapter I Tracing the Roots: The History of Generative Art ChatGPT Summerize & Chat による要約
生成アートの概念
想像上の機械が作品を生む
自動化とランダム性が創作過程に関与
ランダム性の役割
多様な可能性と選択肢を生む
アーティストが機械と対話
歴史的背景
1950年代に始まり、さらに前から存在
ダイスのようなランダム性を活用するアートも含む
デュシャンの影響
機械やランダム性が作品の完成に重要な役割を果たす
《泉》がその象徴的作品
デジタル技術の発展
1960年代、コンピュータを使った生成アートが登場
エンジニアや数学者も先駆者に
個人用コンピュータの普及
AmigaやApple IIがアーティストのスタジオに導入され普及
インターネットの影響
近年の再興
Web上で作品発表・収集が加速
大規模な美術館や公共機関でも注目されるように
認知度の向上
研究のニッチな分野から、大衆や機関にも認知される分野へ発展
生成芸術の定義
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
Generative Design
p5.js Editor
コード生成のための生成AI
コードの作成には生成AIをどんどん活用してください!
スライド資料
本日の内容
生成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を制作するための方法について解説していきます。
【重要】今後のスケジュール
1月24日にどうしても調整できない用事ができてしまいました (申し訳ありません…) 。最終発表は1月17日に集約します。
12月27日 (本日)
(冬休み) ※ 1月10日は休み (福澤先生誕生日)
1月17日: 最終課題発表
1月17日の発表を希望する方は以下のフォームに氏名を記入してください。発表の順番を優先するようにします。
映像資料
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票投票 (自信があれば自分の作品でも可)
課題提出フォーム
サンプルコード
