今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。
映像資料
スライド資料
ランキング
おめでとうございます!
サンプルコード (課題のヒント)
本日の課題!!
本日の最終のコードを改造してランダムな要素を追加してください。
例:
- 円の色をランダムな色に
- 円の大きさをランダムに
- (応用)円の動きをランダムに
- …etc.
作品は、OpenProcessingに投稿した上でアンケートフォームから提出してください。
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際にsfc241108のタグをつけてください!
- 締切: 2024年11月14日 (水) 23:59 まで!
アンケートフォーム (11/08)
前回(11/1)のアンケートフォームはこちら。
アンケートフォーム (11/01)
この講義の前半はStrudelを用いてライブコーディングによるサウンドプログラミングの導入を行ってきました。
ここで改めて「ライブ」でコーディングするとはどういうことなのか、ということについて考えていきたいと思います。そもそも何故コード(プログラム)をステージ上で観客に見せるのか? コードを使ってパフォーマンスするという行為は何故意味があるのか。ライブコーディングというコンセプトの基本についてその歴史を紹介しながら学んでいきます。
スライド資料
参考映像
アンケート
本日の講義に出席した方は以下のアンケートに答えてください。
※ 旧カリ「サウンドプログラミング」「環境情報デザイン」で履修の方はこちら
今回は、TouchDesignerの初級編の4回目として、音楽に反応する3Dオブジェクトを作成します。前回の回転する立方体のプログラムを改造して、音楽ファイルのデータをCHOPに読み込んでその音量の最大値を入力にして3Dオブジェクトの大きさや色、背景のグラデーションなど様々な属性を変化させて、音楽に反応して動いているように感じられる3D表現に挑戦します。
映像資料
スライド資料
サンプルファイル
本日の課題
今日のプログラムを改造して、以下のプログラムを作成してみましょう!
1. 音量によってSOPの形状が変化するようにしてみる!
ヒント
- SOPの切り替えは、Switch SOPを用いる
- SOPの数に応じて、Triggerの出力のスケールを変更する → Math SOP
2. 音量によって3Dの形状をノイズで変形してみる
ヒント
- 前回のノイズのプログラムをヒントにする
- Noise SOPのパラメータを音量で変化させる
- Attribute Create SOPで法線マップの補正を忘れずに!
アンケート
本日の授業に参加した方は、下記のアンケートに答えてください。
いま、コードで描くことの可能性を探る—
第一線で活躍する技術者や研究者がYCAMに集結!
第一線で活躍する技術者や研究者を迎え、今後のメディアアート作品の制作に使用されるツールについて紹介し、国内外の参加者とともに学ぶ集中ワークショップ・シリーズの第5弾です。ハンズオンワークショップ「AIを使ったコード生成」では、実際に手元のノートPCで生成AIを使用したコード生成を体験します!
ワークショップ資料
ワークショップを受講するにあたり、以下の資料を参照して事前に準備をしてきてください。
ワークショップの本編は以下のスライド資料を使用して解説していきます
参考映像
Introduction to Generative AI
ChatGPT: 30 Year History | How AI Learned to Talk
参考資料
「ホモ・コーデンス—AI時代、人類はどう描くのか」のハンズオンワークショップ「AIを使ったコード生成」では、実際に手元のノートPCで生成AIを使用したコード生成を体験していただきます。その際に、いくつかの事前準備が必要となりますので、以下で解説します。
可能な方はワークショップ開始前までに準備をしてくるようにお願いします。
必要な準備は以下の4点です。
- Githubへのユーザー登録
- Github Copilotのトライアル版登録
- Visual Studio Codeのインストール
- Visual Studio Codeの環境設定
1. Githubへのユーザー登録
Githubとは、 主にプログラムのソースコードをオンライン上で公開・共有できるプラットフォームです。現在最もポピュラーなGitホスティングサイトとなったで、2023年にはユーザ数1億人を突破しました。Githubにはいくつかアカウントの種類がありますが、基本的には無料で使用可能です。
以下の資料を参照してGithubにユーザー登録してください。
参考資料:
※10/25追記: 学生 (教職員) として GitHub Educationに応募するための情報を追記しました。下記のGithub Copilotが無料で制限無しに利用可能になります。
2. Github Copilotのトライアル版登録
Github Copilotは今回使用するGithubから提供されている生成AIを使用したコード生成のサービスです。使用するには有料のプラン (Copilot Individual 個人 – 10ドル/月) に加入する必要がありますが、30日であれば無料のトライアルが可能です。学生や教育機関に所属する人であれば、GitHub Education (教育用アカウント) に登録することで無料で使用可能となります。
以下の資料を参照して、Github Copilotのトライアル版に加入してください。
参考資料:
3. Visual Studio Codeのインストール
Visual Studio Codeは、マイクロソフトが開発・提供している高性能なコードエディターです。無料で利用可能です。
以下のリンクからVisual Studio Codeをダウンロードしてインストールしてください。
参考資料:
4. Visual Studio Codeの環境設定
Visual Studio Codeはインストールした直後の状態でも十分多機能です。しかし、用途や目的に応じて拡張機能をインストールしていくことで、自分専用にカスタマイズされた最強のテキストエディターとなります。このワークショップでは以下の機能拡張を事前にインストールしておくようにしてください。
参考:
もし環境設定できなかった場合は
もし個人で環境設定できなかった場合でも問題ありません。ワークショップの冒頭でインストール作業について解説します。
それでも、どうしても導入ができなかった場合は、下記のページで (少し機能は劣りますが) 同様のコード生成体験が可能なので、使用していきます。
それでは当日よろしくお願いします!!
スライド資料
本日の内容
- 「ChatGPTに至る30年の歴史」ChatGPT: 30 Year History | How AI Learned to Talk 映像視聴
- 画像生成AI導入
ChatGPTに至る30年の歴史
ChatGPT: 30 Year History | How AI Learned to Talk
ChatGPT: 30 Year History | How AI Learned to Talk
動画の要旨
- チャットGPTの登場: チャットGPTは一般人が会話できる最初のプログラムで、チューリングテストを打ち破った。
- 言語の複雑さ: 以前、多くの言語学者はコンピューターが人間の言語を理解することは不可能だと考えていたが、今はその多くが考えを改めている。
- 教師あり学習の説明: 過去のニューラルネットワーク研究は、固定された目標に対して一つのタスクを学習するものであったが、汎用的なシステムへの道筋は見えていなかった。
- 順序学習の初期研究: 1986年、ジョーダンは再帰型ニューラルネットワーク（RNN）を使ってシンボルの順序を予測させる実験を行い、ネットワークに記憶の概念を導入した。
- エルマンの研究: ジェフリー・エルマンは、言語における単語の境界をニューラルネットワークが自動的に学習することを発見した。
- Transformerの導入: 2017年、言語翻訳の問題に対応するためにTransformerアーキテクチャが開発され、これが現在の大規模言語モデル（LLM）の基盤となった。
- GPTシリーズの進化:
- GPT-1: Transformerアーキテクチャを使用し、次の単語予測問題に適用。
- GPT-2: ウェブから収集したデータを使用し、さらに大規模なネットワークで優れた言語生成を実現。
- GPT-3: 1750億のパラメーターを持つネットワークで、ゼロショット学習などの新しい機能を発揮。
- 哲学的な議論: AIが本当に「思考」しているのか、それとも思考をシミュレートしているだけなのかについて、研究者間で議論が続いている。
さらにGPTの構造を深く知りたい人のために…
GPTとは何か Transformerの視覚化 | Chapter 5, Deep Learning
GPTとは何か Transformerの視覚化 | Chapter 5, Deep Learning
参考: ChatGPTを活用してYouTube動画の内容を要約する
画像生成AIを試してみる!
現在、様々な画像生成AIが公開されている。今回は以下の画像生成AIサービスを試してみましょう。(参考)
現状では総合的にベストなAI画像ジェネレーター
長所
- 使いやすい
- 高品質な結果
- プロンプトごとに4つの画像
短所
- Googleアカウントが必要
- 画像は1:1比率のみ
高品質の画像のためのAI画像ジェネレーター
長所
- 非常に高品質な出力
- 失敗出力が少ない
- Discordコミュニティオプション
短所
参考写真がある場合に最適なAI画像ジェネレーター
長所
- 構造とスタイルのリファレンス
- 商業用にも安全
- 無料 (Adobeアカウントがあれば)
短所
- Adobeアカウントが必要
- 月間生成クレジット限度額があり
DALL-E 3にアクセスするための最適なAI画像ジェネレーター
長所
短所
- Microsoftアカウントが必要
- DALL-Eより少し時間がかかる
オリジナルを体験したいなら最高のAI画像ジェネレーター
長所
短所
著作権のあるキャラクターのために最適なAI画像ジェネレーター
長所
- 制限が少ない
- 豊富なカスタマイズオプション
- 直感的なUI
短所
シンプルなAI画像ジェネレーター
長所
短所
カスタマイズに最適な AI 画像ジェネレーター
長所
- 特定の指示を受け入れる
- オープンソース
- カスタマイズのための追加エントリ
短所
モバイル環境に最適なAI画像ジェネレーター
長所
- モバイルアプリ
- 自分の画像をリミックスする
- 複数のテンプレート
短所
- プロンプトごとに1つの画像
- フルアクセスのサブスクリプション料金
商用利用に最適な AI 画像ジェネレーター
長所
- 商業的に安全
- 貢献者報酬プログラム
- パーソナライズされたストック写真
短所
まずはいろいろ試してみる!
- 画像生成AIをいろいろ試してみましょう!
- サービス、画像生成モデルによって個性がある
- 個人的なお勧め
実習、次回までの課題
課題: 画像生成AIで自画像を作成
- いくつかの画像生成AIを試してみる
- 気にいったサービスを1つ選択
- 自分自身の自画像を生成してみる
- 写実的、イラスト調、油彩調などスタイルは自由
- 自分に似せるにはどのようなプロンンプト(指示)が良いか?
- 次回、一番似ている人は誰かコンテスト
アンケート
本日の講義に参加した方は以下のアンケートに回答してください。
プログラムを構造化していく際に、3つの重要な構成要素があります。それは、「順次 (Sequence)」、「反復 (Iteration)」、「分岐 (Selection)」 です。今回は、この3つの構成要素の中の反復 (Iteration) に注目して、p5.jsで形を描きながら反復について考えます。また、一意的でないランダムな値である「乱数」と反復を組合せて、どのような表現か可能となるか探求していきます。
映像資料
スライド資料
ランキング
おめでとうございます!
サンプルプログラム
本日の課題!!
乱数 (random) と繰り返し (for) を使用して、表現してみましょう!
- 作品は、OpenProcessingに投稿
- 完成した作品に、タイトルをつける
- 投稿したURLをアンケートから提出
- 投稿の際にsfc241018のタグをつけてください!
- 締切: 2024年10月31日 (水) 23:59 まで!
アンケートフォーム
- 今回のアンケートフォームから、前回の提出作品の人気投票を行います!
- 前回のタグsfc241011でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
- 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)
今回はTouchDesignerの入門編として、いよいよ3次元のグラフィクスに挑戦します! SOP (Surface Operator) の使い方から始めて、Render COMPとカメラとライティングを使用したレンダリング、MAT (Material) の基本などを学習していきます。後半は応用編として、Switch SOPによる3D図形の切り替えや、Noise SOPによる図形の変形などを行います。
映像教材
スライド資料
サンプルファイル
本日の課題
今日のプログラムを改造して、以下のプログラムを作成してみましょう!
1. Box以外の図形を追加してキーボードの入力で切り替えられるようにする
- ヒント
- Box以外の図形 – Torus、Tube、Grid、Sphereなど
- SOPの切り替えは、Switch SOPを用いる
- キーボードによるスイッチングは前回の内容を参照
2. 3Dの形状をノイズで変形してみる
- ヒント
- Noise SOPで変形する
- Attribute Create SOPで法線ベクトルを補正
アンケート
本日の授業に参加した方はアンケートに回答してください。
前回は主にドラムサウンドを用いてStrudelのプログラミングの導入を行いました。今回も引き続きStrudelによるサウンドプログラミングを学びます。前回はドラムでしたが、今回はシンセサイザーで旋律を演奏していきます。note() 関数を用いて音程を指定することで様々な方法でメロディーを生成することが可能です。実際に音を聞きながら試していきましょう。
スライド資料
映像資料
The Unanswered Question 1973 1 Musical Phonology Bernstein Norton (1973)
レナード・バーンスタインによるレクチャー。数世紀に渡る西洋音楽の和声の発展の歴史を2分に圧縮して解説!!
アンケート
本日の講義を履修した方は以下のアンケートに回答してください。
※ 旧カリ「サウンドプログラミング」「環境情報デザイン」で履修の方はこちら
この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。
まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。
後半は、そうした歴史を踏まえた上で、 p5.jsで実際に図形を描いていきます。まずp5.jsの操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。
動画資料
スライド資料
ランキング
おめでとうございます!
本日の課題
テーマ: 「p5.js基本図形と色による画面構成」
ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう! 座標、色、数値による図形の描画に慣れるのが目的です。 次回の授業の冒頭で優秀作品を紹介していきます。
- 完成したら何かタイトルをつける
- 完成した作品はOpenProcessingに投稿してアンケートフォームからURLを提出
- 投稿の際に sfc241011 のタグをつけてください!
- 提出締切は、2024年10月17日(木) (23:59) までとします
課題提出 + アンケート
課題の提出は以下のアンケートフォームから。
アンケートフォーム (※提出者の確認は学籍番号をキーにしています。間違いが無いかよく確認してください。)
