SlideShare une entreprise Scribd logo
1  sur  55
Télécharger pour lire hors ligne
Webデザイン
第10回:HTML5実践
Three.jsで3Dプログラミング
2013年11月18日、 11月25日
多摩美術大学 情報デザイン学科メディア芸術コース
担当:田所淳
今日の内容
‣ Three.js というJavaScriptのライブラリを使用して、Webブラ
ウザ上で3Dプログラミングに挑戦します!
Webブラウザで3Dグラフィクスを扱う
WebGLについて
‣ Webブラウザ上で3Dグラフィクスを扱うには…
‣ WebGLという標準仕様が策定されている
‣ 非営利団体のKhronos Groupで管理
‣ 公式サイト: http://www.khronos.org/webgl/
WebGLについて
‣ ただし、WebGLで自由に3DCGのプログラミングするのは、か
なり大変…
‣ 3D座標の操作のための様々な数学的な知識を前提とする
!

‣ そこで今回は、JavaScriptで容易に3Dを扱うことのできるライ
ブラリを導入してみたい
Three.js について
Three.jsとは
‣ WebGL (とCanvas) を使用して高度な3D表現を可能とする、
Javascriptのライブラリ
‣ MITライセンスの、オープンソースプロジェクト
‣ Mr. Doobを中心に多くのコラボレーターと共に開発が現在も進
行中
!

‣ ※ MITライセンス - ソフトウェアライセンスのひとつ
‣ ソフトウェアを誰でも無償で無制限に扱って良い。ただし、著
作権表示および本許諾表示をソフトウェアのすべての複製また
は重要な部分に記載しなければならない。
‣ 作者または著作権者は、ソフトウェアに関してなんら責任を負
わない。
Three.js
‣ まずは、Three.jsのプロジェクトページをみてみる
‣ http://mrdoob.github.com/three.js/
Three.js
‣ 様々な素晴しいサンプルがあるので、いくつか紹介
jsdo.it でThree.jsを使うには
‣ jsdo.it には、あらかじめThree.jsが組込まれている!
‣ Three.jsを使用する際には、Javascriptのエディタで、Add
Libraryボタンを押し、Three.jsを選択する
Three.js を使ってみる!!
Three.jsを使ってみる
‣ Three.jsでの3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)
!

‣ 「シーンの中に物体(メッシュ)を配置して、ライティングした
ものをカメラで撮影する」
Three.jsを使ってみる
‣ Three.jsでの3Dオブジェクト描画の考え方
‣ シーン、カメラ、ライト、メッシュ(物体)

scene
light

camera

mesh (= object)
Three.jsを使ってみる
‣ 物体(mesh)は、材質(material)と形状(geometry)から成り立っ
ている

mesh (= object)

=

material
材質

+

geometry
形状
Three.jsを使ってみる
‣ テンプレートをfork
‣ 最低限の設定をしたテンプレートをjsdo.itにアップしました
‣ まずはこのプログラムをForkしてください
‣ http://jsdo.it/yoppa/d2ad
Three.jsを使ってみる
‣ テンプレートには描画するコンテナの設定とWebGLのレンダラーの追加が行われている
//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth,
d.clientWidth);
var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight,
d.clientHeight);

!

//コンテナとレンダラーの配置
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
Three.jsを使ってみる
‣ まずは、WebGLのシーンを追加
!

// シーンの生成
var scene = new THREE.Scene();
Three.jsを使ってみる
‣ 次に、カメラとライトの配置
!

// カメラ配置
var camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 1, 1000);
camera.position.z = 300;

!

// ライト配置
var light
= new
light.position.x =
light.position.y =
light.position.z =
scene.add(light);

THREE.DirectionalLight(0xffffff, 1.5);
0.5;
0.5;
1;
Three.jsを使ってみる
‣ 立方体のジオメトリと、マテリアルを設定
!

// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0x336699});
Three.jsを使ってみる
‣ 設定したジオメトリとマテリアルで、メッシュを生成
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);
Three.jsを使ってみる
‣ メッシュを、回転 (横に-30°、縦に30°)
// メッシュを回転
mesh.rotation.x = 30 * Math.PI / 180.0;
mesh.rotation.y = -30 * Math.PI / 180.0;
Three.jsを使ってみる
‣ メッシュをシーンに追加して、レンダラで描画
// メッシュをシーンに追加
scene.add(mesh);

!

//シーンを描画する
renderer.render(scene, camera);
Three.jsを使ってみる
‣ 完成!! 光のあたった立方体が表示されるはず
Three.jsを使ってみる
‣ このように、Three.jsでは、簡単に3Dの物体を表示することが
できる
‣ 実際には高度な数学的な知識が必要な、3D座標の回転も簡単
!

‣ では、マウスの位置によって回転角度を変化させてみる
Three.jsを使ってみる
‣ メッシュの回転とシーンの追加、レンダリングの部分を変更
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);
// メッシュをシーンに追加
scene.add(mesh);

!

// マウスの位置でメッシュを回転
renderer.domElement.addEventListener('mousemove', function(e) {
mesh.rotation.x = e.pageY/ 100.0;
mesh.rotation.y = e.pageX/ 100.0;

!

//シーンを描画する
renderer.render(scene, camera);

}, false);
Three.jsを使ってみる
‣ マウスの位置で回転するようになったはず
Three.jsを使ってみる
‣ 最後にテクスチャを貼ってみる
‣ まずはファイルをアップロード
‣ jsdo.it の Filesタブに画像をドラッグして、URLをコピーする
Three.jsを使ってみる
‣ マテリアルの設定に、テクスチャを追加
// 立方体のジオメトリとマテリアル設定
var geometry = new THREE.CubeGeometry(100, 100, 100);
// テクスチャを読み込み
var texture
= new THREE.ImageUtils.loadTexture('http://jsrun.it/assets/6/Q/A/m/
6QAmH.jpg3');
// テクスチャを反映
var material = new THREE.MeshLambertMaterial({map: texture});
// メッシュ生成
var mesh = new THREE.Mesh(geometry, material);
// メッシュをシーンに追加
scene.add(mesh);
Three.jsを使ってみる
‣ テクスチャーが貼れた!!
Three.jsを使用したアニメーション
ここまでの復習
‣ ここまでのプログラムについてこれていない方は、こちら
から
‣ まず下記のURLのプログラムをFORK
‣ 手元のプログラムをみながら復習と補足
!

http://jsdo.it/yoppa/yN9x
前回の復習
‣ Javascriptコード
//立方体の表示: 基本

!

//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth,
d.clientWidth);
var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight,
d.clientHeight);

!

//コンテナとレンダラーの配置
var $container = $('#container');
var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);

!

//立方体ジオメトリ
var geometry = new THREE.CubeGeometry(100, 100, 100);
//マテリアル
var material = new THREE.MeshLambertMaterial({color: 0x3366cc});
//メッシュの生成
var mesh = new THREE.Mesh(geometry, material);
前回の復習
‣ Javascriptコード
//メッシュの回転
mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};

!

//カメラを配置
var camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000);
camera.position.z = 400;
camera.lookAt(mesh.position);

!

//シーンを生成し、メッシュ追加
var scene = new THREE.Scene();
scene.add(mesh);

!

//ライト追加
var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position = {x: 0, y: 0.2, z: 1}
scene.add(light);

!

//レンダリング
renderer.render(scene, camera);
前回の復習
‣ 完成、(静止した)立方体が表示される
Three.jsを使用したアニメーション
‣ Three.jsでアニメーションを実現するには
‣ プログラムをより構造化していく必要あり
!

‣ 準備 (初期設定) → 更新 (アニメーション) → 描画
Three.jsを使用したアニメーション
‣ Three.jsでの構造化のイメージ

init (初期化)

animation (更新)
ループ

render (更新)
Three.jsを使用したアニメーション
‣ Javascriptコードでのイメージ
//画面設定、グローバルな変数の設定など
...

!

//プログラム構造
init();
animate();

!

function init() {
/* 初期化に関するコード */
}

!

function animate() {
/* 更新に関するコード */
render(); // レンダー呼び出し
}

!

function render() {
renderer.render(scene, camera); //レンダリング
}
Three.jsを使用したアニメーション
‣ 先程作成した、立方体の描画のコードを、この構造にあてはめ
ていく
Three.jsを使用したアニメーション
‣ Javascript
//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth,
d.clientWidth);
var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight,
d.clientHeight);

!

//Three.jsのシーンに関係するグローバルな変数
var mesh, scene, camera, renderer, light;

!

//プログラム構造
init();
animate();

!

function init() {

!

//コンテナとレンダラーの配置
var $container = $('#container');
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);
Three.jsを使用したアニメーション
‣ Javascript
//立方体ジオメトリ
var geometry = new THREE.CubeGeometry(100, 100, 100);
//マテリアル

!

var material = new THREE.MeshLambertMaterial({color: 0x3366cc});
//ジオメトリとマテリアルから、メッシュの生成
mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x += 20 / 180.0 * Math.PI;
//カメラを配置
camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000);
camera.position.z = 400;
camera.lookAt(mesh.position);
//シーンを生成し、メッシュ追加
scene
= new THREE.Scene();
scene.add(mesh);
//ライト追加
light
= new THREE.DirectionalLight(0xffffff, 1.5);
light.position = {x: 0, y: 0.2, z: 1}
scene.add(light);

}
Three.jsを使用したアニメーション
‣ Javascript
!

//アニメーション
function animate() {
requestAnimationFrame( animate );
render();
}

!

//レンダリング
function render() {
renderer.render(scene, camera);
}
Three.jsを使用したアニメーション
‣ まずは、静止した立方体が表示される(はず)
Three.jsを使用したアニメーション
‣ この立方体を動かすには
‣ 変化させたいパラメータを、animateの中で演算する
!

‣ 位置、回転、サイズ、色 ...etc.
!

‣ では、試しに回転角度を変化させてみる
Three.jsを使用したアニメーション
‣ Javascript
//アニメーション
function animate() {

!
!

}

mesh.rotation.y += 5 / 180.0 * Math.PI;
requestAnimationFrame( animate );
render();

追加
Three.jsを使用したアニメーション
‣ 立方体が、ぐるぐる回転する!!
Three.jsを使用したアニメーション
‣ 立方体のスケールも変更してみる
‣ sin関数と、cos関数で、幅と高さを別々に変形
Three.jsを使用したアニメーション
‣ Javascript
//アニメーション
function animate() {
mesh.rotation.y += 5 / 180.0 * Math.PI;

!
!

}

mesh.scale.x = 0.4 * Math.sin( Date.now() / 100.0) + 1.0;
mesh.scale.y = 0.4 * Math.cos( Date.now() / 100.0) + 1.0;
requestAnimationFrame( animate );
render();
Three.jsを使用したアニメーション
‣ 立方体が、グニャグニャと変形
応用:たくさんの図形をアニメーション
応用:たくさんの図形をアニメーション
‣ たくさんの図形を同時に動かす
‣ 配列 (Array) とくりかえし (for) の使用法がポイント!
!

‣ すこしずつ、回転スピードと、伸縮スピードをずらしながら、
たくさんの立方体を描いてみる!!
応用:たくさんの図形をアニメーション
‣ Javascript
//画面設定
var b = document.body;
var d = document.documentElement;
var WIDTH = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth,
d.clientWidth);
var HEIGHT = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight,
d.clientHeight);

!

//Three.jsのシーンに関係するグローバルな変数
var
var
var
var
var
var

!

scene, camera, renderer, light;
mouseX = 0, mouseY = 0;
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
mesh = [];
NUM = 100;

//プログラム構造
init();
animate();

!

function init() {

!

//コンテナとレンダラーの配置
var $container = $('#container');
応用:たくさんの図形をアニメーション
‣ Javascript
//立方体ジオメトリ
var geometry = new THREE.CubeGeometry(100, 100, 100);
//マテリアル
var material = new THREE.MeshLambertMaterial({color: 0x3366cc});
//くりかえし
for(var i = 0; i < NUM; i++){
//ジオメトリとマテリアルから、メッシュの生成
mesh[i] = new THREE.Mesh(geometry, material);
mesh[i].rotation.x += i / 180.0 * Math.PI;
scene.add(mesh[i]);
}
//カメラを配置
camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 1000);
camera.position.z = 400;
camera.lookAt(mesh[0].position);
//ライト追加
light
= new THREE.DirectionalLight(0xffffff, 1.5);
light.position = {x: 0, y: 0.2, z: 1}
scene.add(light);
応用:たくさんの図形をアニメーション
‣ Javascript
//アニメーション
function animate() {
//くりかえし
for(var i = 0; i < NUM; i++){
mesh[i].rotation.y += i / 18000.0 * Math.PI;
mesh[i].scale.x = 0.8 * Math.sin( i * Date.now() / 20000.0) + 1.0;
mesh[i].scale.y = 0.8 * Math.cos( i * Date.now() / 30000.0) + 1.0;
}
requestAnimationFrame( animate );
render();
}

!

//レンダリング
function render() {

!

//カメラの視点をマウスで移動
camera.position.x += ( mouseX - camera.position.x );
camera.position.y += ( - mouseY - camera.position.y );
camera.lookAt(mesh[0].position);
//レンダリング
renderer.render(scene, camera);

}
応用:たくさんの図形をアニメーション
‣ 複雑に変形を繰り返す立方体の組み合わせ
‣ http://jsdo.it/yoppa/bmak
応用:たくさんの図形をアニメーション
‣ 今週はここまで!

Contenu connexe

Tendances

Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズムMedia Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズムAtsushi Tadokoro
 
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvMedia Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvAtsushi Tadokoro
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分 Toshio Ehara
 
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用するMedia Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用するAtsushi Tadokoro
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.jsyomotsu
 
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001Teruaki Tsubokura
 
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門Atsushi Tadokoro
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションAtsushi Tadokoro
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくるデジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくるAtsushi Tadokoro
 
iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!cocopon
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションAtsushi Tadokoro
 
Core Graphicsでつくる自作UIコンポーネント入門
Core Graphicsでつくる自作UIコンポーネント入門Core Graphicsでつくる自作UIコンポーネント入門
Core Graphicsでつくる自作UIコンポーネント入門cocopon
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようAtsushi Tadokoro
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)Takashi Yoshinaga
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話Shogo Sensui
 
怪しいWindowsプログラミング
怪しいWindowsプログラミング怪しいWindowsプログラミング
怪しいWindowsプログラミングnagoya313
 
Inside frogc in Dart
Inside frogc in DartInside frogc in Dart
Inside frogc in DartGoro Fuji
 
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望Atsushi Tadokoro
 

Tendances (20)

Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズムMedia Art II 2013  第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
Media Art II 2013 第4回:openFrameworks アニメーションを極める 動きを生みだす様々なアルゴリズム
 
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCvMedia Art II 2013  第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
Media Art II 2013 第6回:openFrameworks Addonを使う 2 - ofxOpenCV と ofxCv
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
Media Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用するMedia Art II 2013 第5回:openFrameworks Addonを使用する
Media Art II 2013 第5回:openFrameworks Addonを使用する
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001openFrameworks Workshop in Kanazawa v001
openFrameworks Workshop in Kanazawa v001
 
メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門メディア・アート II 第1回: ガイダンス openFrameworks入門
メディア・アート II 第1回: ガイダンス openFrameworks入門
 
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーションメディア・アートII  第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
メディア・アートII 第2回 openFrameworks基礎 配列、くりかえし、乱数 ベクトルを使用したアニメーション
 
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくるデジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 2: 構造をつくる
 
iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!
 
C++勉強会
C++勉強会C++勉強会
C++勉強会
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
 
Core Graphicsでつくる自作UIコンポーネント入門
Core Graphicsでつくる自作UIコンポーネント入門Core Graphicsでつくる自作UIコンポーネント入門
Core Graphicsでつくる自作UIコンポーネント入門
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
 
怪しいWindowsプログラミング
怪しいWindowsプログラミング怪しいWindowsプログラミング
怪しいWindowsプログラミング
 
Inside frogc in Dart
Inside frogc in DartInside frogc in Dart
Inside frogc in Dart
 
Sencha study
Sencha studySencha study
Sencha study
 
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
 

En vedette

iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するAtsushi Tadokoro
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使うAtsushi Tadokoro
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得Atsushi Tadokoro
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くAtsushi Tadokoro
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリAtsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Atsushi Tadokoro
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Atsushi Tadokoro
 
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートII
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートIIopenFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートII
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートIIAtsushi Tadokoro
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Atsushi Tadokoro
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス Atsushi Tadokoro
 

En vedette (14)

iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
 
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートII
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートIIopenFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートII
openFrameworks 外部ファイルを利用する - 画像、動画 - 多摩美メディアアートII
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
 

Similaire à Tamabi media131118

3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めようAdvancedTechNight
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門Atsushi Tadokoro
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会Yukihiro Kitazawa
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Daisuke Imai
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいYosuke Onoue
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会Takuya Ueda
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~Fujio Kojima
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたMITSUNARI Shigeo
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?Yosuke Onoue
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションKohei Kadowaki
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Hideki Hashizume
 
Css3講座
Css3講座Css3講座
Css3講座SeiyaH
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~Akira Inoue
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 

Similaire à Tamabi media131118 (20)

3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
 
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
 
Canvas勉強会
Canvas勉強会Canvas勉強会
Canvas勉強会
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたいAngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
 
マーブル図で怖くないRxJS
マーブル図で怖くないRxJSマーブル図で怖くないRxJS
マーブル図で怖くないRxJS
 
D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会D3jsを使ってみた@wcan lt大会
D3jsを使ってみた@wcan lt大会
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
 
WASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみたWASM(WebAssembly)入門 ペアリング演算やってみた
WASM(WebAssembly)入門 ペアリング演算やってみた
 
電子国土Part2
電子国土Part2電子国土Part2
電子国土Part2
 
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
 
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーションD3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
 
Css3講座
Css3講座Css3講座
Css3講座
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 

Plus de Atsushi Tadokoro

Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!Atsushi Tadokoro
 
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5  時間構造をつくるInteractive Music II SuperCollider入門 5  時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくるAtsushi Tadokoro
 
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現するiTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現するAtsushi Tadokoro
 
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)Atsushi Tadokoro
 
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得するiTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得するAtsushi Tadokoro
 
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)Atsushi Tadokoro
 
iTamabi 13 第5回:ARTSAT API 導入
iTamabi 13 第5回:ARTSAT API 導入iTamabi 13 第5回:ARTSAT API 導入
iTamabi 13 第5回:ARTSAT API 導入Atsushi Tadokoro
 

Plus de Atsushi Tadokoro (8)

Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!Interactive Music II SuperCollider実習  オリジナルの楽器を作ろう!
Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう!
 
Geidai music131107
Geidai music131107Geidai music131107
Geidai music131107
 
Interactive Music II SuperCollider入門 5 時間構造をつくる
Interactive Music II SuperCollider入門 5  時間構造をつくるInteractive Music II SuperCollider入門 5  時間構造をつくる
Interactive Music II SuperCollider入門 5 時間構造をつくる
 
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現するiTamabi 13  第7回:ARTSAT API 実践 2 衛星の情報で表現する
iTamabi 13 第7回:ARTSAT API 実践 2 衛星の情報で表現する
 
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)Interactive Music II SuperCollider入門 4 -  楽器を定義、変調合成(RM, AM, FM)
Interactive Music II SuperCollider入門 4 - 楽器を定義、変調合成(RM, AM, FM)
 
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得するiTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
iTamabi 13  第6回:ARTSAT API 実践 1 Web APIから情報を取得する
 
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)
Interactive Music II SuperCollider入門 3 - 音を混ぜる(Mix)、楽器を定義(SynthDef)
 
iTamabi 13 第5回:ARTSAT API 導入
iTamabi 13 第5回:ARTSAT API 導入iTamabi 13 第5回:ARTSAT API 導入
iTamabi 13 第5回:ARTSAT API 導入
 

Tamabi media131118