0

28:58

TouchDesigner tutorial Interactive with camera

Touchdesignerを使ってカメラに反応するインタラクティブな作品の作り方を紹介します。 今回使用した画像はオリジナルの絵本「はぐるま島ココロのひみつ」のキャラクターです。 絵本はこちらで無料で読めますのでぜひ♬ はぐるま島HP 絵本無料公開中！ https://hagurumaisland.com はぐるま島ココロのひみつ kindle https://amzn.asia/d/4CGd5Fq キャラクターの画像は販売しています。購入後自由にお使いください♬ Haguruma Island NFT OpenSea https://opensea.io/ja/collection/hagurumaisland ハートが爆発する映像はこちらから無料でダウンロードできます。 Explosion of Heat[動画合成素材] ——————————————————————————- WEBカメラを使って動き[モーション]を撮りますが、僕のPCにはWEBカメラがついてないので、NDIを使ってiPhoneから映像は取り込んでいます。 NDIとTouchdesignerの使い方はこちらの動画を参照してください。 Touchdesigner[NDI][ライブ配信]複数のカメラを切り替えてライブ配信する方法 キャッシュでモーションキャプチャできたらキャラクターをランダムに動かします。 そしてキャラクターとモーションが重なった部分をトレースで認識させて、映像再生のボタンにします。 パーティクルを使っていないので、前回までのTouchDesigner tutorialより動作は軽いと思います。 僕もまだわからない部分が多いので、もっといい方法あれば教えてください～♬ ——————————————————————————- TouchDesigner tutorial Interactive with camera 00:20 Interactive作品の紹介 01:11 NDIで接続　モーションをとる方法 10:07 キャラクターをランダム配置 17:22 キャラクターとモーションの当たり判定 23:15 ハートの映像を流す方法 24:45 効果音の再生 ——————————————————————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa […]

Guimapapa Channel

January 6, 2023

0

0

06:16

Touchdesigner tutorial動きに反応するDMXライトの作り方・制御方法[インタラクティブ]

TouchdesignerとDMXライトとWEBカメラを使って、リアルタイムの映像[インタラクティブアート]にリンクするプログラムの作り方を紹介します。 以前の動画で動いたところだけ反応するインタラクティブアートの作り方を紹介しました。 TouchDesigner[Interactive art]動きに反応して変化する映像 モーショントラッキング こちらのTouchdesignerのプログラムを使いますので、詳しく知りたい方は確認してください。 WEBカメラとTouchdesignerを使ってインタラクティブな作品が作れたらあとはそれをchopに変換し、DMXライトへと繋いでいきます。 動きに反応してDMXライトも光るようになります。 真っ暗な場所に赤外線カメラを置いて、人が歩いたらDMXライトを反応させる演出ができます。 Touchdesignerを使ってカメラ[動き]ではなく、音にライトを反応させる方法はこちらです Touchdesigner チュートリアル DMXライトを音に反応させる方法 [インタラクティブ] #touchdesigner #interactiveart #DMXライト ———————————————————————- 使用した機材 DMXライト×２ ultoraDMX Micro　USB⇔DMX変換　 MacBookPro ———————————————————————- 0:31 使用する機材の紹介 0:40 Touchdesignerでインタラクティブアートの作り方 3:55 DMXライトの接続 ———————————————————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

September 20, 2022

0

0

08:01

Touchdesigner tutorial 音に反応するDMXライトの作り方・制御方法[インタラクティブ]

TouchdesignerとDMXライトを使って、リアルタイムの音（音楽）に反応するプログラムの作り方を紹介します。 ※声にも反応します。 内容は少し変わりますが、音に反応する映像の作り方はこちらでも紹介しています。詳しくはチュートリアル動画を確認してください Touchdesigner Interactive art[インタラクティブアート]音に反応する映像 Touchdesigner tutorial[音に反応する映像]デプス TouchDesigner Video that reacts to voice[リアルタイムに反応するサウンドバーの作り方] Touchdesignerで音に反応する作品が作れたら、後はその数値をchopに変換して、RGBで分けて繋いでいきます。 最初は数値が低いので、Mathで最大255まで上げてください。 もっと細かく音分けた作品をTouchdesignerで作って変換すればもっと面白い作品になると思います。 DMXライトをお持ちの方はぜひチャレンジしてみてください♬ #touchdesigner ———————————————————————- 使用した機材 DMXライト×２ ultoraDMX Micro　USB⇔DMX変換　 MacBookPro ———————————————————————- 0:46 DMXライト接続機器の紹介 0:53 Touchdesigner音に反応する映像の作り方 3:48 DMX Lightへ変換 接続 6:15 外部ディスプレイへ接続する方法 ———————————————————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

September 12, 2022

0

0

05:30

Touchdesigner 照明DMXライトを操作する方法

Touchdesignerで照明DMXライトを操作・制御していきます。 使用した機材/環境 ・DMXライト × 2台 ・DMXking ultraDMX Micro ・mac book pro ・Touchdesigner ultraDMX MicroはDMX(MIDI)信号をUSBに変換してPCに接続できます。 macの場合だと特にダウンロードなども必要なかったです。 WIndowsでも問題なく使用できます。 詳しくはこちらのHPより↓ 株式会社ラセンス[DMX kingの国内唯一の正規代理店] https://dmx.lasens.com/products-4/ 今回はDMXライトのRGBを分割してスライダーで制御させてみました。 Touchdesignerを使うと映像でライトを制御するだけでなく、音に反応したり、カメラに反応したりとインタラクティブにも活用できそうです。 ライトいじるの楽しいですね！！ 次回は照明の作品を作ってUPしたいと思います。 プロジェクションマッピングソフト madmapperでDMXを制御する方法もこちらでUPしています。 madmapper DMXライトを操作する方法 #Touchdesigner #DMXライト ———————————————————————————————- 00:10 DMXライト 変換機材の紹介 00:28 TouchdesignerとDMXの接続方法 01:39 スライダーでDMXの数値を受け取る 02:50 DMXライトを操作 03:45 もう1台のDMXライトを操作 ———————————————————————————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

July 25, 2022

0

0

12:53

Touchdesigner tutorial[日本語][BulletSolver][collision]part2

TouchDesignerのBulletSolverを使ってcollision[当たり判定]をとっていきます。パート2のチュートリアルです。 パート1はこちら TouchDesigner tutorial[日本語][BulletSolver][collision]Part1 パート1で球体に重力と当たり判定[collision]を設定する事ができました。 今回はその球体1つ1つを認識させて当たったら光ようにプログラムしていきます。 BulletSolver内でのオブジェクトの当たり判定はBulletSolver Chopを使います。 1つ1つの球体ポジションが数値として取れるので、あとはObject chopを使って距離を測り1定の距離に近づくと反応するように設定していきます。 —————————————- Touchdesigner tutorial[日本語][BulletSolver][collision]part2 0:18 BulletSolver Chopの設定 1:13 球体のポジションに変換 2:29 chopに変換して当たり判定をとる 7:15 球体を光らせる 11:30 bloomで加工 —————————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #touchdesigner #BulletSolver #collision

Guimapapa Channel

March 3, 2022

0

0

11:25

TouchDesigner tutorial[日本語][BulletSolver][collision]Part1

TouchDesignerのBulletSolverを使ってcollision[当たり判定]をとっていきます。BulletSolverを使っているので重力も加えています。 マウスで操作するActorの球体とBulletSolverで配置したActorの球体が当たると反発し光ります。 今回のTouchDesigner tutorialではActor同士の当たり判定[collision]と球体を複数配置してBulletSolverの中で枠を作っていきます。 collisionを一つ一つ認識させ当たると光るプログラムはpart2で紹介します! —————————————— 1:40 マウスで操作するActor 5:23 重力で制御するActor 7:08 ActorとActorの当たり判定[collision] 8:57 BulletSolverの中で枠を作る —————————————— ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #touchdesigner #BulletSolver #collision

Guimapapa Channel

February 24, 2022

0

0

25:11

Touchdesigner tutorial[Vj Loop][Background stock video]

TouchdesignerでVJで使えそうなLoop素材を作っていきます。 Boxをランダムに作り、八角形のチューブに配置します。 チューブを2つ並べてカメラで途切れが見えないようにLoopさせています。 チュートリアル長くなってしまいましたが、最後まで見てくれるとうれしいです! ————————– 0:25 土台になるBOX作り 4:05 BOXを8角形に並べる 9:34 Loopさせる 13:44 Lightの調整 15:20 ワイヤーフレームを作る 20:04 色付け ————————– 今回Touchdesignerで作った動画はこちらで販売してます。 VJ Loop[動画素材] ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner #VjLoop

Guimapapa Channel

February 10, 2022

0

0

09:09

Touchdesigner[SkeletonTracking][Realsense][Nvidia Flex Solver]

TouchdesignerとRealsenseを使ってインタラクティブアートの作成をしていきます。 スケルトントラッキングポイントにboxをコピーして配置し、Nvidia Flex Solverを使って作りました。 Nvidia Flex Solverを使えばトラックポイントに配置したboxの当たり判定や、パーティクルの流れなども簡単に作れます。 次回は[Bullet Solver]を使ってインタラクティブアートを作ってみたいと思います! 前回チュートリアルで作ったトラッキングポイントを使っていきますので、まだの方は先にこちらを見てください。 [SkeletonTracking]Touchdesigner Realsense 使用したRealsenseCamera https://hb.afl.rakuten.co.jp/ichiba/1f951b9b.0a8e2b33.1f951b9c.c1df3d66/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2F3top%2F3-0f0400-000077%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9 #Touchdesigner #InteractiveArt #Realsense #SkeletonTracking #NvidiaFlexSolver —————————- 0:25 前回のチュートリアルとの変更(トラッキングポイント) 1:46 2Dに変換 4:29 カメラ位置調整 5:13 Nvidia Flex Solverの設定 —————————- ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

January 26, 2022

0

0

13:11

[SkeletonTracking]Touchdesigner Realsense

TouchdesignerとRealsenseを使ってスケルトントラッキングを行っていきます。 各ポイントを一つずつセレクトで分けていきます。 Chop toでトラッキングポイントのみを取っていく方法と、トラッキングポイントを線で繋いで棒人間を作っていきます。 RealsenseCameraでスケルトントラッキングを認識させるはSkeletonTracking SDKが必要です。こちらからインストールでます↓ Skeleton Tracking SDK for Intel https://www.intelrealsense.com/skeleton-tracking/ スケルトントラッキングを使って制作してみた↓ Touchdesigner[SkeletonTracking][Realsense][Nvidia Flex Solver] 使用したRealsenseCamera https://hb.afl.rakuten.co.jp/ichiba/1f951b9b.0a8e2b33.1f951b9c.c1df3d66/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2F3top%2F3-0f0400-000077%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9 #Touchdesigner #SkeletonTracking #Realsense ———————————– 1:40 RealsenseでSkeletonTrackingをとる方法 2:50 トラッキングポイントを分ける 5:50 Chop toに変換 7:00 トラッキングポイントを一つにして完成 9:58 Lineに変換して棒人間の制作 ———————————– ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

January 24, 2022

0

0

12:23

TouchDesigner tutorial[RealseseCamera][Particle][InteractiveArt]

TouchdesignerとRealsenseCameraを使ってインタラクティブアートを作っていきます。 パーティクルを画面いっぱいに静止させて、Realsenseのデプスの動きに反発させています。 Particle SopへはMetaball SopとForce sopを使って繋げます。 RealsenseCamera D435 https://hb.afl.rakuten.co.jp/ichiba/1f951b9b.0a8e2b33.1f951b9c.c1df3d66/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2F3top%2F3-0f0400-000077%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9 #touchdesigner #realsense #デプスカメラ #インタラクティブアート ————————————– 0:37 Realsenseのデプス設定 1:55 デプスからSOPへの変換 2:43 静止するパーティクルの設定 4:30 色付け サイズの調整 9:33 パーティクルへ繋ぎ完成 ——————– ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

January 21, 2022

0

0

06:13

Touchdesigner チュートリアル[北陽センサー]触って弾けるインタラクティブアートの作り方

Touchdesignerと北陽センサーを使って、触って弾ける(ボール投げでもOK)映像を作ります。 北陽センサーとTouchdesignerの位置調整だけしっかり行えれば、星の光と自動的に動く光の当たり判定をとるだけで結構簡単に作れます。 動画で使用している星が弾ける光はこちらで無料ダウンロードできます。 Explosion of stars[動画の合成素材] ※北陽センサーとPCの認識方法、Touchdesignerと北陽センサー、プロジェクター位置調整は前回の動画を参照してください。 ・TouchDesigner Hokuyo UST-10LX[HokuyoChop]測域センサ 北陽センサ使い方 ・必要な機材 PC 北陽センサー https://a.r10.to/hU2YI0 プロジェクター BenQ 3000lm https://a.r10.to/hDw3Jf #Touchdesigner #北陽センサー #インタラクティブアート ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

December 17, 2021

0

0

14:11

Touchdesigner tutorial[音に反応する映像]デプス

Touchdesigner チュートリアル 今回は音に反応する映像作りを紹介します。 球体に小さな箱をたくさん配置して、デプスを使ってぼかしも追加してみました。 リアルタイムの音楽や声に反応させる事ができます。 #Touchdesigner #TouchdesignerTutorial #インタラクティブアート #InteractiveArt Touchdesigner tutorial 0:30 Sphereを配置 土台作り 1:41 Sopからsoptoに変換 Geometry変換への下準備 3:44 Boxを設置してGeometryへ Topに変換 6:22 デプスを設定 9:08 ワイヤーフレーム 9:40 音の追加　ノイズをリアルタイムに変更 12:02 bloomで色味の調整 参考にしたTouchdesigner本 https://a.r10.to/hy91e7 ぎまパパチャンネル[プロジェクションマッピング/Scratch/TouchDesingnerの使い方/VJ] https://www.youtube.com/channel/UCes28LH1ggowLvNBa_sR5Sw FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

July 19, 2021

0

0

19:44

TouchDesigner tutorial[Interactive art]インタラクティブアート

TouchDesignerとカメラを使ってインタラクティブアートを作っていきます。 カメラはRealsenseCameraなどのデプスカメラでも普通のPCカメラでもどちらでも大丈夫です。 TouchdesignerのSpring SOPを使ってバネのように動くプログラムになります。 一見むずしそうにも見えますが、Group SOP/Spring SOP以外は今までのチュートリアルの復習になるので大丈夫です!! やってみましょ〜! ※Touchdesignerが重い(フレームがない)場合はCopyしたSphereSopのPrimitive TypeをMesh→Polygonに変えてください!説明忘れてました🙏 参考にしたTouchdesigner tutorial ————————— ●TouchDesigner tutorial[Interactive art]インタラクティブアートの作り方 0:43 TouchDesignerを開きLineSOP最初のポイントを作成 1:37 Copy SOPで横に並べてインタラクティブの土台を作る 2:43 Group SOPでポイントの固定 5:36 Spring SOPでバネの様に反応できるプログラムを作る 6:37 カメラを設置 動きを取れるように調整する 8:08 Traceしてカメラの動きをSOPに変換 8:57 Copyで動きにSphereをつける 9:39 Metaballを繋ぎSpring Collsionに反応するようにする 11:52 Line Thick Sopを繋ぎ太さを調整 15:08 TOPに変換 色味などを調整しインタラクティブアートの完成 #Touchdesigner #InteractiveArt #インタラクティブアート ぎまパパチャンネルHP[プロジェクションマッピング/Scratch/TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

June 21, 2021

0

0

19:44

TouchDesigner tutorial[Interactive art]インタラクティブアート

TouchDesignerとカメラを使ってインタラクティブアートを作っていきます。 カメラはRealsenseCameraなどのデプスカメラでも普通のPCカメラでもどちらでも大丈夫です。 TouchdesignerのSpring SOPを使ってバネのように動くプログラムになります。 一見むずしそうにも見えますが、Group SOP/Spring SOP以外は今までのチュートリアルの復習になるので大丈夫です!! やってみましょ〜! ※制作中Touchdesignerのフレームが悪い場合はCopyしたSphereSopのPrimitive TypeをMesh→Polygonに変えてください🙏 ————————— ●TouchDesigner tutorial[Interactive art]インタラクティブアートの作り方 0:43 TouchDesignerを開きLineSOP最初のポイントを作成 1:37 Copy SOPで横に並べてインタラクティブの土台を作る 2:43 Group SOPでポイントの固定 5:36 Spring SOPでバネの様に反応できるプログラムを作る 6:37 カメラを設置 動きを取れるように調整する 8:08 Traceしてカメラの動きをSOPに変換 8:57 Copyで動きにSphereをつける 9:39 Metaballを繋ぎSpring Collsionに反応するようにする 11:52 Line Thick Sopを繋ぎ太さを調整 15:08 TOPに変換 色味などを調整しインタラクティブアートの完成 #Touchdesigner #InteractiveArt #インタラクティブアート ぎまパパチャンネルHP[プロジェクションマッピング/Scratch/TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

June 7, 2021

0

0

13:58

TouchDesigner[RealSenseCamera][WEB Camera]Interactive art box

TouchDesignerとCameraを使って、インタラクティブアートを作っていきます。 動いた場所にBoxがぐるぐる回るようなインタラクティブアートです。 テクスチャはマインクラフトのブロックを使ってみました。 好みで好きなテクスチャを使ってください デプスカメラでも普通のPCカメラやWEBカメラでも作れます。 #TouchDesigner #InteractiveArt #MotionCapture ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

May 11, 2021

0

0

17:07

TouchDesigner[RealsenseCamera][Particle]Interactive art

TouchDesignerを使ってParticleが動きについてくるプログラムを作っていきます。 （With English subtitles Please set on youtube） 動きはデプスカメラのRealsenseCameraを使用します。 RealsenseCameraでデプスをとってトレースしコピーでポイントにオブジェクトを貼り付けます。 その貼り付けたオブジェクトとParticleを同期させていきます。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner #RealsenseCamera #InteractiveArt

Guimapapa Channel

April 26, 2021

0

0

Touchdesinger 時間を指定して自動再生[Automatic playback at specified time]

Touchdesginerで時間(曜日など)を指定して映像を自動再生させます。 プロジェクションマッピングなど、常設してこの時間に映像を流したい、、などそういった時に使えると思います。 やる事は簡単で、TouchdesignerのClock CHOPを使います。 この中にPCから読み込まれる時間・日付・年度など細かくパラメータがとれるので、ここから振り分けていくだけです。 Touchdesignerで動画再生をしてSyphonなどでmadmapperにリンクさせればプロジェクションマッピングも自動再生ができます。 #TouchDesigner #MadMapper ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

April 19, 2021

0

0

TouchDesigner Video that reacts to voice[リアルタイムに反応するサウンドバーの作り方]

TouchDesignerを使ってリアルタイムの声に反応する映像を作っていきます。 今回は周波数を分けて、サウンドバーを作ります。 こちらのチュートリアルを参考にさせてもらいました。 ——————– Use Touch Designer to create images that respond to real-time audio. This time, we will divide the frequency to make a sound bar. #Touchdesigner #InteractiveArt ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

April 8, 2021

0

0

TouchDesigner[iPhoneLight]InteractiveArt

TouchDesignerを使ってライトに反応するインタラクティブアートを作っていきます。 ※iPhoneじゃなくていいです。光ればなんでもいけます。 プロジェクターを使って投影しながら行えばなかなか面白い演出になるんじゃないかと思います。 ※できるだけ暗い場所で試してください。 #TouchDesigner #インタラクティブアート #InteractiveArt ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

January 12, 2021

0

0

Touchdesigner[iPhoneCamera]複数のカメラでライブ配信する方法

Touchdesignerを使って複数カメラを切り替えライブ配信する方法をUPします。今回はYouTubeのライブ配信を設定しました。 サクッと手軽に始められるようにiPhone iPadのカメラを使います。 ※WEBカメラも合わせて今回は3カメを準備しました。 ライブ配信までの流れはこんな感じです。 iPhone iPadカメラ → NDI HX Camera Touchdesigner → NDI in→3カメ認識→NDI out NDI Virtual Input → OBS →YouTubeライブ配信 ※iPhone iPadは同じWiFi環境にしてください。 これでたくさんのカメラを設定できたら面白そう!! また試してみたいと思います。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner

Guimapapa Channel

December 2, 2020

0

0

TouchDesignerでGame作り[パート4]

TouchDesignerでゲーム作り今回で4回目(ゲーム作りのチュートリアル終了) これまでのチュートリアル3回で全体的な動きと撃った玉が当たる(当たり判定)まで認識させる事ができました。 今回は当たったら-1や音がなるなど細かいところを作っていきます。 ※ロケット側の動きと当たり判定はUFO側と同じようにすればできるので作り方は省きました。 TouchDesignerでGame作り[パート3] ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #TouchDesigner

Guimapapa Channel

November 25, 2020

0

0

TouchDesignerでGame作り[パート3]

TouchDesignerでゲームを作っていきます(パート3) 前回まででキャラクターの動きと玉を撃つまでは完成しました。 今回は撃った玉とUFOの当たり判定をとっていきます。 Object Chopを使って玉とUFOの距離を測り、三角形の関数を利用して[当たり]と認識させます。 三平方の定理といいます。 一見難しそうに見えるんですが、一度理解すると簡単です。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa TouchDesignerでGame作り[パート2] TouchDesignerでGame作り[パート4] #TouchDesigner

Guimapapa Channel

November 25, 2020

0

0

TouchDesignerでGame作り[パート2]

TouchDesignerを使って簡単なゲームを作り パート2 今回はUFO(敵キャラ)を自動的に動かして、玉との当たり判定をとるバリアみたいなもの(Collider)をつけていきます。 TOP(2D)で動かすUFOと、SOP(3D)で動かすCircleとの動きを合わせてください。 TouchDesignerでGame作り[パート1] TouchDesignerでGame作り[パート3] ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #TouchDesigner

Guimapapa Channel

November 25, 2020

0

0

TouchDesignerでGame作り[パート1]

TouchDesignerを使って簡単なゲームを作ってみました。 子供向けにインタラクティブな作品を作っていると、どうしてもほしくなるゲーム要素です😁 玉を撃つや、当たり判定など個人的には普段あまり使って事なかったオペレーターも使う事ができたのでよかったです。 長くなったので4回に分けています。 1回目のゲーム作りは、飛行機をキーボードで操作して、玉を撃つ事ができるようになります。 TouchDesignerでGame作り[パート2] ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #TouchDesigner

Guimapapa Channel

November 19, 2020

0

0

TouchDesigner Dji Tello[ドローンを飛ばしてみよう]

Touchdesignerを使ってドローンを飛ばします 制御するにはTellのHPからSDKの情報が必要です。 ブログにも書いときますね。 TouchDesigner Dji Tello ドローンを飛ばしてみよう 割と簡単に制御できて、飛ばす事ができます。 ロボットとかも制御できるようになると面白そう!! ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner #ドローン #Tello

Guimapapa Channel

November 4, 2020

0

0

TouchDesigner Hokuyo UST-10LX[HokuyoChop]測域センサ 北陽センサで認識させる方法

測域センサの北陽UST-10LXとTouchDesignerを接続させていきます。 HokuyoChopを使って認識させます。 北陽センサー UST-10LXを床に置き、プロジェクターから丸い光をだして、触った所にTouchDesignerの光が当たるようにします。 これが結構ややこしくて（笑） なんどやっても忘れるので自分用でもあります! なので詳しくは説明できません（笑） でも同じように設定すれば北陽センサ UST-10LXとTouchDesignerがうまく認識して、プロジェクターからの光がピタッと合うようになります。 インタラクティブなものをどんどん作っていきたいですねー! 参考にしたURL https://qiita.com/snafkinliberty/items/b917cb02c70c7c95e64b ブログにも詳しく書いて置きます 北陽電気の測域センサ UST-10LXとTouchDesigner[HokuyoChop] #TouchDesigner #測域センサ #北陽センサ #UST10LX #HokuyoChop ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

October 29, 2020

0

0

TouchDesigner[RealSense D435 Camera]Particle collision

RealSense D435 CameraをつかってParticleと当たり判定[collision detection]をとっていきます。 いろいろなインタラクティブの表現に使えるので便利です。 RealSenseデプスカメラは低価格・コンパクトでちゃんとデプスをとってくれるのでオススメです。僕はRealSense D435を使ってます。 ※現在の所、WindowsのTouchDesignerにのみ対応です。 ※後、USB3.0です。間違ってUSB2.0では動きません→実際に間違えて焦った😁 #TouchDesigner #RealSenseCamera ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

October 5, 2020

0

0

TouchDesigner[ParticleSOP][Mouse]マウスについてくるパーティクル

TouchdesignerでParticleをリアルタイムに制御していきます。 ParticleSOPとMouseCHOPを使っていきます。 Particleを上から降らせてマウスに集まってくるように設定します。 クリックすると爆破しますよ その他にもParticleSOPの機能 [Collision][Force][Surface Attracrors] も簡単に説明しています。 #Touchdesigner ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa

Guimapapa Channel

October 1, 2020

0

0

TouchDesigner Particle Rotation[桜の花びら]

TouchDesignerを使って桜の花びらをちらちらふらせてみました。 Particle Sopを使っていくのですが、回転の所をランダムにするのがに難しかったりします。 僕もよくやりかたを忘れてしまうので動画にして残しました😁 桜の花びらではなく、雪の結晶やもみじの葉っぱなどでも同じようにちらちらふらせる事ができます。 Particle Sopを使いこなすともっといろいろできるのでまだまだUPしていきたいと思います! ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner

Guimapapa Channel

September 25, 2020

0

0

TouchDesigner[RealSenseCamera][Particle]デプスカメラでインタラクティブ

Real Sense Depth Camera[リアルセンスデプスカメラ]D435でインタラクティブアートを作っていきます。 今回使用したRealsenseCamera↓ https://a.r10.to/hysEyF Windows10のTouchDesignerを使って作業しています。 ※Real Sense Depth Camera自体はMacでも動きますが、MacのTouchDesignerでは現在の所動きません(2020/7) ※音が悪いです。すいません🙏 前回の動画で動きに反応する映像を作りました。今回はデプスカメラを使っているので、動きではなく、その範囲に写った人(物)に反応させる映像作りができます。 デプスカメラで認識した(写った)所からパーティクルを発生させていきます。 デプスカメラの中でもコンパクトで非常に使いやすいReal Sense Cameraです。箱から出した時も、え!この大きさでいいの!?っとびっくりしました。 お値段もそれほど高くはないと思うので、一度試してみてください♫ ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #TouchDesigner

Guimapapa Channel

July 7, 2020

0

0

Touchdesigner Interactive art[インタラクティブアート]音に反応

Touchdesignerでインタラクティブアート[体験型]を作っていきます。 音に反応してサークルが波紋のようにひろがります。 声などのリアルタイムな音も音楽を流して反応させる事も👍 円に合わせてパーティクルを一緒に飛ばしたりいろいろな使い方ができそうです! ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by OneMovie1 #Touchdesigner

Guimapapa Channel

June 23, 2020

0

0

TouchDesigner Particle Fireworks[パーティクルで花火]パート2

TouchDesignerのParticleオペレーターを使って花火を作っていきます(パート2) パート1でParticleの土台できました。 パート2では、Particleを2D(cameraを設置)へと変換していきます。 後は花火として綺麗に色付けや数を決めていきます。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner #Particle #Fireworks

Guimapapa Channel

June 18, 2020

0

0

TouchDesigner Particle Fireworks[パーティクルで花火]パート1

TouchDesignerのParticleオペレーターを使って花火を作っていきます。 パート1ではランダムの場所からたくさんのパーティクルが弾けるように土台作りをしていきます。 個人的にですがTouchDesignerの中でも1番楽しいオペレーターがParticleです。 楽しんで作っていきましょ〜✨ ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner #Particle #Fireworks

Guimapapa Channel

June 18, 2020

0

0

Touchdesigner[タッチデザイナー]projection mapping

Touchdesignerを使ってプロジェクションマッピングしてきます。 kantanmapperという便利なツールがもともと入ってまして、そちらの使い方を説明していきます。 ※Touchdesignerさんありがとうございます!! kantanmapperを使えばすぐにプロジェクションマッピングができるようになります。すごいツール。 せっかくなのでSyphone[サイフォン]を使って別のアプリケーションと連動させる方法もUPしました。 MadMapper[マッドマッパー]を使っています。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdeigner #MadMapper #projectionmapping

Guimapapa Channel

June 17, 2020

0

0

TouchDesigner[タッチデザイナー]簡単VJシステム作り方 パート3

TouchDesignerでシンプル簡単VJシステム パート3 前回で土台は完成しました。 今回はその土台を左右に振り分けて、スライダーで制御できるようにしていきます。 真ん中にスライダーを追加して映像を切り替えるとVJのように!! まだまだこれだけでは足りないとは思いますが、これを土台にしてエフェクトをボタンで制御したり、映像を組み合わせたりなどいろいろとできると思います。 ※Touchdesignerの動作が重い方は、映像ファイルの形式を.Hapにして試してください。 今回で簡単VJシステムは完成となります。 お疲れ様でした！ ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by OneMovie1

Guimapapa Channel

June 16, 2020

0

0

TouchDesigner[タッチデザイナー]簡単VJシステム作り方 パート2

TouchDesignerでシンプル簡単VJシステムを作っていきます(パート2) 前回使う動画をTouchDesignerに入れて、簡単なエフェクトなどを追加しました! 今回はその動画をスイッチオペレーターを使ってひとまとめにします。 そして、動画をクリックしたら映像が切り替わるように設定していきます。 ぎまパパチャンネルHP[プロジェクションマッピング・Scratch・TouchDesingnerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by gimapapa #Touchdesigner

Guimapapa Channel

June 15, 2020

0

0

TouchDesigner[タッチデザイナー]簡単VJシステム作り方 パート1

TouchDesignerでシンプルで簡単なVJシステムを作っていきます。 一応、初心者の方でもわりやすいように説明はしているっと思います。 パート1ではTouchDesignerに映像を取り込んでよく使う?シンプルで便利なオペレーターを繋げていきます。 これをきっかけにTouchDesignerやVJ・映像に興味をもってくれるといいですね♫ ぎまパパチャンネルHP[プロジェクションマッピングやスクラッチの作り方 TouchDesignerの使い方] https://oneaction.mobi/gimapapa/ FaceBook https://www.facebook.com/hiroshige.gima Twitter Tweets by OneMovie1 #Touchdesigner #VJ

Guimapapa Channel

June 15, 2020

0