动画技术的交互应用所作的动画

作者： 周益铭

本交互设计的实现主要运用了《The Nature of Code》《代码本色—Daniel Shiffman》中向量（Vector）、力（Force）和粒子系统（Particle System）三个章节的内容。、

实验环境：processing

实验语言：java

代码量：422行

https://www.zhihu.com/video/1105910447408168960

设计思路

Step1：

我的程序是用处理语言编写的一个基本的交互式图形程序。主焦点是一个风筝，用户可以控制和改变的颜色。也有一个日夜循环与相应的太阳或月亮，也自动。有一个云会在屏幕上移动，根据程序当前处于昼夜循环的哪个部分来改变颜色。在这个周期的夜晚，有一些恒星在随机位置闪烁。

在动画和交互元素方面，风筝可以通过用户输入使用4轴移动（左、上、右和下方向）。有三个风筝尾自动动画，不需要用户输入。风筝线是固定在显示窗口左下角的贝塞尔曲线；该线根据风筝的当前位置自动调整。风筝和风筝尾巴的颜色可以由用户通过热键更改，热键在开始屏幕上显示给用户。开始屏幕，它有一个事件处理程序来确定什么时候应该启动动画。回到实际的动画中，用户可以通过单击鼠标左键来改变一天中的时间。背景将相应地改变颜色，太阳或月亮将离开屏幕，其对应物将在屏幕上以预定的弧线移动。在这个周期的夜晚，星星会随机出现并闪烁。还有一个云，根据程序在白天和晚上的哪个周期改变颜色。它会自动在屏幕上移动；当云离开屏幕时，它会循环回到开始。

上图为step1完成后的效果截图：（ps：可通过s进入主界面，“R”“G”“B”分别用来调节风筝的颜色，鼠标左键用来控制白天和黑夜的变换）

Step2：

这一部分的程序借鉴了openprocessing中一个大神的程序并加以改编，用向量和例子系统编写了一个鼠标为力的方向的自制智能体路径跟随的程序，在力的作用下方块跟随鼠标进行跟踪。

（step2主要利用了《代码本色》中第一章向量、第二章力、第四章例子系统和第六章自治智能体中的知识）

下图为Step2完成后的效果截图：

本实验的亮点：

1.对于用户界面，我很直观的展示了开始动画的方法，所以用户界面很清晰直观；

2.功能与时尚平衡，其中很重要的一点，就是颜色设计。在人机交互中，有使用颜色的指南：（1）谨慎地使用颜色：限制颜色的数字和数量，（2）认识到彩色的力量是一种编码技术，（3）留意颜色配对问题，（4）在图形显示中使用彩色以实现较大的信息密度，（5）留意对颜色代码的共同期望

3.设置较低的帧速率以平滑动画

三、具体步骤的实现

设置初始风筝、云、太阳、月亮的坐标和初始颜色和初始状态

设置较低的帧速率以平滑动画

使用系统列表中的第一个字体创建字体

设置背景

从低层到最高层：（月亮升起时，显示夜空）

1.星星

2.太阳/ 月亮

3.云

4.风筝

画风筝和风筝线（贝塞尔曲线；该线根据风筝的当前位置自动调整）和

云（根据程序在白天和晚上的哪个周期改变颜色）

如果日夜交替，或日月交替，则使太阳/月亮落下并升起。

当它设置位置时调用星来创建星

--用多少个节点之间模拟闪亮的形状变化。

夜间云彩变化

首先编写一个粒子类用于保存粒子的各种属性——位置、速度、加速度、还有粒子的大小，颜色。

将粒子的位置、速度、加速度都设置为向量的形式，这样有利于模拟在真实世界中喷泉的运动效果

粒子的大小随机，颜色随着时间的变化产生渐变

添加鼠标的交互

添加向量（将重力和吸引子质量合并为1个数）

意见反馈

我最初希望风筝尾部对用户输入做出反应（即，当用户向左移动风筝时，风筝尾部应向右流动，反之亦然）。在时间限制、效率和通用代码易读性方面，我们无法找到一种简单的方法来复制风筝尾巴动画代码并手动编辑每个坐标，可是这个不太可行。而且我们还想让星星在下一组随机的星星被吸引到屏幕上之前闪烁几次。但如果不重写大部分代码，这就太难实现了，因此，我们选择了降低新恒星出现的频率。Processing语言的简洁用法，以及它的网站和IDE为编程提供了极大的便利，同时也为学生 带来很多乐趣。

参考文献

《代码本色》第一章、第二张、第四章、第五章、第六章