交互式体验网站小记--CannotSleep
大限已到，永远是技术的第一生产力。
两个星期前，我得知了我还有一个交互作业尚未开始写。内心有一丝慌乱，主题自拟，使用语言自拟，运用到《代码本色》的知识。恰好本学期还有一门课程Web设计，在网上剽UI的时候，剽到一个很有意思的网站：
好厉害，我也要做。
剽到的交互网站一、技术选型
工具： javaEE、Tomcat、P5.js、Matter.js
环境的搭建是搭建在javaWeb（javaEE+Tomcat）下的，其实，这一步没什么必要，我以为我可以做到前后端传个参数，弄个上传表单什么的，但是坑挖的太大，还没有做到这一步。
P5.js是这个学期第一次使用，之前都是用Processing，两者相差的地方主要在js和java的语言结构不同。
Matter.js是我在偷懒的时候发现的，真的好用。它是一个用于Web的JavaScript 2D物理引擎库，用来模拟真实的物理系统。
二、界面设计
交互网站到底要做些什么？
当你因为思考而夜不能寐的时候，可能捉急的想要揪掉自己所剩无几的头发，最后这个睡不着网站，精挑细选了三种晚上失眠也适合玩耍的交互想法，记录了失眠之夜。
界面设计主要分成三个部分，首页、菜单项、内容。配色主要选取了非常保守的黑白配色，这样配色既不会出错，又有一丝丝的高级感，还不用想到底用什么颜色这种令人头疼的问题。
内容分为三个，拔头发，骑小马和抓小鱼。
晚上玩的时候，非常时尚，也非常减压。
界面设计1
界面设计2三、交互原理及实现
1.首页和抓小鱼（向量运动，perlin噪声模拟水的振荡）
首页交互
抓小鱼交互
一个好的随机数生成器能够产生互不关联且毫无规律的随机数。Perlin噪声算法相比于基础的random更符合这一要求，perlin噪声算法通常被应用于生成各种自然特效，云层、地形、波浪。
噪声对比
P5非常友好的内置了perlin噪声算法：noise()，可以近似的理解perlin噪声为随时间变量t的增大而不断变化的序列数，控制t的增长速率便能够得到平滑度不同的曲线，t越小越平滑，在模拟波浪中，我们需要的效果还是较为平滑的效果，选取的增量为0.005。一般来说，介于0.005-0.03之间的距离适合大部分应用场景。
perlin噪声代码
粒子字体这个交互效果，其实并不是真的添加了粒子生成器，而是使用了P5.fonts中一个内置的方法，将文本路径存储为位置点数组：
textToPoints
这样我们就得到了一组固定位置的点，这时候，如果我们在屏幕随机位置洒下相同数量的点，然后每一个点对应一个终止位置，这不就是向量的概念，大小位置和方向，P5也非常友好的内置了创建向量的方法p5.Vector，每一帧重绘，新位置=原位置+速度，这些P5都十分友好的封装了相应的方法。
那么如何将鼠标交互加入其中呢？
鼠标向量和附近的点做向量相减会产生一个新的反向向量，重新获得一个新的位置点向量，重复上述步骤。（给出部分代码）
向量代码
继续进阶版向量运动，小鱼的游动，随机洒下种子，这次没有运动终点，
fromAngle
给加速度生成一个任意的角度，即随机给定运动方向，设定边界线，撞到就折返，拖影效果其实是绘制了是对保存下来的向量之前经过的位置信息的重绘。
随机游动1
随机游动2
2.没得头发和骑小马（链状物体的拉伸和碰撞，刚体与软体的碰撞）
拔头发交互
小马交互
在这里不得不表扬Matter.js，是一个很成熟的物理引擎了，原理内容已经完全不用编写者去考虑了，就是刚开始使用的时候，代码逻辑有点难懂。
我们主要去解决的问题，如何将p5和matter.js结合使用，本身matter是不需要重绘图像的，但是如果单纯使用matter的话，因为它自身有内置的图像，就不太好看。
先说一下用到的主要内容，在 Matter.js 中任何的物体都需要一个容身处，而存放这些物体的地方，我们称之为世界，物体必须添加到世界里，然后由引擎运行这个世界。而创建世界需要使用到 Matter.World 模块，该模块包含了用于创建和操作世界的方法，一个 Matter.World 相当于一个复合物体，物体、约束、复合物体的聚合体，其次世界还有额外的一些属性，比如重力、边界。
Matter中规定了常用的几种物理性质的物体：
Matter.Bodies 模块创建刚体，
Matter@www.xunwangba.composites 模块下，规定了创建和处理复合体的方法
在小马中，白块代表了不会发生形变的坚硬物体刚体，而小马是一个编织的软体，易于发生形变，且具有一定的弹性的复合体。对于头发，我们可以想象成有很多很短的小棍穿在一起形成的，Matter中定义了Constraint（约束），可理解为通过一条线，将刚体 A 和刚体 B 两个刚体连接起来，被约束的两个刚体由于被连接在了一起，移动就相互受到了限制。
Matter.Constraint 模块包含了用于创建和处理约束的方法，这个约束可以很宽松，也可以很紧绷，还可以定义约束的距离，约束具有弹性，可以用来当作橡皮筋。
碰撞效果 直接遵循的Matter.js中的碰撞规则相互碰撞提供了collisionFilter属性，支持三种属性，group、category和mask，简单的碰撞效果使用group实现就可以，group大于零，始终碰撞。
约束的简单解释
头发约束
复合体创建四、一点想法
写到这里，我做的东西就介绍完了。新学期的新语言语言，新的脚手架工具，做的时候，也是边学边做，拉代码过来Ctrl C和Ctrl V。做这个东西的时候，看到一个大佬写的开发小记，写到React核心开发者Dan Abramov之前在文章中提到了自己到2018年底不熟悉的技术，他觉得指望一个有经验的工程师掌握每一种编程是不切实际的，一个优秀的程序员也可以同时存在许多知识盲区。但是，当他觉得感兴趣或者项目需求的时候，他可以很快学习这些盲区里的知识。
想要做到自己期待的效果的时候，并不是急于求成，学习和使用还是很必要的。
回过头来说交互，我是受到一个交互网站的启发，这个网页也只是纯体验式网页，并没有什么实际的作用，但是起到了博人眼球的作用，将其与传统的网页结合起来，网页设计会更加出彩。
最后贴出我的录屏效果：
（交互式体验网站小记--CannotSleep）宝，都看到这里了你确定不收藏一下？？
