第一章 互动媒体基础

互动媒体基础

商场为了吸引顾客，会在大厅入门处放置地面互动投影，最常见的非“地面互动鱼”莫属了。当顾客走入投射出的水池画面的时候，上面的鱼儿仿佛受了惊吓，四散游开。当人离开的时候，鱼儿又会正常游动。这个项目给人留下了深刻印象，体现了科技与艺术相结合的神奇魅力。在本章中，一起了解互动媒体的基础知识，走进互动媒体的魔法世界。

互动媒体知多少

1.1.1什么是互动媒体

互动媒体（Interactive Media）是在传统媒体基础上增加了互动功能，通过人机交互、多种感官参与，呈现出的一种新型、互动式媒体形式，具有丰富生动的表现力。

1.1.2互动媒体作品展示

地面互动投影

通过捕捉人像或者其他感应，将捕捉到的影像传输到控制服务器中，经过系统的分析，产生被捕捉物体的动作，该动作数据结合实时影像互动系统，使参与者和屏幕之间产生积极有趣的互动效果。

空中翻书

在展台上放置一本翻开的虚拟图书，当读者在展台前做出翻书动作时，虚拟图书就会自动翻页，读者就会浏览图书内容，并伴有生动的翻页声光效果 。

球幕系统

球幕系统使用的是投影机拼接技术，我们常见的是投射一个巨大的地球仪。三台以上的投影机进行拼接后可以获得更好的效果，通过软件进行边缘的融合，做到多台投影机的无缝拼接。

1.1.3互动媒体运行流程解析

第一部分：信号采集部分，根据互动需求进行捕捉拍摄，捕捉设备有红外感应器、视频摄录机、热力拍摄器等。

第二部分：信号处理部分，该部分把实时采集的数据进行分析，所产生的数据与虚拟场景系统对接。

第三部分：成像部分，利用投影机或其他显像设备把影像呈现在特定的位置，显像设备除了投影机外，等离子显示器、液晶显示器、LED屏幕都可以作为互动影像的载体。

第四部分：辅助设备，如传输线路，安装构件，音响装置等。

1.1.4常用的互动媒体设计软件

MakeyMakey

MaKey MaKey由麻省理工Jay Silver 和 Eric Rosenbaum设计开发，电路简单，外观像红白机游戏手柄的电路板。将几根导线与电路板连接，就可以将身边的诸多事物变成触摸板，比如香蕉钢琴、楼梯钢琴，将电影中经常出现的情境变成了现实互动。

Scratch

Scratch是由麻省理工学院专为少年儿童开发的一款编程软件。程序的命令和参数通过积木形状的模块来实现，使用者只需要拖动模块就可以进行程序编程。可以与按键、声音和摄像头进行互动程序设计。

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软件“文件”中的“打开”功能打开原来保存的文件。