Question. 01
自分の強みは何だと思いますか？
クリエイティブコーダー,ジョンヒョ_정효 Details
講座紹介
トレーラー
クリエイティブコーダー
ジョンヒョ
"マウス、キーボード、サウンド、
ウェブカメラ映像などのインプットデータと
関数値を加工する様々な例題を学んで
インタラクティブの原理に対する理解を
高めることができます"
展示、グラフィックデザインなど
活用度の高いインタラクションデザイン
入門から完成まで！
展示場、広告、大型ディスプレイに
リアルタイムで反応する
華やかなアートワークを
自分で作ってみたくありませんか？
実験的でダイナミックなデザインを取り入れた
自分ならではのポートフォリオを
作ってみましょう！
TouchDesignerを使って
誰でも独創的な
インタラクティブコンテンツを
完成できる今回の講座を
見逃さないで下さい。
コーディングを難しく感じる
初心者も心配なし！
TouchDesignerは
テキストコーディングとは違って
初心者でも直観的に解析することができます。
またアンリアルエンジン、ウェブなどの
様々なツールとの互換性もあって
業界でも一躍注目されています。
ウェブサイトから展示、映像、
グラフィックデザインなど
幅広い範囲で活用でき
一度学べば自分ならではの創造力を
いくらでも思う存分に実現できる
インタラクションデザイン！
今すぐColosoで直接経験してみて下さい。
「TouchDesigner」と「p5js」とは？
ノードベースのTouchDesigner
TouchDesignerはリアルタイムの対話型マルチメディアコンテンツを制作するためのノードベースのビジュアルプログラミング言語として他のツールとの互換性が高く最近ではデザイン業界で注目を浴びているツールです。
コマンド入力ベースのp5js
p5jsはウェブ/アプリ上でインタラクションコンテンツを実現するためのコマンド入力ベースのJavaScriptライブラリーの一つでWeb Editorを通じて複雑なHtml、css過程などなしに簡単に操作できます。
講座情報
本数：20本の映像
難易度 : 初中級
無期限視聴
使用プログラム
TouchDesigner
*解像度1280x1280px
まで無料
JavaScript
*p5js : 無料
*英語ページ基準で対応
動画情報
オンラインVOD
オーディオ：韓国語
字幕：日本語
講座特典
練習例題：30点
アートワーク例題：5点
クリエイティブコーダー
ジョンヒョの
ポートフォリオ
今回の講座で学ぶ
約30種類の例題の中で
一部を紹介致します。
練習例題
入門者も簡単にまねできる練習例題を通じて
インタラクティブアートワーク製作のための基礎を固めます。
-
オペレーターの活用 -
Luma Blurの適用 -
Time Machineの適用 -
ミラー効果の応用
-
音に反応するモーション作り -
3Dモデルでパーティクルを生成 -
スタンプの具現化 -
マウスに追従するグラフィック作り
-
マウスオーバーインタラクション -
瞬きする目の具現化 -
スライダーの具現化 -
文字トレース
アートワーク例題
学んだミニ例題をまとめて
完成度の高いアートワークを制作してみましょう。
-
揺らめくミラー効果作り -
モコモコしたパーティクル効果作り
-
スプレーペインティング効果作り -
マウスを見つめるキャラクター作り -
リモートで制御するアートワーク
講師紹介
ジョンヒョ
クリエイティブコーダー
はじめまして。
フリーランスのクリエイティブコーダー
ジョンヒョです。
私は現在、
文化空間「NEST」を運営しながら
古典的なメディアアートワークの
スタイルから離れた
新しいインタラクション方法を活用して
作業を進めています。
リアルタイムで反応するWeb基盤の
リモートパフォーマンスや
既存のインターフェースを再解釈し
インタラクティブな
キャラクターやイラストを作りながら
現代美術パフォーマンスから
メディアアート展示まで
様々な芸術分野での作業を行っております。
メディアアート、
インタラクティブアートワークを
自分で作ってみたいけど、
プログラミング言語は難しいという理由で
諦めてしまう方が大勢いらっしゃると思います。
そのようなデザイナーのために
コーディングのハードルを
思いっきって下げました。
今回の講座を通じて
数え切れない応用力と画期的な技術、
効率性まで揃えた
インタラクティブアートワークの魅力を
満喫して下さい。
クリエイティブコーダー ジョンヒョ
現)フリーランスエンジニア
現)クリエイティブコーティング
文化空間「NEST」代表
[参加プロジェクト]
- Sulwhasoo CULTURE PROJECT キャンペーン映像2022
- DMZ 探検ブラウザゲーム
- Converse All Stars プロモーションウェブサイト 2021
- World Script Symposia2017 ウェブサイト 2017
[展示]
- キムジュンオプ建築博物館 特別展「Media Architecture: Past, Present, and Future」
- Koteグループ展「Continuous Flow」
[公演]
- JSCONF KOREA 2020 クロージングパフォーマンス
- 「TRACERS 2.5」現代美術パフォーマンス
- Bucheon Art Bunker B39「PRECTXE : SHOWCASE vol.2 1001 Odyssey」
講座のポイント
この講座のポイント
どこでも見たことのない
クリエイティブコーディングツール
入門講座
リアルタイムで動くアートワーク制作のためにノードベースとコマンドベースのコーディング両方を学びます。それぞれの特性を直接比較分析し、各メディアに相応しい方法を選べられる応用力まで身に付けてみましょう。
データをコンテンツに！
インタラクティブの原理と
発想法を学ぶ
マウス、キーボード、サウンド、ウェブカメラ映像などの入力データと関数値を加工する色んな例題を学びながら、インタラクティブの原理に対する理解を深めます。なお、データをコンテンツに入れ替えるフレキシブルな発想法までトレーニングしてみましょう。
30種類のミニ例題で完成する
５つのインタラクティブアートワーク
初心者も簡単に学べられるように約30種類のミニ例題を通じて、独創的なアイデアが込められたコンテンツを実現する力を少しずつ鍛えます。この過程を踏まえていくと、自ら５つのインタラクティブアートワークが完成することができます。
講座内容
下記のような内容を
学べます。
-
TouchDesigner
- インプット・アウトプットの概念を通じてノードプログラミングプロセスを理解するインプットとアウトプットの概念で構成されたノードプログラミングの基本的なプロセスを学び、データ種類ごとに繋がる特性まで学びます。 -
TouchDesigner
- 2次元での表現スキルを身に付ける0と1、その範囲から求められる適切な効果を制御する方法を学び、Luma Mapを通じて2次元でそれを表現する方法まで学びます。 -
TouchDesigner
- 自分だけの3Dアートワークのレンダリング個体からカメラ、光源まで3D化するための3つの構成要素と3Dグラフィックとの関係を理解し、それが2次元でレンダリングされた結果物に自分が求めるイメージを反映する方法を学びます。
-
p5js
- 基礎図形で数字データを理解する数字データを入力して基本図形を2次元上にピクセルで具現化し、それを通じてインタラクティブアートワークに必要な数値感覚を身に付けます。 -
p5js
- 値を指定して求める
アニメーションを表現する時間とインプットデバイスのデータによる変化を視覚的に表現して、それがインタラクティブやアニメーションとどのような関係性を持つか理解してみましょう。 -
p5js
- リモートコンテンツの具現化から活用までそれぞれのツールからリモート通信を具現化するための機能を学び、活用に相応しいインターフェースとインタラクションについて学びます。
(자동 구성) 가격이 인상됩니다.
지금이 최저가!
カリキュラム
カリキュラム
カリキュラム内容の
ご紹介
SECTION 01. TouchDesigner スタート: 2Dグラフィックとインタラクション
01. オリエンテーション : インタラクティブ作業物の様々な表現と手段
- 自己紹介と作業ポートフォリオの紹介
- 手段によるインタラクションの種類と事例
- 状況に応じて適切なツールを選ぶ方法
02. TouchDesigner : インターフェースとノードコーディング
- TouchDesignerのUI説明
- マウスとショートカットキーの操作方法
- Node - オペレーターとコンポーネントの説明
- Movie File In/Level/Transformオペレーターに繋げる
03. TouchDesigner : TOPオペレーターの理解
- Compositeオペレーターで映像を合成する
- Rectangle/CircleオペレーターとCompositeオペレーションオプションの原理
- Luma Mapで映像をマスキングする
04. TouchDesigner : ウェブカメラを活用したインタラクション
- Luma BlurオペレーターとLuma Mapの活用
- DisplaceオペレーターとLuma Mapの活用
- Time machine/Texture 3DオペレーターとLuma Mapの活用
05. TouchDesigner : TOPオペレーターを活用したアートワーク製作
- 3Dシーンを実現するための３つのコンポーネント
- 揺らめく球体作り
- Luma Blur/Displaceを応用して効果を加える
- パラメーターによって異なるイメージ作り
SECTION 02. TouchDesignerの活用: 3D グラフィックとインタラクション
06. TouchDesigner : SOPオペレーターの理解
- 様々な立体図形オペレーターと頂点の概念
- Geometryの適用
- Camera/Lightを扱う
- Matオペレーターと質感の表現
07. TouchDesigner : CHOPオペレーターの理解、サウンド インプット
- Speedオペレーターで変わる数値の確認
- LFOオペレーターで繰り返される 数値の確認
- サウンド インプットを活用してグラフィックに変化を加える
08. TouchDesigner : SOPオペレーターを活用したアートワーク制作
- Particleオペレーターの活用
- Instancingで求める個体をコピーする
- 3Dモデルの形からパーティクル効果の制作
- パラメーターによって異なるイメージ作り
09. TouchDesigner : DATオペレーターとの通信
- Touch In Outオペレーターでの通信
- Wifi内の他のパソコンとの通信
- 様々な通信方法によるメリットとデメリットの紹介
SECTION 03. p5js 基礎: 基本図形でインタラクティブアートワークを作る
10. p5js : Web Editorインタフェースとコーディングを始める
- p5jsの紹介
- Web Editorインタフェースの説明
- canvas生成とbackground関数で背景色を塗る、色数値の入力方法
11. p5js : 基本図形を描く
- rect/circle関数で四角形と円を描く
- fill/stroke関数で図形にスタイルを与える
- point/line/triangleの頂点入力と図形を描く
- push/pop/translateを活用して図形をレイヤー化する
12. p5js : 関数の呼び出しとインタラクション
- mouse関連の呼び出し関数とインタラクション
- keyboard関連の呼び出し関数とインタラクション
- draw関数呼び出しの理解をアニメーション制作
- frameCount/mouseX/mouseYのシステム変数活用
13. p5js : インタラクティブアートワークの制作
- frameCountで規則的に変化するグラフィック作り
- マウスの動きに追従するグラフィック作り
- インタラクティブなアイデアと良いインタラクションを作る方法
SECTION 04. p5js 深化: 変化する値とインタラクション
14. p5js : 変数と条件文
- インタラクションによって変化する値の保存
- 変化する値によるグラフィックの表現
- 条件文でダイナミックな変化作り
15. p5js : 状態によって変化するグラフィック作り
- 状態によって徐々に変化するグラフィックのデザイン
- 最大値を制限する
- 数値の初期化を通じたインタラクションの繰り返し
16. p5js : Vectorを活用した複雑なインタラクション
- dist関数を活用したインタラクション
- Vectorの概念とcreateVector関数
- Vectorを活用した加減乗除
- limitメソッドで動きを制限する
17. p5js : インタラクティブアートワークの制作
- キャラクターの顔をデザインする
- マウスの動きに追従するモーション作り
- 部分的に範囲を調整し立体感を作る
- インタラクションごとに追加の変化作り
SECTION 05. リモートコントロールを活用したインタラクティブアートワーク
18. ウェブサーバーの具体化
- glitchサービスの紹介
- ウェブページに自分のp5jsプロジェクトをアップロードする
- インタレクションによる通信の適用
- 通信された値でグラフィックを変化させる
19. p5jsでウェブアプリの制作
- ボタンの実現
- スライダーの実現
- コントローラーでp5jsプロジェクトをインタラクションする
20. p5js モバイルウェブアプリを活用したTouchDesignerのコントロール
- TouchDesignerアートワークにsocket.ioオペレーターを繋ぐ
- パラメーターによって異なるインタラクションを適用する
- リモートインタラクションのアイデアと事例の紹介
インタビュー
クリエイティブコーダー ジョンヒョが
お話したいこと
私はインタラクティブとモーショングラフィックスを作業する際に、グラフィックと動きを作るルールをモジュール化します。モジュール化されたルールはリアルタイムで変形が可能で、他のモジュールと結合して使用することもできます。一つのルールで色んな物を派生させることができるため、短い時間内に数々のダイナミックな結果物を作り出せるのが自分ならではの強みだと思います。
Question. 02
今回の講座を通じて学べる
自分ならではのノウハウは何でしょうか？
今回の講座を通じて学べる
自分ならではのノウハウは何でしょうか？
講座のカリキュラムから様々な例題を通じて形態、動き、インタラクションを具現化する色々な機能モジュールを結合する方法を学べます。モジュール同士の様々な組み合わせとコントロールする設定値を学び、色々なスタイルのグラフィックとモーションの表現方法を経験できます。例えば、パーティクルの例題から重力の方向と乱気流の大きさによって燃え上がる炎と溢れる砂利のような正反対の雰囲気のアートワーク表現の全てができるようになります。
Question. 03
インタラクションデザインの将来について
どのように思いますか？
インタラクションデザインの将来について
どのように思いますか？
既存のデザインツールだけでは実現できない高次元で非定型的なグラフィックに対する需要が増えつつあります。美術館から広告までインタラクティブメディアに簡単に触れることになり大衆も慣れています。それゆえ、インタラクションデザインをプログラミング言語だからと難しく感じて諦めないで、今回の講座を通じて様々なインタラクションアートワークを自ら経験してみて下さい。
使用プログラムについて
ご案内します。
当講座は、以下のツールを使用します。
TouchDesigner (2021.16410 NON-COMMERCIAL)
p5js (1.4.0)
※円滑な受講のため、最新バージョンのご使用を推奨します。
※TouchDesignerの場合、解像度1280x1280px以上で作業するためには別途購入が必要になります。
※このページは英語ページを基準に説明します。
おすすめの講座
おすすめの講座
この講座を見た方は
こちらもチェック！
ご注意事項
*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ
欄でご確認ください。