3. UI設計演習(1/3)

内容（先回の続き）

キーワード：ルーブ・ゴールドバーグ・マシン

・ピタゴラゴール1号のデモ

ルーブ・ゴールドバーグマシン

意味なく無用に複雑な過程を経て物事が決まる様子を風刺したもの。 → 転じてピタゴラ装置のような連鎖反応で見ていて楽しい予想外な動きを伴った、単純な物事の解決手段

https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%BC%E3%83%96%E3%83%BB%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%89%E3%83%90%E3%83%BC%E3%82%B0%E3%83%BB%E3%83%9E%E3%82%B7%E3%83%B3

・something for nothing (1940) https://youtu.be/aG8414jjZ4M 英語字幕（自動生成）

内容：自動扉帽子安定器特許永久機関（特許不受理）ガソリン燃料火薬とガソリン燃焼効率永久機関（オチ）

・アニメーションで見る機械メカニズム模型の動き http://www.museum.kyoto-u.ac.jp/collection/materials/mechAnime.html

・THE MAKING 番組一覧

私たちの身の回りにある「モノ」たちのできあがる姿をビデオで追った「メーキング・ムービー http://sciencechannel.jst.go.jp/B980601/

・ピタゴラゴール１号

・シャノンの最終機械(ウルティメイトマシン)

・ムナーリの奇妙な機械（ブルーノ・ムナーリ著）

・仏の顔も三度まで（こごと）

・今回３回目の課題を出しますが、第１回目、第２回目の課題の未提出課題についても提出してください。

（自動処理：Ａボタンを押す → 課題提出が無い → どうやら死んでいるようだ → 落単）

感情を可視化するインターフェース

ロボット＋地獄耳（悪口）センサー＋怒りのインジケーター＝大巨人（昭和のタツノコアニメ、ヤットデタマンに登場するロボット）

・先回（ＢＡＤＵＩとインタラクティブ作品）のレポートについてコメント

質問：インタラクティブメディアって何ですか？

※世の中の動きは早い（いいわけ）

情報文化学部情報メディア学科（２コース制）情報メディア学部情報メディア学科（３コース制）情報メディア学部情報メディア学科（４コース制）

インターフェースデバイス論（２０１０－２０１３） → インタラクティブメディア（２０１４－２０１７） → メディアアート（２０１８－？）

２０１８年には、メディアアートも古くなっているかも。動画もインタラクティブも当たり前の世界。

いま面白いことに取り組むべきかもしれない。

チームによる開発ではメンバー全員でのコラボレーションが重要

「顧客が本当に必要だったもの」（イラスト）

開発プロジェクトチームのメンバーでコミュニケーションが不足して、コラボレーションが進まず、プロジェクトが失敗する様子の風刺イラスト

・情報のインプットとフィールドワーク（つづき）

インタラクティブ作品紹介２０１６受講生作品２０１５受講生作品２００９－２０１３受講生作品 ←レポートフォルダ（インタラクティブメディア）に動画を入れておきます。見ておいてください。

「融けるデザイン」（渡辺惠太著） http://www.bnn.co.jp/books/7305/

「ＳＦ映画で学ぶインターフェースデザイン」 → 未来のＵＩのネタに（未来は作ることが出来るアラン・ケイ）

インタラクティブ作品紹介ネットから（つづぎ）トップページのコメント欄から。

記事紹介（２０１５年度）：

MAX/MSP を使用した演奏パフォーマンス松本昭彦スーパーデラックスの最新ライブ映像がフルサイズで公開

楽器のＵＩの設計の参考に：いま最も素晴らしいiPad用無料シンセ!! Music Appまとめ

iPad用の有料の素敵なシンセやシーケンサアプリが沢山あります。楽曲制作に興味のある人は挑戦してみては？

・モジュラーシンセ http://jasuto.com/main/

・ reactable http://ascii.jp/elem/000/000/196/196619/ のiPad版 https://www.youtube.com/watch?v=jbq7Ji25Ieo

■ ＭＡＸ／ＭＳＰサンプルパッチ紹介操作導入

レポートフォルダインタラクティブメディア desktop_lumakey フォルダに練習素材有り

MAX/MSP で画像処理、映像処理、インタラクティブのパッチの作成例と使用方法の紹介

ファイル desktop_lumakay説明付き練習用.maxpat をデスクトップにコピーして利用

※ C１０８情報実習室の環境では、PCの故障修理・メンテナンスの際、個人のデスクトップのファイルなどがが削除されます。

※ 授業中の作成課題などは、各自でUSBメモリなので保存しておいてください。 OneDrive や GoogleDrive や Dropbox などネットストレージサービスを利用すると良いでしょう。

練習用パッチの機能概要：

デスクトップの一部領域をキャブチャーして、Webカメラの映像とリアルタイム合成をする。

ルミナンスキー（画像の輝度）で、合成領域を指定。暗い部分にカメラ映像を合成する。

明るい部分は、元の映像が残る。

改造例）

画像処理の白黒を反転させるエフェクトを使用し、合成部分の領域指定を、高輝度低輝度で入れ替える。

改造例２）

マイク入力を利用して、手拍子で合成領域を入れ替える。

第3回練習課題（1／2）

編集確認：

・パッチの実行モード、編集モードの切り替え。実行モードでは、編集がロックされる。（ロックアイコンまたは Cmd＋クリックで切り替え）

・編集モードでも、パッチを実行したままで、動作を確認しながら編集可能

動作解説：

授業で、パッチに使用されているMaxのオブジェクトの解説をする。

パッチ上のコメントに概略を書いておくので参考にすること。

練習用パッチを編集してみよう。

拍手で効果切り替えができたら成功。

ルミナンスキー合成のパッチとして完成させ、動作を確認する。

練習：キーボードで C キーを押して、パッチにコメントを書き込んでみる。

Webclass にパッチのスクリーンショットを記録してアップロードして提出。 (スクリーンショットは Ctrl + Shift + 4 ）

Max/MSP入門

今回は解説動画の１～４、パッチと信号の基礎、ＬＥＤまでの予定。

参考書： ＭＡＸの教科書 ・ ＭＡＸオデッセイ （図書館）

MAX/7入門解説動画

MAX/MSP キーボードショートカット

MAX/MSP 基本オブジェクト紹介

第3回練習課題（2／2）

HTMLのフォームのパーツだけでピタゴラスイッチを作るとこうなる - GIGAZINE https://twitter.com/Yusk/status/729119892302004225

↑

この動画のような感じで、Max/MSPのUIオブジェクトを利用して、スイッチが連鎖反応するパッチを作ってみてください。

第３回目の2つ目の課題として提出してください。スクリーンショットではなく、作成したパッチファイルをＷｅｂＣｌａｓｓにアップロードで提出です。

課題条件：

・スタート用ボタンをコメントを利用して明示する。

・ゴールのＬＥＤをコメントを利用して明示する。