融入动画技术的像素交互
本学期交互媒体设计作业二的要求为：
参考《代码本色》教程，运用不少于3个章节的动画技术，实现一个交互应用，将动画技术充分运用于交互过程中。
1.需求设计联想
Daniel Shiffman教授的《The Nature Of Code》（中文译名《代码本色：用编程模拟自然系统》）介绍了用计算机模拟自然系统涉及的编程策略与技术，涵盖了基本的数学和物理概念，以及可视化地展示模拟结果所需的高级算法。读者将从构建基本的物理引擎开始，一步一步地学习如何创建智能移动的物体和复杂的系统，为进一步探索生成设计奠定基础。相关的知识点包括力、三角、分形、细胞自动机、自组织和遗传算法。本书的示例使用基于Java的开源语言及开发环境Processing编写。本书网站http://www.natureofcode.com）上的示例是在浏览器中通过Processing的JavaScript模式运行的。
作为纽约大学Tisch艺术学院Nature of Code课程主讲老师，Daniel集合了多年开发和教学经验，希望借由此书让大家真正了解如何用代码模拟自然现象。）
1.1 从毫无头绪到灵感来源
笔者在阅读参考书的时候，一直在思索要做一个什么样的交互系统。一开始并没有什么头绪，只好一个一个的去编译，看看有没有什么新鲜点子可以深入探索。看到最后，根据笔者自身的编码能力，拎出了几个可以做东西的实例。
随机生成向量场，鼠标点击屏幕更改向量场方向，按“空格”显示/隐藏向量场
圆随鼠标运动
粒子系统，并添加风力，风的方向随鼠标变换
随机生成质量大小不一的圆，添加重力
添加了液体，增加浮力之后的效果
当笔者看到这里，脑海里突然形成一个想法——如果将每张图片的像素赋予类似的系统属性，做出来的效果应该不错。
有了这个想法，之后的一切像是打开了所有机关，像素的一般属性有位置，色彩，在此，我们为什么不将像素赋予质量呢？
在日常生活中，我们常常能看见液体能将不同密度的物体分层的现象，初中高中做化学实验的时候我们就已经领略到了液体分层的魅力——我们可以想象一下，把一组色阶放入液体中，图片因为每个像素的密度不同，不同色阶像素的沉淀速度不一，最终大概会形成下图效果——
同理作用于图片：
这是最初始的想法，代码编译完之后看了下效果，感觉还可以，就是因为硬件问题程序跑起来比较慢，造成了一定的视觉卡顿，考虑之后，将每个像素改成长度为5像素的小矩形，改完之后效果如图——
1.2 以像素为中心添加功能
有了像素交互这个概念之后，开始把一些属性赋予像素。
比如上图所展现的效果，其实是利用循环得到中心像素点的颜色属性，通过计算（这里取值比较暴力，使用的是（256-（r+g+b））/3），使得越偏“白”的颜色密度越小），浅色像素块相较于深色像素块会降落得更缓慢，从而形成分层效果。
第二个添加的功能就是“跟随运动”，将跟随属性赋予到每个像素。
第三个跟“场”有关系，定义的是一个图片向量场。
第四个是粒子系统。
1.3 局限性
虽说有四个功能，但实际上，能与鼠标直接发生交互（点击按钮属于间接）的，只有三个——像素跟随，图片火焰（粒子系统），图片向量场，而且交互方式大多都是鼠标移动和拖拽，交互方式太过局限，有待改进。
2.功能预览
1.根据《代码本色》，定义了几种最基本的变化形态，预览图如下：
笔刷1：在画布上随机生成100个点，这100个点跟随鼠标运动：笔刷2：随机生成向量场，鼠标点击屏幕更改向量场方向：
笔刷3：粒子系统——火焰，并随风摇摆：
2.对“色彩的重量”初步调试
可控参数为“mess”，在程序中，调整的mess越大，像素块所受浮力越小。设置了黑白，红，绿，蓝为预设，可以查看效果。
对单一色彩调试完之后，可以尝试在图片上看效果——
3.将笔刷变换运用到像素
（1）图片向量场
（2）图片像素跟随
（3）图片火焰（运行起来比较卡，没有单个图片运行的流畅）
3.参考
灵感有一部分来源是数据可视化的翻译作业，Mapping Color to Meaning in Colormap Data Visualizations，对于颜色感知，个体虽说有不同程度的理解，但对全体人类这个群体来说，一般暗色给人“分量极重”的感觉，而一般偏白的物体给人一种清透感。当然，这和颜色的透明度也有很大关系。
代码本色：用编程模拟自然系统(The Nature of Code)
4.相关推荐
1.用Processing制作一个「生态瓶」
推荐理由： 作者巧妙的将“生态系统”这一概念嵌入到自己的作品中，这个作品在技术实现的基础上有自己的思想，从技术到自然，再从自然延伸到人类社会层次；如果把完整的生命系统分成横向和纵向，生态瓶中所表现的食物链关系可以看作是横向，纵向则是系统之间的层级。《代码本色》中细胞自动机一章便详细讲了这个概念。就像细胞构成组织，组织形成器官，器官组成个体，个体组建社会，社会构成国家。令人惊奇的是，在高层级中总能找到与低层级相同的简单规律和行为。
2.《Magic Network》：一个小孩都能玩的神经网络交互系统
推荐理由： 推荐理由如题，看到操作演示的时候还以为是神经网络导学，交互性很强，并且具有一定的研究意义和延展性。总的来说，《Magic Network》是一个能够让用户轻松搭建简单神经网络的可视化交互系统。这个博主一共写了2200行左右的processing代码和300行左右的Matlab代码来实现它，工程量挺大的。
3.Flowing Paint ——感受抽象
推荐理由： 这个作品的作者技术实现的着眼点是从像素开始的，我自己的作品也是基于像素实现的，推荐这个作品的理由也是因为在同类对比中，该博主实现的功能最多，交互体验也强，值得一提的是该博主在其中加入了音乐交互，根据音乐频率来改变粒子运动，最终作品呈现的效果是完整的，系统的，算是一个比较完整的大作业。