授業予定（2013年度） - teu.ac.jpksasaki/lectures13/media_resume/media_Intro07.pdf1 メディア学入門（7）第4章ユーザインタフェース技術 ... 4.3.3. スケッチインタフェースとモデリング

2013/5/12

1

メディア学入門（7）

第4章ユーザインタフェース技術メディアコンテンツ利用のための基礎技術

(4.3)

東京工科大学メディア学部

近藤邦雄

講義資料：http://www2.teu.ac.jp/media/~ksasaki/lectures13/media_intro/

授業予定（2013年度）

• 第１回序論：メディア入門

• 第２回メディア社会を築くコンテンツとサービス

• 第３回メディアを支えるICT

• 第４回視覚に関わるメディアコンテンツ

• 第５回視覚、聴覚、触覚に関わるメディアコンテンツ

• 第６回コンテンツ制作のためのディジタル技術

• 第７回コンテンツ利用のためのディジタル技術

• 第８回中間テストを含む

2013/5/12

2

本講義の内容

4.3 ユーザインタフェース技術1. ユーザインタフェースの展開

2. ユーザインタフェース技術と機器

3. スケッチインタフェースとモデリング

4. 音声インタフェース

5. バーチャルリアリティ

6. 実空間インタフェース

7. マルチモーダルインタフェース

8. 感性インタフェース

・CGプログラミング超入門

3

ユーザインタフェース技術

4.3

4

1.ユーザインタフェースの展開2.ユーザインタフェース技術と機器3.スケッチインタフェースとモデリング4.音声インタフェース5.バーチャルリアリティ6.実空間インタフェース7.マルチモーダルインタフェース8.感性インタフェース

2013/5/12

3

メディアのモデル（基本概念）

コンテンツ利用のためのサービスと技術

送り手作り手発信者

受け手甘受者受信者

映像CG

テキスト音声

情報ニュース

案内作品

本、書籍ラジオテレビ

PC、スマホ

コンテンツコンテナコンベア


4.3

6


2013/5/12

4

4.3.1ユーザインタフェースの展開

[1] ユーザインタフェースとは

人コンピュータ

インタフェース

インターネット

実世界

携帯をより良くするために

朝日新聞 2000.12.13

ユニバーサルデザインの思想

共用品ライタは片手で使える

2013/5/12

5

タッチパネルって何？

週刊ポスト 2001.7.20 p.155

ボタンとパネルの違い

うまく見せるだけでは?!

グループ分け：機能別

親父の威厳声の認識の活用

2000年ころのリモコンと音声認識の夢

2013/5/12

6

メディアシステムの構成

11

音声入力

手描き入力

動作入力

動画像入力

出力

文字入力

ソフトウエア、データベース

コンピュータ

[2] ユーザインタフェース技術の発展

前提：人を含めたシステム

現状：人の行動や思考を増強するインタフェースの考え方をもとにしたソフトウェアや機器が普及

コンピュータ支援による設計では，デザイナーがコンピュータとソフトウェアを利用して，製品の設計を行うという活動を支援

WiiやKinectなどのように，体全体を利用してコンピュータとの関わりをもつことができるように展開

2013/5/12

7

[3] 人と環境が一体となったユーザインタフェース

人

人工物コンピュータ

実世界

人間・社会コミュニケーション

環境

人間も社会も機械も変わるものであり，少なくとも人間を中心にして考えるべきであり，人間と環境は本来不可分で，環境が変わると人間も変わる


4.3

14


2013/5/12

8

人との対話に近いヒューマンインタフェースを目指すマルティモーダルシステム

マルチモーダルシステム

トグルスイッチ

ボタン

キーボード

マウス・GUI

0.2 0.5 0.7 1.0

操作方法を習熟する手間が減る

コンピュータに対して人が感じる親和度

フォースフィードバック

タッチパネル

明示的に指示をしなくても情報が伝わる

人からコンピュータに伝わる情報の量

ジェスチャ

表情認識

音声認識

1コマンド

人間同士の対話で相手に伝わる情報量

視線認識

脳波計測

立体映像

4.3.2ユーザインタフェース技術と機器

[1] ユーザインタフェース技術と親和度

図4.24 入力機器の伝達できる情報量とコンピュータに対する親和度


4.3

16


2013/5/12

9

4.3.3. スケッチインタフェースとモデリング

[1] スケッチインタフェースのための機器

指を広げる

図形の拡大

図4.25 液晶タブレット

図4.26 ジェスチャによる図形の拡大

Freehand Sketch System for 3D Geometric ModelingMatsuda,K, Kondo,K Proceedings of Shape Modeling International pp.55-62, 1997

(1) (2) (3) (4)

(5) (6)

Sketch Interpreter : 手描き入力線分をもとに、3次元モデルを生成

S. Sugishita, K. Kondo, H. Sato, S. Shimada: Sketch Interpreter for geometric modeling. International Conf. of Computer Aided Geometric Design, 1994.

2013/5/12

10

Teddy: A Sketching Interface for 3D Freeform DesignTakeo Igarashi, Satoshi Matsuoka, Hidehiko Tanaka, SIGGRAPH 99, 1999

手描きスケッチによる3Dモデリングシステム

・手描きで自由曲線を描いていくことにより 3Dモデルを対話的に構成する手法

•手描きストロークを元に、丸みを帯びた形状を自動的に作成

ストローク履歴を活用した3次元形状モデリング手法竹内亮太 2012年度博士論文

大学院メディアサイエンス専攻

2013/5/12

11


4.3

21


4.3.4 音声インタフェース[1] 音声インタフェースとは

音声対話:列車チケット，イベントチケット購入，カウンター物品購入音声情報検索: Web検索，百科事典検索音声翻訳・通訳：ホテル予約対話，オンラインショッピング

＞大学の電話番号を教えてください。＞ 042 000 1111です。




マイク

スピーカ

大学の電話番号を教えてください

2013/5/12

12

23

音声ペイント1．ブラシ移動↑ 声を高く↓ 声を低く→ 右マイクに← 左マイクに

2．ブラシ色あいうえお

3．ブラシ太さ太声を大きく細声を小さく

音と音声によるインタラクションプロジェクト相川清明

音声入力による画像検索とデザイン

[2] 音声認識技術

音響モデル

音の情報抽出言語系列の

抽出音声認識結果

言語モデル

言葉

図4.31 統計的手法による音声認識処理

a.解析段階：音声波形を分類して子音と母音の学習データの作成b.認識段階：入力音声の音響的特徴を比較し，特徴に近い言語系列を出力

2013/5/12

13

[3] 音声合成技術

●音声合成技術a. 連結合成：単語・文節・文などの録音データを接続する．人の声を利用するので明瞭

度はよいが録音した声を利用するので自由度が低い．

b. 分析合成：音声周波数と音源情報のパラメータを分析抽出して，それらを用いて合成

する．情報圧縮率が高いと品質保証が困難である．

c. 規則合成：音素・音節などの基本単位を結合し，韻律情報（ピッチ，振幅などの制御）

を生成する．テキスト音声合成，任意の文章の音声の生成が可能であり，自由度が高い．反面，音声が人工的になることが多い．

実用化：画面のテキスト読み上げや自動販売機の音声ガイド

手法の提案：人の音声にいかに近づけるかという自然さ，聞きやすさや理解しやすさである明瞭度の向上

歌声合成ソフト：「初音ミク」

ill. by KEI (c) Crypton Future Media, Inc. www. crypton.net

CGM:Consumer Generated Media消費者生成メディア

VOCALOID2初音ミク

歌詞と音符を直感的に入力できるようにピアノロールを用いたインタフェース

2013/5/12

14

[ [4] VOCALOID 歌声合成システム

1.了解性:歌詞が聞き取れること2.自然性:人間の歌唱が持つ特徴の再現3. 操作性：音符や歌詞を効率的に入力できること

楽曲制作が容易なこと

剣持：歌声合成の過去・現在・未来、情報処理、Vol.53,No.5,pp.473‐476,May.2012

歌声ライブラリ（素片）

スコアエディタ

歌詞音符

合成用管理情報

素片選択接続

合成エンジン

合成歌唱音声

ファイル形式（ファイルフォーマット）

コンピュータ上のデータをどのように扱うかを定めた規約

メタデータ

データに関連する情報歌名制作年月日

音声ファイルの形式MP3、WMA

標準フォーマット

データ圧縮技術


4.3

28


2013/5/12

15

4.3.5 バーチャルリアリティ

人


実世界仮想空間

仮想現実感インタフェース

3次元空間内における自然な人間の行動を，コンピュータとのインタラクションに利用する技術


4.3

30


2013/5/12

16

4.3.6 実空間インタフェース AR

人

コンピュータ


実世界

実空間

実空間における人の操作をビデオカメラで取り込み，仮想空間とのコミュニケーションを行う技術

拡張現実 (Augmented Reality)

Clearboard

©NTT（石井裕提供）タンジブルインタフェースの先駆け図4.36

共同作業空間と会話空間を連続的に統合した新しいコラボレーションメディア

論文：http://ci.nii.ac.jp/naid/110002932087

2013/5/12

17


4.3

33


4.3.7 マルチモーダルインタフェース

コンピュータ



人

人間どうしのコミュニケーション手段をコンピュータと人のインタフェースに適用

モダリティ：人間が情報伝達を行うときの伝達手段（言語、表情、身振り、視線など）

2013/5/12

18


4.3

35


4.3.8 感性インタフェース



暖かい冷たい…

感性データベース

感性,印象

画像，モデル

人間どうしでもあいまいである感性情報を用いたコンピュータとインタラクション

黒田，近藤，他：テキスタイル画像データベースの感性検索とデザインのための統合化システムとその応用,第9回NICOGRAPH，pp.113‐122, 1993

2013/5/12

19

感性インタフェースによる画像検索

感性平面形容詞

入力画像

イメージカラー

原画像暖かい

地味な－やわらかい暗い

H.Yamazaki,K.Kondo, A Method of Changing a Color Scheme with Kansei Scales, Journal of Geometry and Graphics, Vol3,No,1,pp.77‐84,1999

本講義のまとめ

4.3 ユーザインタフェース技術1. ユーザインタフェースの展開

2. ユーザインタフェース技術と機器

3. スケッチインタフェースとモデリング

4. 音声インタフェース

5. バーチャルリアリティ

6. 実空間インタフェース

7. マルチモーダルインタフェース

8. 感性インタフェース

・CGプログラミング超入門（講義内課題として）

38

2013/5/12

20

来週は中間試験

第1から4章までのメディアに関する考え方、用語(漢字で書けるように）などを理解しておくこと

CGプログラミング超入門

プログラミングのための論理的な考え方

1. a=a+1 右辺の値を左辺に代入と加減乗除

2. 「もし～～」ならば、「なになにをする」

3. これからこれまでを何回か繰り返す

40

Processingというプログラミング言語と実行環境

Processing is an open source programming language and environment for people who want to create images, animations, and interactions.（自習課題：インターネットで検索して、何ができるかを見てください）

2013/5/12

21

1. 代入と加減乗除

a= 2 ＊ a ‐ b

• 右辺の計算結果を左辺に代入

• 加減乗除は、「+」「‐」「*」「/」「*」は掛け算。

• 掛け算と割り算を先に計算

例

ビジュアルコンピューティングの数理入門(柿本):1年生後期にProcessingを利用したCGプログラミング

円を描くプログラムと実行例 circle00

CG制作の基礎:2年生前期

代入

2013/5/12

22

2. 条件分岐（場合分け）

「もし～～」ならば、「なになにをする」

if ( 式 >= 0) {

代入式

} else {

代入式}

• 式の値を調べる。それが0以上だったら， if ()のあとの命令

(代入式）を実行。

• もし式の値が0以上でなかったら、else のあとの命令(代入

式）を実行。

例

Example Program : ¥no3‐examples¥animation2¥Bounce

ボールの衝突と移動

上下の判定

左右の判定


2013/5/12

23

3. 繰り返し（ループ）

for ( i = 1; i <= n; iを1づつ増分) {

命令(代入式)}

1. 変数 i を1にする

2. i が n 以下か調べる。nを超えたら，()の処理を終了

3. for ( ) の次の命令を処理

4. 変数 i の値を1増やす

5. 上記の2へ戻る

例

円を描くプログラムと実行例 circle00


代入

繰り返し

2013/5/12

24

Example Program : ¥no2‐samples¥list2_10_c

前川：Built with Processing —デザイン/アートのためのプログラミング入門、BNN

fill:塗りつぶしrect:四角形

繰り返し

Documents

授業予定（2013年度） - teu.ac.jpksasaki/lectures13/media_resume/media_Intro07.pdf1 メディア学入門（7） 第4章ユーザインタフェース技術 ... 4.3.3. スケッチインタフェースとモデリング

授業予定（2013年度） - teu.ac.jpksasaki/lectures13/media_resume/media_Intro07.pdf1 メディア学入門（7）第4章ユーザインタフェース技術 ... 4.3.3. スケッチインタフェースとモデリング