开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 27920|回复: 189
收起左侧

[2017开源大赛(第二届)] 【动效党】【高质量】动画即时演算技术——用图形诠释线性变换的几何美(矩阵篇)

    [复制链接]
回帖奖励 9 枚 精币 回复本帖可获得 1 枚 精币奖励! 每人限 1 次(中奖概率 60 %)
结帖率:50% (1/2)
发表于 2017-11-7 23:30:21 | 显示全部楼层 |阅读模式   湖北省武汉市
PART1    引入
    因为刚刚沐浴完入学的洗礼晋级到新的级别不久,杂事挺多的,所以也没怎么逛论坛,距离上一篇低多边形运动(LowPolyMotion)算法的帖子发布至今也有挺长一段时间了没露面了。今天就再奉上一帖,和大家交流切磋。
    刚正式接触线性代数这门学科不到两个月,觉得课堂上的线代实在枯燥。好在有幸遇见国外3Blue1Brown大神的线代解析,使得对线性变换的几何意义初有体会。在对这种美妙变换的感慨之余也不忘用自己动手,尝试独创算法实现这种变换的图形化渲染。
    我将整个程序写成了可交互式的即时演算动画其实是个半半成品,嗯...主要原因是交互性还比较单一。

引入

引入

    目前完成了基向量添加、自定义向量添加、矩阵×矩阵动画演算、矩阵×向量动画演算、两种副本网格模式、两种动画预览模式,上图演示的就是基向量和自定义向量的添加。其实单动画本身而言,除了好看和能够帮助更形象地理解线性变换以及明白低阶矩阵运算的几何本质之外也没啥别的意义了,但是这种交互式的编程动画还是挺有意思的,也有一定的学习价值,特此开源。
PART2    演示

添加基向量与自定义向量

添加基向量与自定义向量
↑ 添加基向量与自定义向量 ↑

观察基向量变换

观察基向量变换
↑ 观察基向量变换 ↑

PART3    简析
    这一部分简单分析一下这个算法的内容,或者说解析一下源码吧,因为之前也有发一些这类的帖子,但是反应大多是看不太懂,因此我也打算在以后的帖子中都对源码做一下大致的剖析。要实现这种动画主要分成四大部分来看,有兴趣的话就让我们就一起来看看吧。
    一、坐标系部分
    在这个项目中坐标系可以说是整个动画最有看点的部分了。所有变换的美感都在坐标系网格的拉伸中体现得淋漓尽致。
    1.1 搭建一个可变换的坐标系,即要搭建一个可变换的网格,网格由许多条横纵线条组成,为了绘制这些线条,我们只需要确定每一根线条的左右端点的坐标即可。此外我们还需要确定坐标轴的单位长度,以及坐标原点的位置,为此,程序中定义了两个数据类型,用于存放坐标系的基本参数,分别是CoordinateSystemParam和CoordinateGroup。
    通过画板的宽高和单位长度,不难确定Line_X和Line_Y的值,再设定一下颜色,通过循环调用画板的画直线命令很容易画出动图中的坐标系。
2.jpg

    二、缓动函数部分
    2.1 为了让我们的坐标系动起来只需要让端点动起来即可,计算出运动的始末位置后利用循环的方法来达到缓动的目的。例如做一个循环n次使得点P0从(x1,y1)位置运动到(x2,y2)位置的动画,只需要在第i次循环的时候将点P0从x1位置移动到x1+(x2-x1)×k位置即可,其中k=i/n。
     2.2 为了使得动画更加平滑,我们借助正弦函数对线性数据进行“软化”。
3.jpg

    考虑到实际需求,我们仅截取正弦函数的[-π/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|。
4.jpg
    以计算点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    下载
    老规矩,源码不要钱,回复即可下载把玩。觉得给力的话可以打赏和点赞。
    Matrix Motion.e (506.86 KB, 下载次数: 458)
引入.gif

点评

woc 惊艳到了!!!   新疆维吾尔自治区乌鲁木齐市  发表于 2022-7-31 23:10
学好数理化,走遍天下都不怕   安徽省合肥市  发表于 2017-11-15 16:09
一开始的V2黄色线条伸长,我邪恶了,哈哈!   香港特别行政区*  发表于 2017-11-8 00:07

评分

参与人数 28好评 +23 精币 +116 收起 理由
冰棍好烫啊 + 1 + 3 支持开源~!感谢分享
linzi0635 + 1 + 2 新技能已get√
陈大奶么么哒 + 1 + 2 支持开源~!感谢分享
想学坏的小孩 + 1 + 2 感谢分享,很给力!~
红桃じ简简箪箪 + 1 支持开源~!感谢分享
清歌终南 + 1 + 2 新技能已get√
SalHe + 1 + 4 哈 碰巧我也喜欢那个视频
yyy32541820581 + 1 很赞同,谢谢!
leiyh + 1 + 1 感谢分享,很给力!~
爱上『花美』 + 1 .---------------------------------------
2462528259 + 1 + 2 支持开源~!感谢分享
曙天 + 1 + 2 感谢分享,很给力!~
登峰望岳 + 1 新技能已get√
苍为 + 1 支持开源~!感谢分享
929589232 + 1 + 2 支持开源~!感谢分享
静等花落 + 1 大神,请收下我的膝盖
伤心猪大肠 + 1 + 3 支持开源~!感谢分享
羽傲天 + 1 + 2 只能喊66666666666了~~~~~~~
福仔 + 1 + 3 感谢分享,很给力!~
搞事 + 1 + 2 支持开源~!感谢分享
戏雨流年 + 1 + 2 支持开源~!感谢分享
解千语 + 1 + 2 支持开源~!感谢分享
大飛 + 1 + 10 吊爆了
宇翼 + 1 + 2 技术型原创作品!!!赞
兔子君 + 60 感谢发布原创<span id="transmark"
DerBai + 1 + 2 这类很少 顶一波
1006793326 + 1 非常给力的技术贴!
火狐编程 + 1 + 2 感谢分享,很给力!~

查看全部评分

本帖被以下淘专辑推荐:

发表于 2023-5-24 18:57:23 | 显示全部楼层   新疆维吾尔自治区石河子市

回帖奖励 +1 枚 精币

为什么下载后是乱码呀?
回复 支持 反对

使用道具 举报

发表于 2023-5-24 18:39:25 | 显示全部楼层   新疆维吾尔自治区石河子市
求源码谢谢谢谢谢谢求源码
回复 支持 反对

使用道具 举报

发表于 2021-11-8 13:24:42 | 显示全部楼层   河南省信阳市
回复 支持 反对

使用道具 举报

发表于 2021-11-8 13:24:33 | 显示全部楼层   河南省信阳市

回帖奖励 +1 枚 精币

回复 支持 反对

使用道具 举报

结帖率:100% (4/4)
发表于 2021-11-8 13:24:11 | 显示全部楼层   河南省信阳市

回帖奖励 +1 枚 精币

回复 支持 反对

使用道具 举报

发表于 2021-11-8 13:23:54 | 显示全部楼层   河南省信阳市
回复 支持 反对

使用道具 举报

结帖率:100% (1/1)
发表于 2021-11-4 22:56:18 高大上手机用户 | 显示全部楼层   浙江省台州市

回帖奖励 +1 枚 精币

感谢分享!精益有你更精彩!
回复 支持 反对

使用道具 举报

结帖率:100% (13/13)
发表于 2021-10-30 23:55:09 | 显示全部楼层   广西壮族自治区玉林市

回帖奖励 +1 枚 精币

多谢分享
回复 支持 反对

使用道具 举报

结帖率:22% (2/9)

签到天数: 7 天

发表于 2021-9-13 18:16:58 | 显示全部楼层   江西省赣州市

回帖奖励 +1 枚 精币

有没有支持库版本的动效?封装?这样方便使用
回复 支持 反对

使用道具 举报

签到天数: 5 天

发表于 2021-7-22 08:49:33 | 显示全部楼层   广东省广州市
#在这里快速回复#        感谢参赛,无私分享,精易有你更精彩
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 诚聘英才| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 800073686,邮箱:800073686@b.qq.com
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表