想必大家应该都见过类似这种字幕往下边叠的视频截图

一般的做法都是自己把视频某几帧截图，然后用作图工具裁剪/覆盖之类的方式来制作出来。但是作为一个程序员，当然要思考一下效率更高的方式啊，于是就有了这篇博客。

最近一直在补线代的理论，边学边用代码实现里面的知识点。但是学习知识的目的总归是为了运用到工作和生活中去，为了不让这个过程太枯燥，试着利用目前复习的线代基础知识，做一个小demo。思考良久，决定实现一下Spine、live2D、龙骨这些工具的网格变换功能。开干！

效果如下：

原理：

①把图片水平垂直分成m×n份，每份沿对角线划分出两个三角形；

定义

由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵，简称m × n矩阵。记作：

矩阵是一个向量组（m个n维向量或n个m维向量）

特殊矩阵

同型矩阵

两个或者两个以上的矩阵的行数和列数都相同，那么我们就说这两个或两个以上的矩阵是同型矩阵。

二阶行列式

由两个二维向量组成，其结果为以这两个向量为领边的平行四边形的面积

n级排列

由1，2，…，n组成的一个有序数组称为一个n级排列。
例如，2431是一个四级排列，45321是一个五级排列。
注：n级排列的总数是 n(n-1)(n-2)…1=n!

想要在markdown文档里画一个树状图，但是手码又太累，于是就搞了这个玩意，纯当娱乐~

首先画一张“九宫格”树状图

觉得不好看可以自己画，只要包含这11种状态：首部、中部、尾部的叶子节点，首部、中部、尾部的非叶子节点以及每个节点的展开/收起状态，根节点的展开/收起状态。

学编程的小伙伴或多或少都写过贪吃蛇这个小游戏吧，核心的算法就是通过数组来维护蛇的移动和增长。具体实现方式：

地图：一个 M x N 的网格，每次移动的距离都是网格尺寸的 k 倍

移动：根据键盘按下的移动方向算出蛇头的位置，添加到数组顶部（unshift），同时移除数组的最后一个元素

文章里面的东西虽然涉及了人工智能，但是还是选择投在了前端的版块，一来延续上一遍的内容，二来自己对AI这块连入门都算不上，避免被众大佬嗤笑，但是也欢迎大佬们说出里面的纰漏和不严谨的地方，3Q (〃’▽’〃)

上个教程讲了深度贴图的其中一个应用——生成3D效果的图片。这篇文章称热打铁，说下如何获取深度贴图吧。

海外党玩F***book的时候可能有接触过这个酷炫的3d图片效果：

只要通过客户端的这个入口——

或者网页版的这个入口——

就能生成。不知道咋玩的请参考官方的帮助手册
。今天就教大家手撸出一个这样的功能，不要担心，所有代码加起来不超过200行并且不使用任何第三方库。虽然canvas2D也能做出这个效果，但是基于这种像素级操作的性能考虑，WebGL显然是更好的方案，我前面的有些教程也用到了WebGL，核心的API我就不做过多介绍，直接详细地注释在最终的代码里面了，代码仍然使用WebGL
1.0版本。

概述：

在计算机图形学的一众效果中，水波效果无疑非常能引起观众眼球。这是一种模拟了水在受到干扰时的行为。

本文由两部分组成。第一部分讲述如何模拟水的行为。第二部分介绍光线到达透明表面时如何折射。通过这两部分知识可以写出效果瞩目的程序。