Search Input

誰でも簡単に学べるインタラクティブアートワーク

クリエイティブコーダー ジョンヒョ




講座詳細




クリエイティブコーダー,ジョンヒョ_정효 Details

講座紹介

トレーラー
クリエイティブコーダー
ジョンヒョ

"マウス、キーボード、サウンド、
ウェブカメラ映像などのインプットデータと
関数値を加工する様々な例題を学んで
インタラクティブの原理に対する理解を
高めることができます"


展示、グラフィックデザインなど
活用度の高いインタラクションデザイン
入門から完成まで!

Coloso ジョンヒョ 誰でも簡単に学べるインタラクティブアートワーク

展示場、広告、大型ディスプレイに
リアルタイムで反応する
華やかなアートワークを
自分で作ってみたくありませんか?
実験的でダイナミックなデザインを取り入れた
自分ならではのポートフォリオを
作ってみましょう!

TouchDesignerを使って
誰でも独創的な
インタラクティブコンテンツを
完成できる今回の講座を
見逃さないで下さい。

Coloso ジョンヒョ 誰でも簡単に学べるインタラクティブアートワーク

コーディングを難しく感じる
初心者も心配なし!
TouchDesignerは
テキストコーディングとは違って
初心者でも直観的に解析することができます。
またアンリアルエンジン、ウェブなどの
様々なツールとの互換性もあって
業界でも一躍注目されています。

ウェブサイトから展示、映像、
グラフィックデザインなど
幅広い範囲で活用でき
一度学べば自分ならではの創造力を
いくらでも思う存分に実現できる
インタラクションデザイン!

今すぐColosoで直接経験してみて下さい。

「TouchDesigner」と「p5js」とは?

ノードベースのTouchDesigner

TouchDesignerはリアルタイムの対話型マルチメディアコンテンツを制作するためのノードベースのビジュアルプログラミング言語として他のツールとの互換性が高く最近ではデザイン業界で注目を浴びているツールです。

コマンド入力ベースのp5js

p5jsはウェブ/アプリ上でインタラクションコンテンツを実現するためのコマンド入力ベースのJavaScriptライブラリーの一つでWeb Editorを通じて複雑なHtml、css過程などなしに簡単に操作できます。


 Coloso 講座特徴1
講座情報

本数:20本の映像
難易度 : 初中級
無期限視聴

 Coloso 講座特徴2
使用プログラム

TouchDesigner
*解像度1280x1280px
まで無料

JavaScript
*p5js : 無料
*英語ページ基準で対応

 Coloso 講座特徴3
動画情報

オンラインVOD
オーディオ:韓国語
字幕:日本語

 Coloso 講座特徴4
講座特典

練習例題:30点
アートワーク例題:5点

クリエイティブコーダー
ジョンヒョの
ポートフォリオ

今回の講座で学ぶ
約30種類の例題の中で
一部を紹介致します。

練習例題

入門者も簡単にまねできる練習例題を通じて
インタラクティブアートワーク製作のための基礎を固めます。

アートワーク例題

学んだミニ例題をまとめて
完成度の高いアートワークを制作してみましょう。

講師紹介

ジョンヒョ
クリエイティブコーダー


はじめまして。
フリーランスのクリエイティブコーダー
ジョンヒョです。

私は現在、
文化空間「NEST」を運営しながら
古典的なメディアアートワークの
スタイルから離れた
新しいインタラクション方法を活用して
作業を進めています。

リアルタイムで反応するWeb基盤の
リモートパフォーマンスや
既存のインターフェースを再解釈し
インタラクティブな
キャラクターやイラストを作りながら
現代美術パフォーマンスから
メディアアート展示まで
様々な芸術分野での作業を行っております。

メディアアート、
インタラクティブアートワークを
自分で作ってみたいけど、
プログラミング言語は難しいという理由で
諦めてしまう方が大勢いらっしゃると思います。

そのようなデザイナーのために
コーディングのハードルを
思いっきって下げました。

今回の講座を通じて
数え切れない応用力と画期的な技術、
効率性まで揃えた
インタラクティブアートワークの魅力を
満喫して下さい。

背景イメージ
Coloso ジョンヒョ
クリエイティブコーダー ジョンヒョ

現)フリーランスエンジニア
現)クリエイティブコーティング 文化空間「NEST」代表



[参加プロジェクト]
- Sulwhasoo CULTURE PROJECT キャンペーン映像2022
- DMZ 探検ブラウザゲーム 2021
- 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」

Instagram
講座のポイント

この講座のポイント

どこでも見たことのない
クリエイティブコーディングツール
入門講座

リアルタイムで動くアートワーク制作のためにノードベースとコマンドベースのコーディング両方を学びます。それぞれの特性を直接比較分析し、各メディアに相応しい方法を選べられる応用力まで身に付けてみましょう。

Coloso ジョンヒョ 講座のポイント

データをコンテンツに!
インタラクティブの原理と
発想法を学ぶ

マウス、キーボード、サウンド、ウェブカメラ映像などの入力データと関数値を加工する色んな例題を学びながら、インタラクティブの原理に対する理解を深めます。なお、データをコンテンツに入れ替えるフレキシブルな発想法までトレーニングしてみましょう。

Coloso ジョンヒョ 講座のポイント

30種類のミニ例題で完成する
5つのインタラクティブアートワーク

初心者も簡単に学べられるように約30種類のミニ例題を通じて、独創的なアイデアが込められたコンテンツを実現する力を少しずつ鍛えます。この過程を踏まえていくと、自ら5つのインタラクティブアートワークが完成することができます。

Coloso ジョンヒョ 講座のポイント

講座内容
下記のような内容を
学べます。


(자동 구성) 가격이 인상됩니다.

지금이 최저가!
カリキュラム

カリキュラム
カリキュラム内容の
ご紹介

SECTION 01. TouchDesigner スタート: 2Dグラフィックとインタラクション

01. オリエンテーション : インタラクティブ作業物の様々な表現と手段

  1. 自己紹介と作業ポートフォリオの紹介
  2. 手段によるインタラクションの種類と事例
  3. 状況に応じて適切なツールを選ぶ方法

02. TouchDesigner : インターフェースとノードコーディング

  1. TouchDesignerのUI説明
  2. マウスとショートカットキーの操作方法
  3. Node - オペレーターとコンポーネントの説明
  4. Movie File In/Level/Transformオペレーターに繋げる

03. TouchDesigner : TOPオペレーターの理解

  1. Compositeオペレーターで映像を合成する
  2. Rectangle/CircleオペレーターとCompositeオペレーションオプションの原理
  3. Luma Mapで映像をマスキングする

04. TouchDesigner : ウェブカメラを活用したインタラクション

  1. Luma BlurオペレーターとLuma Mapの活用
  2. DisplaceオペレーターとLuma Mapの活用
  3. Time machine/Texture 3DオペレーターとLuma Mapの活用

05. TouchDesigner : TOPオペレーターを活用したアートワーク製作

  1. 3Dシーンを実現するための3つのコンポーネント
  2. 揺らめく球体作り
  3. Luma Blur/Displaceを応用して効果を加える
  4. パラメーターによって異なるイメージ作り
SECTION 02. TouchDesignerの活用: 3D グラフィックとインタラクション

06. TouchDesigner : SOPオペレーターの理解

  1. 様々な立体図形オペレーターと頂点の概念
  2. Geometryの適用
  3. Camera/Lightを扱う
  4. Matオペレーターと質感の表現

07. TouchDesigner : CHOPオペレーターの理解、サウンド インプット

  1. Speedオペレーターで変わる数値の確認
  2. LFOオペレーターで繰り返される 数値の確認
  3. サウンド インプットを活用してグラフィックに変化を加える

08. TouchDesigner : SOPオペレーターを活用したアートワーク制作

  1. Particleオペレーターの活用
  2. Instancingで求める個体をコピーする
  3. 3Dモデルの形からパーティクル効果の制作
  4. パラメーターによって異なるイメージ作り

09. TouchDesigner : DATオペレーターとの通信

  1. Touch In Outオペレーターでの通信
  2. Wifi内の他のパソコンとの通信
  3. 様々な通信方法によるメリットとデメリットの紹介
SECTION 03. p5js 基礎: 基本図形でインタラクティブアートワークを作る

10. p5js : Web Editorインタフェースとコーディングを始める

  1. p5jsの紹介
  2. Web Editorインタフェースの説明
  3. canvas生成とbackground関数で背景色を塗る、色数値の入力方法

11. p5js : 基本図形を描く

  1. rect/circle関数で四角形と円を描く
  2. fill/stroke関数で図形にスタイルを与える
  3. point/line/triangleの頂点入力と図形を描く
  4. push/pop/translateを活用して図形をレイヤー化する

12. p5js : 関数の呼び出しとインタラクション

  1. mouse関連の呼び出し関数とインタラクション
  2. keyboard関連の呼び出し関数とインタラクション
  3. draw関数呼び出しの理解をアニメーション制作
  4. frameCount/mouseX/mouseYのシステム変数活用

13. p5js : インタラクティブアートワークの制作

  1. frameCountで規則的に変化するグラフィック作り
  2. マウスの動きに追従するグラフィック作り
  3. インタラクティブなアイデアと良いインタラクションを作る方法
SECTION 04. p5js 深化: 変化する値とインタラクション

14. p5js : 変数と条件文

  1. インタラクションによって変化する値の保存
  2. 変化する値によるグラフィックの表現
  3. 条件文でダイナミックな変化作り

15. p5js : 状態によって変化するグラフィック作り

  1. 状態によって徐々に変化するグラフィックのデザイン
  2. 最大値を制限する
  3. 数値の初期化を通じたインタラクションの繰り返し

16. p5js : Vectorを活用した複雑なインタラクション

  1. dist関数を活用したインタラクション
  2. Vectorの概念とcreateVector関数
  3. Vectorを活用した加減乗除
  4. limitメソッドで動きを制限する

17. p5js : インタラクティブアートワークの制作

  1. キャラクターの顔をデザインする
  2. マウスの動きに追従するモーション作り
  3. 部分的に範囲を調整し立体感を作る
  4. インタラクションごとに追加の変化作り
SECTION 05. リモートコントロールを活用したインタラクティブアートワーク

18. ウェブサーバーの具体化

  1. glitchサービスの紹介
  2. ウェブページに自分のp5jsプロジェクトをアップロードする
  3. インタレクションによる通信の適用
  4. 通信された値でグラフィックを変化させる

19. p5jsでウェブアプリの制作

  1. ボタンの実現
  2. スライダーの実現
  3. コントローラーでp5jsプロジェクトをインタラクションする

20. p5js モバイルウェブアプリを活用したTouchDesignerのコントロール

  1. TouchDesignerアートワークにsocket.ioオペレーターを繋ぐ
  2. パラメーターによって異なるインタラクションを適用する
  3. リモートインタラクションのアイデアと事例の紹介

インタビュー
クリエイティブコーダー ジョンヒョが
お話したいこと

背景イメージ
Question. 01
自分の強みは何だと思いますか?


私はインタラクティブとモーショングラフィックスを作業する際に、グラフィックと動きを作るルールをモジュール化します。モジュール化されたルールはリアルタイムで変形が可能で、他のモジュールと結合して使用することもできます。一つのルールで色んな物を派生させることができるため、短い時間内に数々のダイナミックな結果物を作り出せるのが自分ならではの強みだと思います。

Question. 02
今回の講座を通じて学べる
自分ならではのノウハウは何でしょうか?


講座のカリキュラムから様々な例題を通じて形態、動き、インタラクションを具現化する色々な機能モジュールを結合する方法を学べます。モジュール同士の様々な組み合わせとコントロールする設定値を学び、色々なスタイルのグラフィックとモーションの表現方法を経験できます。例えば、パーティクルの例題から重力の方向と乱気流の大きさによって燃え上がる炎と溢れる砂利のような正反対の雰囲気のアートワーク表現の全てができるようになります。

Question. 03
インタラクションデザインの将来について
どのように思いますか?


既存のデザインツールだけでは実現できない高次元で非定型的なグラフィックに対する需要が増えつつあります。美術館から広告までインタラクティブメディアに簡単に触れることになり大衆も慣れています。それゆえ、インタラクションデザインをプログラミング言語だからと難しく感じて諦めないで、今回の講座を通じて様々なインタラクションアートワークを自ら経験してみて下さい。

使用プログラムについて
ご案内します。

当講座は、以下のツールを使用します。

TouchDesigner (2021.16410 NON-COMMERCIAL)
p5js (1.4.0)


※円滑な受講のため、最新バージョンのご使用を推奨します。
※TouchDesignerの場合、解像度1280x1280px以上で作業するためには別途購入が必要になります。
※このページは英語ページを基準に説明します。

TouchDesigner p5js
おすすめの講座

おすすめの講座
この講座を見た方は
こちらもチェック!

ご注意事項

*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
*講座の返金規定はColosoの返金ポリシーに準じます。▶ 返金ポリシーはこちら
* 受講、例題使用範囲などの知的財産権、機器台数制限に関する情報はFAQ 欄でご確認ください。