融入动画技术的交互应用

融入动画技术的交互应用：2D Stack

背景

一直愁着大作业该做什么，偶然间想起一款玩过的休闲游戏
不知道大家都有没有玩过，这款名为Stack的游戏，如下图：

简单来说，这就是一个堆方块的游戏：

如果能将下一块方块完美的重叠在上一块上，则方块面积不会减小，否则会被截去，截去的越多，难度越大。
虽然界面设计很简单，但是却不乏趣味，加上美妙的音乐，是一款不错的休闲益智游戏，于是我有感而发，用Processing做了二维效果的Stack，如下：

2D Stack：

游戏运作： 按空格键开始，当新的方形出现时，鼠标点击或按空格则方块落定
得分方法： 将下一块长方形堆叠在前一块长方形，只要不落空，则+1分。
和Stack手游一样，如果不能完美地重叠，腾空的部分会被截去，并且模拟了每次出现新的方形会逐渐变色的功能。
同时会记录分数，如果一旦方形落空，那么恭喜你 Game Over 了！同时按键盘上的“R”可以重新开始，并且可以记录之前的记录和最高纪录。

实现

本游戏的实现主要运用了《The Nature of Code》（《代码本色—Daniel Shiffman》一本关于学习Processing的好书）中向量（Vector）、力（Force）和粒子系统（Particle System）三个章节的内容；有兴趣的可以去网上找本书的电子书。

模块

整体上，分为三个部分：开始动画，游戏本身和背景
开始动画：

最终画面是（全部过程图片超5M，无奈之举）：

如图示，只要按空格则游戏开始。
这一部分主要就是粒子系统（书上第四章）。那么什么是粒子系统，先看看百科解释：“粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术，而这些现象用其它传统的渲染技术难以实现的真实感的 game physics。”，在书中的解释是：“粒子系统是由许多粒子组成的用于代表模糊对象的集合。在一段特定时间内，粒子在系统中生成、移动、转化，最后消亡。”总之呢，粒子系统可以带来一些神奇的效果。
游戏本身：如上面一幅图。
背景：
背景由两部分组成：
1、

2、

合在一起就是：

这个背景也主要运用到了粒子系统和向量。向量是个神奇的东西，你可以把它看做一个带箭头的线段，力或者粒子系统都离不开向量，我们可以把向量当作两点之间的差异，也就是从一个点到另一个点所发生的移动。这里 我们可以着重讲一下向量：
相信很多人都学过线性代数，而向量是其中一个很重要的基础，而线性代数在很多领域都有应用：
计算机科学、物理、电力工程、机械工程、统计……
学过线性代数的学生可能都会做以下计算，但他们却不知道为什么要这样计算，它们分别代表的含义是什么？学生们对于线性代数中的几何意义的理解是非常模糊的

matrix multiplication - 矩阵乘法
the Determinant - 行列式
cross products - 交叉乘积
eigenvalues - 特征值

实际上，理解线性代数的几何意义，有助于在你遇到具体问题的时候，知道用什么工具去解决它们，这些工具为什么有效，并且对产生的结果做出解释。而理解线性代数的算术意义，只能够帮你在使用这些工具的时候，完成整个计算过程。所以学习线性代数的层次关系应该是，由底向上：
几何意义 -> 算术意义 -> 应用
于是，面对线性代数问题，人们更应该把计算部分交给计算机来完成，自己则专注于概念和原理部分。
向量是什么
向量是线性代数基本构成要素的根源。不同的职业对向量有不同的视角：
物理系学生对向量的视角：vectors are arrows pointing in space. What defines a given vector is its length, and the direction it’s pointing in.
计算机专业同学的视角: vectors are ordered lists of numbers. 2-dimensional is the fact that the length of that list is 2.
数学专业的同学: generalise both of these views （线性代数中所有的课题都是围绕这两种操作进行的）:
1、两个向量相加
2、用一个常数和另一个向量相乘
Vector - 在坐标系中的有箭头的线段，它的末尾总在原点上，在2维空间中，向量 [ i , j ]’ 的第 1 个数字 i 是尖端落在 x轴的长度，第 2 个数字 j 是尖端落在 y轴的长度，如果落在原点的左边（ x轴）和下边（ y轴），则 i、j 的值为负数；在 3 维空间中，每个向量有 3 个数（i、j、k）来表示，分别是尖端落在x 、y、 z轴上的长度，x、y、z 同样是有符号的。
向量加法的几何意义
向量v[2 4]’ 和向量 w[3 1]’ 相加的示意图如下:

保持 v不动
保持 w 的方向不变，将 w 的末端平行移动到移动到 v 的尖端
从原点到w 尖端的向量即为 v 和 w 的和

向量和常量乘法的几何意义

用一个常量乘上一个向量，意味着将向量保持在其所在的直线上，对其长度进行拉伸、压缩和反向操作，例如 2v是将向量 v 的长度拉升为原来的 2 倍，1/3v是将 v压缩为原来的 1/3，-2v是先对 v进行反向，再将其长度拉伸为原来的 2倍，这种操作有一个术语来描绘它 —— Scaling；而其中的系数 2、1/3、-2，被称为 Scalar。

向量的线性组合
在坐标系中，任何两个向量的进行基本的加法和乘法运算后，都可以组合成一个新的向量：
u=av+bw
在线性组合中，a和 b是变量，即Scalars，如果它们不断变化，则得到的新向量也可以覆盖整个直角坐标系（不包括 v和 w在一条直线或一个点上的情况）。
把 v和 w看做基本向量，它们和 i、j一样，通过改变 scalars，线性变换后的向量集都可以覆盖整个坐标系，区别在于，对于同样的输出向量（方向和长度一样），它们的 scalars 的值是不同的，选取不同的向量作为基本向量，可以构建不同的坐标系。
线性组合中的线性从何而来？一种说法是， a或 b中，保持其中一个参数不变，则结果向量的顶点将在坐标系中画出一条直线，如下面的右图所示：

更多的就不在这说了，精彩内容大家可以去 bilibili 寻找 3Blue1Brown 的视频《线性代数的本质》：http://www.bilibili.com/video/av5987715?share_medium=android&share_source=qq&bbid=XY7A8287EE076E4CAA10B0C76108F221584D9&ts=1556369361625 ，相信可以有很大的收获。

最后几个模块组合在一起就是：

设计

本次的课程是交互媒体专题设计，既然有交互两个字，那自然不能只是有processing以及向量代码就可以，还得谈谈人机交互。
1、在人机交互中，很重要甚至是核心的一点就是可用性，人机交互的目标是普遍可用，而可用性的度量：学习时间、性能速度、用户出错率、记忆保持时间、主观满意度；本游戏操作简单，很容易上手所以在学习时间上会有较高满意度，一般也不会有出错。
2、对于用户界面，我很直观的展示了开始游戏的方法，用户获得分数以及重玩的方法，所以用户界面很清晰直观；当然背景由山川的移动，会加大对用户视觉上的困扰以加大游戏的难度，增加游戏的挑战性。
3、功能与时尚平衡，其中很重要的一点，就是颜色设计。在人机交互中，有使用颜色的指南：（1）谨慎地使用颜色：限制颜色的数字和数量，（2）认识到彩色的力量是一种编码技术，（3）留意颜色配对问题，（4）在图形显示中使用彩色以实现较大的信息密度，（5）留意对颜色代码的共同期望。。。还有很多，不一一举例。本游戏的颜色没有设置的很鲜艳，对眼睛没有太大刺激，背景山川的颜色也没有差别很大，给人还算一种舒适感。而每次出现新的方形，颜色就会发生渐变，不仅与背景呼应，也给用户一种提示感。

当然向量，粒子系统只是《代码本色》中的前面几章节内容，后续还有更高深的内容，争取学习以后，做出更精彩作业，同时也只是触及了人机交互的皮毛，还有更深处值得探究。