第一章 互動媒體基礎

互動媒體基礎

商場為了吸引顧客，會在大廳入門處放置地面互動投影，最常見的非“地面互動魚”莫屬了。當顧客走入投射出的水池畫面的時候，上面的魚兒仿佛受了驚嚇，四散游開。當人離開的時候，魚兒又會正常游動。這個項目給人留下了深刻印象，體現了科技與藝術相結合的神奇魅力。在本章中，一起了解互動媒體的基礎知識，走進互動媒體的魔法世界。

互動媒體知多少

1.1.1什么是互動媒體

互動媒體（Interactive Media）是在傳統媒體基礎上增加了互動功能，通過人機交互、多種感官參與，呈現出的一種新型、互動式媒體形式，具有豐富生動的表現力。

1.1.2互動媒體作品展示

地面互動投影

通過捕捉人像或者其他感應，將捕捉到的影像傳輸到控制服務器中，經過系統的分析，產生被捕捉物體的動作，該動作數據結合實時影像互動系統，使參與者和屏幕之間產生積極有趣的互動效果。

空中翻書

在展臺上放置一本翻開的虛擬圖書，當讀者在展臺前做出翻書動作時，虛擬圖書就會自動翻頁，讀者就會瀏覽圖書內容，并伴有生動的翻頁聲光效果 。

球幕系統

球幕系統使用的是投影機拼接技術，我們常見的是投射一個巨大的地球儀。三臺以上的投影機進行拼接后可以獲得更好的效果，通過軟件進行邊緣的融合，做到多臺投影機的無縫拼接。

1.1.3互動媒體運行流程解析

第一部分：信號采集部分，根據互動需求進行捕捉拍攝，捕捉設備有紅外感應器、視頻攝錄機、熱力拍攝器等。

第二部分：信號處理部分，該部分把實時采集的數據進行分析，所產生的數據與虛擬場景系統對接。

第三部分：成像部分，利用投影機或其他顯像設備把影像呈現在特定的位置，顯像設備除了投影機外，等離子顯示器、液晶顯示器、LED屏幕都可以作為互動影像的載體。

第四部分：輔助設備，如傳輸線路，安裝構件，音響裝置等。

1.1.4常用的互動媒體設計軟件

MakeyMakey

MaKey MaKey由麻省理工Jay Silver 和 Eric Rosenbaum設計開發，電路簡單，外觀像紅白機游戲手柄的電路板。將幾根導線與電路板連接，就可以將身邊的諸多事物變成觸摸板，比如香蕉鋼琴、樓梯鋼琴，將電影中經常出現的情境變成了現實互動。

Scratch

Scratch是由麻省理工學院專為少年兒童開發的一款編程軟件。程序的命令和參數通過積木形狀的模塊來實現，使用者只需要拖動模塊就可以進行程序編程?？梢耘c按鍵、聲音和攝像頭進行互動程序設計。

S4A

S4A是使Arduino開源硬件能夠與Scratch互動的修改版本。在此軟件中提供了一些傳感器模塊和輸出模塊，它趣味性強， 能夠與Arduino開源硬件相結合，S4A已經成為針對中小學生實現軟件和硬件相結合進行互動設計的重要工具之一。

4、 Processing

Processing將Java的語法簡化并將其運算結果“感官化”，讓使用者能很快享有聲光兼備的交互式多媒體作品。在程序動畫的基礎上添加鼠標、鍵盤、時間等交互因素，構成完整的交互結構。

5、Flash

Flash是一種集動畫創作與應用程序開發于一身的創作軟件。它可以由一個簡單的圖形繪制到高級的動畫表現，從一個普通的按鈕到一連串的人機多媒體交互。Flash是一個非常優秀的矢量動畫制作軟件，它以流式控制技術和矢量技術為核心，制作的動畫具有短小精悍的特點，所以被廣泛應用于網頁動畫的設計中，已成為當前網頁動畫設計最為流行的軟件之一。

6、Scraino

Scraino軟件是一款基于Scratch 3.0開發的面向青少年的簡易圖形化編程工具，配合Scratch積木式編程的概念，少年兒童可以在娛樂中學習到編程的基本理念和技巧。不僅保留了Scratch的原生形態，同時添加了對Arduino開源硬件的支持，將Arduino程序語句封裝成獨立的腳本，與Scratch原生腳本相結合，進行積木式搭建，實時生成計算機語言代碼，并配合高效的編譯內核，將代碼快速的燒錄到控制器中，從而實現對硬件設備的控制，不僅支持在線模式，實現軟件與硬件之間的交互，還可以進行脫機控制，以及構建小型物聯網系統，給用戶帶來多維的體驗方式。 本書所使用的軟件為Scraino

注意：本軟件僅支持windows 7及以上操作系統

Scraino軟件基礎

1.2.1   Scraino軟件的下載

我們可以進入咔嗒爸爸官網（http://www.kadapapa.com/）下載Scraino軟件。

進入咔嗒爸爸官網后，在菜單欄上資源下載的下拉菜單中選擇軟件下載，進入下載專區。下載專區中包含一個Scraino下載模塊。

點擊軟件下載，鏈接中包含一個文件夾。

點開文件夾，就可以看到Scraino軟件，直接下載即可

1.2.2 Scraino軟件的安裝

安裝條件

1.電腦版本

建議使用Windows 7及以上版本系統。

2.配置要求

顯卡需支持WebGL，不支持G31/G33系列顯卡。年限過老、配置過低、系統久未更新升級可能會影響設備驅動的識別與安裝，導致驅動安裝失敗。

3.網絡要求

無需連接網絡，但處理安裝過程中可能出現的問題時需要網絡。

安裝流程

找到下載的安裝包，雙擊打開，出現如下界面，可以默認安裝路徑，也可自主選擇安裝路徑。

點擊安裝，等待進度條安裝完成即可

若電腦安裝了防護軟件，可能出現類似如下的對話框，全部點擊允許，直到安裝結束。

安裝完成后，會在桌面出現相應的Scraino快捷鍵 ，并彈出界面。

可能出現的問題

Scraino采用跨平臺的JavaScript和HTML5兩種語言組合進行開發，并且結合OpenGL ES 2.0技術，借助計算機系統顯卡，通過瀏覽器更流暢地展示3D渲染效果和特效模型，系統開發采用WebGL技術，WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：第一.它通過HTML腳本本身實現Web交互式三維動畫的制作，無需任何瀏覽器插件支持;第二. 通過統一的、標準的、跨平臺的OpenGL接口，利用底層的圖形硬件加速功能進行圖形渲染。

因此，Scraino軟件運行需要具備的基本條件是：

支持WebGL運行的瀏覽器；

支持WebGL運行的顯卡；

與之配套的操作系統，顯卡驅動程序，瀏覽器版本的升級；

計算機提示的不支持Scraino運行的畫面

針對以上情況，從以下幾個方面進行分析和解決。

1.調整顯卡的顯示模式

右擊Scraino軟件圖標，點擊屬性

出現Scraino屬性對話框，點擊“兼容性”選項卡；

在兼容性選項卡里，勾選兼容模式下的“以兼容模式運行這個程序”前的對勾，在其下的下拉箭頭下選擇電腦對應的系統，我這里選WIN7。選好后點擊“確定”按鈕。

2.檢查瀏覽器版本并修正瀏覽器

如何判斷我的瀏覽器是否支持WebGL呢？

在瀏覽器地址欄輸入

https://get.webgl.org/

如果出現以上圖形，就說明瀏覽器是支持WebGL的，經過嘗試，發現Chome瀏覽器，微軟Edge以及搜狗瀏覽器都能很好的支持WebGL。

重點說明

如果電腦的顯卡非常老舊，或者是板載的集成顯卡，那么需要在瀏覽器中強制開啟WebGL支持；另外因為其他的一些原因（比如操作系統是Windows XP），在正常安裝以上瀏覽器之后還是不能運行WebGL，最好也強制開啟WebGL支持。

注意 ：所有瀏覽器設置后都需要重啟才有效！

要運行WebGL，必須有一個支持它的瀏覽器，支持的瀏覽器如下：

Google Chrome 9及以上版本

Mozilla Firefox 4以及上版本

IE并不支持WebGL(IE11支持WebGL)，但是可以下載并安裝IEWebGL這個插件，或Google Chrome Framework來運行一些WebGL應用。

請根據您的瀏覽器查看操作方法：

谷歌Chrome系瀏覽器（除360、火狐、Safari、IE以外的瀏覽器）

360瀏覽器

火狐瀏覽器

Safari瀏覽器

360安全瀏覽器開啟WebGL的方法

360安全瀏覽器不支持WebGL，需要下載360急速瀏覽器。

然后點擊選項按鈕。

搜索框搜索硬件。

開啟硬件加速。

瀏覽器重啟，就可以訪問基于WEBGL的網頁了。

Chrome瀏覽器開啟WebGL的方法

谷歌Chrome系瀏覽器（除360、火狐、Safari、IE以外的瀏覽器）

在網址欄里輸入：about:flags

按回車鍵后，在新頁面中將第一個設置為【啟用】，如下圖

或者采用如下方法：

需要為Chrome加入一些啟動參數，以下具體操作步驟(以Windows操作系統為例)

找到Chrome瀏覽器的快捷方式，如果沒有就創建一個快捷方式（右鍵點擊chrome.exe，選擇“創建快捷方式”或者“發送到”→“桌面快捷方式”），右鍵點擊快捷方式，選擇屬性。

在目標框內，雙引號的后邊，空格，然后加入以下內容

--enable-webgl --ignore-gpu-blacklist --allow-file-access

點擊確定

設置完成的后的快捷方式屬性窗口看起來應當是這樣的，注意“目標”文本框：

關閉目前開啟的所有Chrome窗口，然后用此快捷方式啟動Chrome瀏覽器。

其中：

--enable-webgl                        開啟WebGL支持

--ignore-gpu-blacklist                忽略GPU黑名單，也就是說有一些顯卡GPU因為過于陳舊等原因，不建議運行WebGL，這個參數可以讓瀏覽器忽略這個黑名單，強制運行WebGL

--allow-file-access-from-files            允許從本地載入資源

Firefox瀏覽器開啟WebGL的方法

Firefox的用戶請在瀏覽器的地址欄輸入“about:config”，回車

在過濾器（filter）中搜索“webgl”

通過雙擊的方式將webgl.force-enabled的值設置為true

通過雙擊的方式將webgl.disabled的值設置為false

在過濾器（filter）中搜索“security.fileuri.strict_origin_policy”

通過雙擊的方式將security.fileuri.strict_origin_policy的值設置為false

關閉目前開啟的所有Firefox窗口，然后重新啟動Firefox。

其中前兩個設置是強制開啟WebGL支持，最后一個security.fileuri.strict_origin_policy的設置是允許從本地載入資源

如果強制開啟了WebGL，還是不能運行，更多信息可參考Mozilla Blocklisting/Blocked Graphics Drivers

我在Window XP上測試Firefox的WebGL時，在強制開啟了WebGL后，仍然得到Error: WebGL: Error during ANGLE OpenGL ES initialization

悲催地發現Firefox對廠家的不支持和硬件不支持(分別在虛擬機上和顯卡為Intel G31/G33 chipset)

On Windows

All vendors other than AMD/ATI, NVIDIA, Intel are blocked (bug 623338). This was required primarily by various crashes on virtual machines with unusual vendor names (bug 621411). We’re open to whitelisting more vendors if needed.

… …

If force-enabling a feature doesn’t work, that probably means that your hardware doesn’t support it. For example, layers acceleration currently requires support for 4Kx4K textures, which rules out some graphics cards, like the Intel G31/G33.

Safari瀏覽器開啟WebGL的方法

菜單中找到“屬性”或“偏好設置”→“高級”，選中“顯示開發菜單”，然后到“開發”菜單，選中“開啟WebGL”。

1.2.3初識Scraino

軟件界面分布：

Scraino軟件一共分兩個主要界面。

1.界面一：純軟編程和交互模式界面

界面一主要分為8個區域：工具欄、指令區、腳本區、舞臺區和角色區。界面二新增編碼區。

工具欄：主要是對項目的新建和保存、開發板連接設置及參考文檔查詢等操作。

[文件]：新建、打開、保存項目的設置。

[編輯] ：交互式固件和驅動的安裝。

注意：點擊“安裝 Arduino驅動”,按照提示點擊“下一步"即可完成安裝。僅首次使用時需要安裝驅動,安裝后,以后使用無需重復安裝。

[連接]：將 Arduino Nano控制器與計算機連接,打開 Scraino軟件,點擊軟件菜單欄“連接”,選中與開發板相對應的"COM"口即可。

COM口的查找：右鍵“計算機”，點擊“設備管理器”，如圖：

[控制器]：用于選中開發板，根據控制板的類型選擇相對應的板子，進行軟硬件的交互。

[幫助] ：使用手冊參考及軟件版本的查詢。

指令分類區：對指令進行分類

包括：動作，外觀，聲音，事件，控制，感知，運算，變量，自定義，擴展共10類。

其中擴展區包含多種控制板，點擊所需要的擴展，即可在指令區添加相應的擴展模塊，如點擊“Arduino”擴展模塊后，代碼區會出現Arduino的模塊

指令區: 每一類別都包含該類型的若干軟控及硬控的指令，根據需求以積木塊的形式拖拽到腳本區，實現程序的編寫。

根據指令的不同，我們從形狀上又可以分為啟動指令，帶凹槽的指令、六邊形指令和橢圓形指令。

[啟動指令]

用于啟動程序的指令，一般頂部為弧形，無法向上連接，下方帶有凸出的接頭。

[帶凹槽的指令]：可以直接連接在啟動程序下的指令。

[六邊形指令]：需要嵌套在條件語句中作為判斷條件使用。

[橢圓形指令]：嵌套在其他指令的橢圓形框中進行使用。

功能切換區：切換編輯功能，進行積木、角色、聲音的切換。

腳本區：對腳本、角色或聲音的編輯的區域。

舞臺區：用于腳本程序控制角色和背景的演示。

角色區：可以允許用戶添加、修改和刪除程序與背景。

代碼區：搭建程序時，將實時顯示出該模塊所對應的計算機語言代碼。

調試區：當控制器與軟件進行通信或下載時，可查看通訊數據。

功能按鈕：操作的功能快捷鍵：               

：啟動程序                    ：小舞臺布局模式

：停止程序                    ：全屏控制   

2.界面二：離線模式界面

【代碼區】：搭建程序時，將實時顯示出該模塊所對應的計算機語言代碼。

【功能按鈕】：操作的功能快捷鍵：

：改變面板大小                    ：用于下載程序

：用于打開Arduino IDE 軟件

點擊“工具欄”中舞臺上方的“舞臺/代碼”切換按鈕切換界面一與界面二。

以上是軟件的基本介紹，操作方法很容易，就是將指令區的指令用鼠標拖拽到腳本區，形成具有邏輯性的積木塊，代碼區就會出現相應的邏輯代碼。

GKduino硬件概述

1.3.1   Arduino概述

Massimo Banzi曾是意大利Ivrea小鎮上一家高科技設計學校的老師，他的學生們經常抱怨找不到便宜又好用的微型控制器。2005年冬季一天，Massimo Banzi跟David Cuartielles討論了這個問題。 David Cuartielles是一個西班牙籍晶片工程師，當時在這所學校做訪問學者。他們兩人利用五天的時間設計制作了一系列的創意電子、微型控制器和程序開發工具。 Massimo Banzi喜歡去一家名叫di Re Arduino的酒吧，該酒吧是1000年以前意大利國王Arduin的名字命名的。為了紀念這個地方，他將這塊電路板命名為Arduino。（引自http://arduino.cc）

Arduino是一款便捷靈活、方便上手的開源電子原型平臺，包含硬件和軟件，其硬件（各種型號的Arduino板）和軟件（Arduino IDE以及衍生軟件)都是開源的，在互聯網上可以直接下載電路圖和開發程序。Arduino能通過多種多樣的傳感器來感知環境，通過控制按鈕、LED、蜂鳴器、馬達和其他的裝置來反饋、影響環境。借助Arduino可以開發出如倒車雷達、循跡小車、車場計數器、投籃機、智能家居等許多有趣好玩的項目。

Duemilanove            LilyPad

Arduino Uno              Mega2560

1.3.2   GKuino主控板

本書使用的Gkduino主控板，是一種Arudino   Uno兼容的主控板。Gkduino主控板各個部分的詳細結構如下圖

關于主控板的主要組成部分介紹如下：

管腳：主控板上兩組“三排金屬針”稱為管腳，黑色一排連接的是電源地（GND），紅色一排連接的是5V電源（VCC），彩色一排則是信號管腳，用以實現輸入輸出的控制。

微型處理器：主控板中間的黑色模塊為微型處理器，用于完成運算、控制和存儲任務。

數字輸入/輸出端口：D0～D13為數字輸入/輸出端口。13號管腳與主控板上的一個LED燈連接。0、1號管腳分別是串口的發送（TXD）/接收（ＲＸＤ）管腳，一般不要將模塊連接在這兩個管腳上。數字管腳上標示“～”符號的３、5、6、9、10、11號管腳具備模擬輸出功能。

模擬輸入端口：A0～A7號管腳為模擬輸入端口，其中A0～A5可以作為數字輸入/輸出管腳。

電機驅動連接口：主控板自帶4個電機驅動連接口，OUT1～OUT4分別于主控板的4～7號管腳控制的電機驅動芯片輸出連接。當撥碼開關推到ＯＮ時，對應的管腳只能控制所連電機，不能用作其他用途。

1.3.3   LED燈閃起來

Scraino擁有“舞臺”和“代碼”兩種模式，單擊和進行切換。在舞臺模式下，主要以圖形化方式對Arduino進行編程，實現舞臺角色與Arduino的互動；在代碼模式下，可以將圖形化編程腳本自動生成Arduino語言代碼，上傳到Arduino控制器并可以脫離計算機運行。要想讓LED燈閃起來，需要使用代碼模式，如下圖：

選擇“添加擴展”，將果殼智造空間擴展添加到指令分類區，指令分類區中將增加一個“GKduino”的指令分類，如下圖：

設計一個程序，實現板載13號燈每隔1秒閃爍一次的效果。

拿起主控板，將主控板用數據線連在電腦主機的USB插口上。

設計程序如下圖所示：

選擇Arduino   UNO控制器，選擇合適的COM口，本書所用的為COM3，點擊上傳至控制器，等待編譯，顯示上傳成功，就可以看到閃爍效果。

提示：串口的選擇

右鍵單擊計算機（或我的電腦）選擇“屬性”，在彈出的“系統”窗口中選擇“設備管理器”，展開“端口（COM和LPT）”，找到帶有“USB-SERIAL CH340”的串口號，不同的計算機對應不同的串口號，本書為COM3。

1.4第一個互動程序

設計第一個互動小程序，程序的功能是一頭熊在舞臺上來回走動，當碰到舞臺的邊緣，13號板載燈亮1秒。

1.4.1 添加新角色

切換到舞臺界面，刪除小貓角色，單擊選擇一個角色，在跳出的對話框中選擇“Animals”文件夾，找到“Bear-walking”文件。這時，舞臺上出現了一頭熊。如下圖所示

1.4.2編寫腳本

最終程序腳本如下圖：

1.4.3測試程序

（1）選擇Arduino   UNO控制器

（2）選擇合適的COM3

（3）單擊“編輯”，選擇安裝交互固件，等待上傳成功。第一次使用交互功能需要安裝，再次使用軟件的交互功能，不需安裝。

（4）單擊綠旗，就可以看到互動效果。

1.4.4保存和打開程序

一定要養成隨時保存程序的習慣，Scraino保存的文件擴展名為“.sb3”。保存后的文件可以通過雙擊文件名打開，也可以通過Scraino軟件“文件”中的“打開”功能打開原來保存的文件。