实践记录：我怎么捣鼓出那个“涟漪杨过”的
我前段时间在家待着，手上那个催着改需求的项目经理简直把我气坏了。那天本来是想早点收工，结果他非得在晚上十点半给我发了二十条微信，全是些鸡毛蒜皮的改动，还非要第二天一早就看到效果。我当时火大得很，直接把电脑一关，心想，老子不伺候了。
坐在阳台上抽烟，正好下了点小雨，就看到水滴落在楼下积水里的样子。那涟漪一圈一圈散开，倒是挺解压的。我当时就琢磨，平时那些游戏引擎做个水面效果，配置参数能让你看晕过去，一大堆复杂的API。我就想着，能不能自己用最简单的方法，弄个能看得过去的涟漪效果，纯粹是给自己找点乐子，顺便证明那些大公司也没啥了不起的。
从零开始：搭建那个破画布
我动手挺快的，第二天早上没理那个催命的项目经理，直接开干。
第一步：找个地方画图。
说白了，就是建个HTML的画布（Canvas）。我没用那些花里胡哨的库，就一个空白页面，先用代码把这个画布撑满屏幕。我得确保这个“水面”够大，我才能看到它散开的效果。这一步，五分钟搞定，简单粗暴。
第二步：定义“水滴”和“推力”。
真正的麻烦开始了。涟漪，本质上就是能量的传递。我需要一个二维数组，想象它是一个个紧挨着的点，每个点都有一个高度值。当你在某一点按下去（或者说，一滴水落下），那个点的高度值就得突变，然后它得把这个多出来的能量推给周围的邻居们。
- 我定义了两个二维数组：一个是当前高度，另一个是下一次的高度。
- 我设置了一个衰减系数。不然那涟漪就一直晃悠，没完没了。得让它慢慢平息下来，就像真实的水面一样。
第三步：实现核心算法——互相推。
这块代码写得我有点头疼。核心逻辑就是：一个点的下一时刻高度，取决于它四个邻居（上下左右）的高度平均值，减去它当前的高度，再乘以我那个衰减系数。公式看着复杂，但想通了就好办。说白了，就是邻居们拉着你，你又得保持自己的节奏，还得慢慢停下来。我用了一堆循环，挨个去计算数组里每个点的数值。
等我跑起来一看，初期的效果简直一团糟，水面跟得了帕金森一样，抖得厉害。我查了半天，才发现是那个衰减系数调得太大了，能量散不出去。我赶紧把它调小，调到0.99左右。这下才看着像个样子，点一下，波纹能平滑地扩散出去。
命名：杨过和它的涟漪
到了一步，就是把这些高度值转换成视觉效果。我没做复杂的3D渲染，太麻烦了。我就用灰度图来表示高度：高度越高，颜色越亮；高度越低，颜色越暗。这样一渲染，那个凹凸起伏的波浪感就出来了。
那天正好听着金庸的广播剧，听到杨过在绝情谷底的情节，觉得他那心境就像这水面，起起伏伏，但最终归于平静。所以我就随手给这个小项目起名叫“涟漪杨过游戏”了。虽然它一点也不像游戏，就是个模拟器，但名字听着带劲。
等我把最终成果截图发到群里的时候，那个催我改需求的经理还在追问进度。我直接把他屏蔽了，回了一句：“我在干点更有意义的事。” 这小玩意儿虽然没挣钱，但至少让我明白，很多看似复杂的技术，抽丝剥茧之后，本质上就是数学和逻辑的组合，并不比伺候一个瞎指挥的甲方更难。这波实践，值了。