精易论坛
标题: 【动效党】【高质量】动画即时演算技术——用图形诠释线性变换的几何美（矩阵篇） [打印本页]
作者: 770168287 时间: 2017-11-7 23:30
标题: 【动效党】【高质量】动画即时演算技术——用图形诠释线性变换的几何美（矩阵篇）
PART1 引入
因为刚刚沐浴完入学的洗礼晋级到新的级别不久，杂事挺多的，所以也没怎么逛论坛，距离上一篇低多边形运动（LowPolyMotion）算法的帖子发布至今也有挺长一段时间了没露面了。今天就再奉上一帖，和大家交流切磋。
刚正式接触线性代数这门学科不到两个月，觉得课堂上的线代实在枯燥。好在有幸遇见国外3Blue1Brown大神的线代解析，使得对线性变换的几何意义初有体会。在对这种美妙变换的感慨之余也不忘用自己动手，尝试独创算法实现这种变换的图形化渲染。
我将整个程序写成了可交互式的即时演算动画。其实是个半半成品，嗯...主要原因是交互性还比较单一。
目前完成了基向量添加、自定义向量添加、矩阵×矩阵动画演算、矩阵×向量动画演算、两种副本网格模式、两种动画预览模式，上图演示的就是基向量和自定义向量的添加。其实单动画本身而言，除了好看和能够帮助更形象地理解线性变换以及明白低阶矩阵运算的几何本质之外也没啥别的意义了，但是这种交互式的编程动画还是挺有意思的，也有一定的学习价值，特此开源。
PART2 演示
↑ 添加基向量与自定义向量 ↑
↑ 观察基向量变换 ↑
PART3 简析
这一部分简单分析一下这个算法的内容，或者说解析一下源码吧，因为之前也有发一些这类的帖子，但是反应大多是看不太懂，因此我也打算在以后的帖子中都对源码做一下大致的剖析。要实现这种动画主要分成四大部分来看，有兴趣的话就让我们就一起来看看吧。
一、坐标系部分
在这个项目中坐标系可以说是整个动画最有看点的部分了。所有变换的美感都在坐标系网格的拉伸中体现得淋漓尽致。
1.1 搭建一个可变换的坐标系，即要搭建一个可变换的网格，网格由许多条横纵线条组成，为了绘制这些线条，我们只需要确定每一根线条的左右端点的坐标即可。此外我们还需要确定坐标轴的单位长度，以及坐标原点的位置，为此，程序中定义了两个数据类型，用于存放坐标系的基本参数，分别是CoordinateSystemParam和CoordinateGroup。
通过画板的宽高和单位长度，不难确定Line_X和Line_Y的值，再设定一下颜色，通过循环调用画板的画直线命令很容易画出动图中的坐标系。
二、缓动函数部分
2.1 为了让我们的坐标系动起来只需要让端点动起来即可，计算出运动的始末位置后利用循环的方法来达到缓动的目的。例如做一个循环n次使得点P0从(x1,y1)位置运动到(x2,y2)位置的动画，只需要在第i次循环的时候将点P0从x1位置移动到x1+(x2-x1)×k位置即可，其中k=i/n。
2.2 为了使得动画更加平滑，我们借助正弦函数对线性数据进行“软化”。
考虑到实际需求，我们仅截取正弦函数的[-π/2,π/2]区间。通过f(i)=π×i/n-π/2即可将i∈[0,1]映射到f(i)∈[-π/2,π/2]，这样一来我们就可以得到sin(f(i))∈[-1,1]，为了使得比例值k依旧从0开始到1结束，不难发现只需令k=[sin(f(i))+1]/2，即k=[sin(π×i/n-π/2)+1]/2。这一技法贯穿整个程序动画，如果要实现更加复杂的缓动效果，可以参阅网上的其他资料，或调用现成的缓动函数。
三、向量箭头部分
3.1 两点确定一条直线，那么如何画出向量的矢量箭头？本程序中使用在原直线两侧再画两根短线段的方法来实现，为了达到目的，只需要确定直线倾斜角α、箭头开角β以及线段长度L即可。L在图中没有标出，L=|P0P1|或|P0P2|。
以计算点P1的坐标为例，首先α=arctan(y0/x0)，由几何关系不难发现∠EP0D=π/2-α-β，进而易得P1到直线DP0的距离d=Lcos(α-β)，代入x1=x0-d得到P1的横坐标为x1=x0-Lcos[arctan(y0/x0)-β]，同理y1=y0-Lsin[arctan(y0/x0)-β]，考虑到L与β都是我们自定义的已知量，当P0确定后，P1与P2的坐标也就确定了。值得注意的是x=x0±d的正负号具体由箭头所处的象限来指定，具体规则见源码的CoordinateSystemDraw函数。
确定了箭头三点的坐标后（P0,1,2），结合第二节缓动部分即可完成向量箭头的生成和移动动画。
四、运算表达式部分
4.1 运算表达式部分即矩阵乘法算式的动态显示部分。略，详见源码。
↑ 观察自定义向量的变换（Vector的坐标跟随箭头所在处渐显）↑
↑ 伸缩变换及张成空间的"降维" ↑
PART4 下载
老规矩，源码不要钱，回复即可下载把玩。觉得给力的话可以打赏和点赞。
-
引入.gif
(1.74 MB, 下载次数: 1966)
作者: Onsxsen 时间: 2017-11-7 23:32
看起来很高大上啊
作者: Codebug 时间: 2017-11-7 23:35
这个有点意思了
作者: 宇翼 时间: 2017-11-7 23:37
真正这样的技术党帖很少了，为sun点赞
作者: 1006793326 时间: 2017-11-7 23:40
真正的技术贴，支持sun！很好的东西
作者: 空之影 时间: 2017-11-7 23:45
看看方法，谢谢分享。
作者: 零点丶 时间: 2017-11-7 23:45
看起来很高大上啊
作者: 左胸膛 时间: 2017-11-7 23:58
我是为了JB，而战，感谢分享
作者: 秋海明月 时间: 2017-11-8 00:04
感谢分享，很有帮助
作者: wjhwjhn 时间: 2017-11-8 00:23
看看再说吧~~
作者: 蒲公英哭泣三毛 时间: 2017-11-8 00:27
我就想问问 楼主在哪上学
作者: zhanmao257 时间: 2017-11-8 01:13
看起来很666
作者: ManNanIsMe 时间: 2017-11-8 01:52
虽然我不懂这东西 但是很牛了 领域不同
作者: 你呆哪哪凉块 时间: 2017-11-8 06:34
虽然我不懂这东西 但是很牛
作者: TBit 时间: 2017-11-8 07:47
数学不好，写不出楼主这么NB的程序
作者: 小楊 时间: 2017-11-8 07:52
提示: 作者被禁止或删除 内容自动屏蔽
作者: 西山翠冷 时间: 2017-11-8 08:00
谢谢分享，我要这个！
作者: sa123123 时间: 2017-11-8 08:18
非常给力的技术贴！
作者: logboy 时间: 2017-11-8 08:26
好强大啊，虽然还看不懂，先收藏一下
作者: 网络注册会员 时间: 2017-11-8 08:27
我来支持一下
作者: LXP 时间: 2017-11-8 08:32
好强大啊，虽然还看不懂，先收藏一下
作者: xoufei 时间: 2017-11-8 08:42
绝对的好帖，画图可以用上
作者: q519584784 时间: 2017-11-8 08:46
动画即时演算技术动画即时演算技术
作者: qiuyingjia 时间: 2017-11-8 09:22
可以发，想HIV
作者: 一瓶矿泉水 时间: 2017-11-8 10:01
到底是什么源码,好奇的看看
作者: 神祇 时间: 2017-11-8 10:05
非常给力的技术贴！
作者: jiangai 时间: 2017-11-8 10:35
这个不错！！！！！
作者: 花开一半 时间: 2017-11-8 10:49
谢谢分享啊
作者: [易]晴空 时间: 2017-11-8 11:01
正儿八经高大上的东西
作者: 515889127 时间: 2017-11-8 11:31
好高端。。。。
作者: 1279868433 时间: 2017-11-8 11:49
绝对的好帖，画图可以用上
作者: 晓风残月丶 时间: 2017-11-8 12:13
一看就是好东西 支持支持
作者: 解千语 时间: 2017-11-8 13:00
谢谢LZ分享
作者: happyweeks365 时间: 2017-11-8 13:56
虽然不用,但还是支持了!!
作者: eagle111222 时间: 2017-11-8 14:58
真厉害，这种也能实现，高手
作者: 戏雨流年 时间: 2017-11-8 15:03
支持开源~！感谢分享
作者: 紫萱宝宝OoO 时间: 2017-11-8 15:19
厉害了 研究下
作者: 酷易自绘 时间: 2017-11-8 19:20
666666666666666666666
作者: 83358227 时间: 2017-11-8 20:49
没中文的？？？？？？
作者: 囧囧007 时间: 2017-11-8 21:24
作者: ClownSir 时间: 2017-11-8 21:47
支持开源~！感谢分享
作者: 绝版ん楠楠 时间: 2017-11-8 21:59
#在这里快速回复# 感谢分享，很给力！~
作者: xiaoarchos 时间: 2017-11-8 22:35
路过看看
作者: 青争 时间: 2017-11-9 00:59
老规矩，源码不要钱，回复即可下载把玩。觉得给力的话可以打赏和点赞
作者: huhu010203 时间: 2017-11-9 07:29
我真的不知道，我现在是来学数学的还是易语言的？
作者: zzzzzzzz88 时间: 2017-11-9 07:31
老规矩，源码不要钱，回复即可下载把玩。
作者: lqdefeng 时间: 2017-11-9 09:10
膜拜一下大神
作者: PP8500 时间: 2017-11-9 09:10
回帖有奖回帖有奖回帖有奖回帖有奖
作者: 难解 时间: 2017-11-9 10:44
厉害了我的哥...
作者: 财付通消息 时间: 2017-11-9 10:57
技术贴。这个6，学习了~
作者: wanzhenghe999 时间: 2017-11-9 11:04
谢谢楼主的分享！
作者: Fate 时间: 2017-11-9 11:07
作者: ermituofo 时间: 2017-11-9 11:34
好像很牛B的样子。。。。
作者: kankand 时间: 2017-11-9 12:52
下载了。。。。
作者: 云韵 时间: 2017-11-9 13:17
貌似很牛逼 技术
作者: oldghost 时间: 2017-11-9 13:29
漂亮!666666
作者: webmaster999 时间: 2017-11-9 14:17
#在这里快速回复#如果您要查看本帖隐藏内容请回复
作者: 我爱爱爱 时间: 2017-11-9 14:40
支持开源~！感谢分享
作者: 冬夏 时间: 2017-11-9 16:36
感觉溜得一批！谢谢大神，有东西可以玩了
作者: oow222 时间: 2017-11-9 16:45
顶楼主啦..希望楼主多发精品好帖啦.....
作者: 初夏花季 时间: 2017-11-9 17:00
说实话 看着确实厉害
作者: y2j423633 时间: 2017-11-9 18:36
终于等到你,还好我没放弃
作者: 扣扣 时间: 2017-11-9 18:57
这东西找了好久勒,谢谢!!
作者: 腐主 时间: 2017-11-9 19:09
蹭jb
作者: 小易学编 时间: 2017-11-9 20:18
嗯,不知有木有用，试试看了..
作者: o4qm 时间: 2017-11-9 20:39
谢谢分享
111111111111111
作者: 汉族 时间: 2017-11-9 21:07
挺叼b的。是啥实现的？画的？
作者: percher 时间: 2017-11-9 21:27
真牛，一般人真看不懂啊
作者: 6435525 时间: 2017-11-9 22:12
666666666666666666666666666666
作者: 列明 时间: 2017-11-9 22:57
让我想起了CAD，估计也和这做法差不多
作者: 福仔 时间: 2017-11-9 23:03
大佬6666666666666666
作者: gujq2088 时间: 2017-11-9 23:20
支持开源~！感谢分享
作者: 羽傲天 时间: 2017-11-9 23:47
这个真牛！！！！！！！！！！
作者: sixyin 时间: 2017-11-9 23:56
支持~！感谢分享
作者: Pinnacle 时间: 2017-11-10 00:32
6666666666666666666666666666666666666666666666666666666666666
作者: By未命名 时间: 2017-11-10 02:01
这已经不是大神级别了
作者: 秋海明月 时间: 2017-11-10 05:10
非常给力，很用心了
作者: fengyishen 时间: 2017-11-10 08:38
非常给力，很用心了，超膜拜这类纯算法的大神。
作者: 雨过天晴 时间: 2017-11-10 09:42
参考参考0
作者: 静等花落 时间: 2017-11-10 13:54
{:4_268:}{:4_268:}{:4_268:}
作者: 瘦瘦的小四 时间: 2017-11-10 16:01
太牛逼了 ，很有价值的
作者: 星星月影 时间: 2017-11-10 19:02
即可下载把玩
作者: jjjjjjwei 时间: 2017-11-10 21:42
这技术牛XX了
作者: 逆风 时间: 2017-11-11 10:59
谢谢楼主无私分享
作者: 896498107 时间: 2017-11-11 15:46
不错，挺好看的
作者: 明天自然醒 时间: 2017-11-11 15:51
感谢分享
作者: 久伴我驻我心 时间: 2017-11-11 17:26
贼6的
作者: Cola丿无情 时间: 2017-11-11 19:42
66666666666666666666666666666
作者: 929589232 时间: 2017-11-11 21:41
日常打卡一下
作者: xslyhk 时间: 2017-11-12 08:53
谢谢分享哦
作者: 枫眼 时间: 2017-11-12 10:11
6666666666666666666666666666666666666666
作者: 苍为 时间: 2017-11-12 12:16
给力，6的飞起
作者: 氧气 时间: 2017-11-12 12:25
我靠,好牛逼啊.楼主厉害了
作者: 3081067901 时间: 2017-11-12 12:29
看看 有需要下载
作者: litaomn 时间: 2017-11-12 20:05
老铁，顶，非常给力的贴子
作者: fanhexiang 时间: 2017-11-12 22:16
66666666666666666
作者: s1711323390 时间: 2017-11-12 23:48
只能喊66666666666了~~~~~~~
作者: 登峰望岳 时间: 2017-11-13 01:20
支持开源~！感谢分享
作者: 22shiji 时间: 2017-11-13 14:52
感谢分享，很给力！~
作者: jiagu 时间: 2017-11-13 16:24
楼主这个线性代数学的不错
| 欢迎光临 精易论坛 (https://125.confly.eu.org/) |
Powered by Discuz! X3.4 |
