矩阵的史诗级玩法
iloveas2014
这个作者很懒,什么都没留下…
展开
-
【原创】《矩阵的史诗级玩法》连载一:写在前面的话
说到矩阵,我想大多数人第一反应就是黑客帝国。嗯,没错,再专业的词汇,当它摆到了电影或者其它的日常生活元素上,都将有机会化身为一个热门的话题。所以《黑客帝国》热播期间,矩阵甚至都被大家摆到了饭桌上。然而,不管聊得有多欢,一切都仅仅停留在概念的层次上。如果此时你突然问他们,矩阵乘法怎么算的话,那恭喜你,冷场王的称号非你莫属了。 这段时间我突发奇想地想到了矩阵的一些奇葩应用,想在博原创 2018-02-03 16:48:20 · 847 阅读 · 3 评论 -
【原创】《矩阵的史诗级玩法》连载二十三:直线和二次贝塞尔曲线求交的常规做法
不得不说,上篇我把牛逼吹大了。因为直线和二次贝塞尔曲线求交,实际上可以在直线上钻钻空子,计算过程就变得很简单了,不会比矩阵法复杂多少。然后我们重温一下连载二十一中把换元结果代入到直线方程上的演算过程:对吧,如果直线方程换成复杂点的,比如二次贝塞尔曲线,那这里的化简也不见得简单。之所以上篇我会吹牛逼,是因为我当时思维短路了,以为一定要消去t才能继续求解,确实贝塞尔曲线消t特别繁琐。然...原创 2018-10-17 23:48:56 · 1088 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十二:直线和二次贝塞尔曲线求交的矩阵法代码
这篇我们来把完整的代码实现一下,大家可以新开个窗口打开连载二十一,然后把数学的实现步骤跟代码的实现步骤一一对应着看。<!DOCTYPE html><html><head><title>矩阵法计算二次贝塞尔曲线和直线的交点</title><script src="Matrix.js"></scri原创 2018-10-13 17:08:12 · 937 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十四:二元二次方程和圆锥曲线
弹指一挥间,国庆迎来第七天。拖延症即将又要发作,虽然这次开了个好头,但是我有个老毛病,每次重新捡起键盘写博客之前都要花1天时间来酝酿情绪,对于平时的我来说,工作日是基本没办法写的,周末吧,睡觉一天,酝酿一天又说要上班了。所以当年我写书的时候还特地辞职在家专心写,然后天天被家长骂的不行。本篇是一个新的开始,为了后面酝酿情绪的时间短一点,我今天怎么样都要先把这篇给死出来。从标题就不难看出,它跟前面...原创 2018-10-07 16:08:01 · 4530 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十五:二元二次方程一般式和圆锥曲线的关系(上)
本篇的标题跟上一篇很像。没错,这就是接上一篇的,而且会在上篇基础上继续深入。上篇我们走了“大胆假设,小心求证”的路线,通过表面现象猜测xy=1的焦点,并且代入到双曲线的性质公式中进行证明。发现包含xy项的曲线也有可能是圆锥曲线的变体。然而我们并没有用诸如旋转等变换方式来实现从x^2-y^2=1到xy=1的演变。8个月前的连载二,我给出了方程在y方向拉伸到原来两倍的方法:先建立新变量Y,...原创 2018-10-08 16:06:00 · 2847 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十六:二元二次方程一般式和圆锥曲线的关系(下)
这篇我们试着通过一般式来逆推回标准式。考虑到上篇估计让大家看晕。那本篇的前面我们先做个简单的事情,让xy项等于0,看看如何反推。去掉xy项了,那我们只需要想办法去掉一次项。然后就跟标准方程没啥两样了。在初中学习一元二次方程的时候,我们知道没一次项的方程可以直接开平方求得它的解,而包含一次项的,则可以用配方法把一次项融入到一个完全平方式中然后开方。此处我们也用类似的方法。以x为例,有...原创 2018-10-08 22:38:05 · 4086 阅读 · 8 评论 -
【原创】《矩阵的史诗级玩法》连载十七:用矩阵研究二次贝塞尔曲线和抛物线的关系(上)
国庆节后上班第二天了,我还想继续把这教程给写下去,不然又得花一天时间酝酿情绪,太不划算了,还不如一气呵成。正好异形砖切割水刀拼花(不知道水刀拼花是什么的可以看连载十五)的需求也要用到这里的东西。跟圆锥曲线相比,贝塞尔曲线在计算机绘图领域应用得更为广泛,所以对于我们来说,研究贝塞尔曲线比圆锥曲线要有意义多了。然而为什么我还要花这么大篇幅讲解圆锥曲线这么一个没卵用的东西呢?这是因为圆锥曲线是贝塞尔...原创 2018-10-09 11:27:25 · 1245 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十八:用矩阵研究二次贝塞尔曲线和抛物线的关系(下)
这篇没什么开头的话好说的,就紧接着上一篇,看下一般形式的二次贝塞尔曲线是否真的为抛物线就目前来说,除了最简单粗暴的代入消元,我想不到别的办法了。不过我们可以跟上篇连载一样,用A,B,C来存储一些复杂的常量表达式。由于P有x和y两部分的分量,所以ABC自然也包含x和y两类。现在我们就写出二次贝塞尔曲线用ABC表示系数的形式。把x看作常量,我们从第一条方程中求出t这...原创 2018-10-09 16:03:01 · 1652 阅读 · 3 评论 -
【原创】《矩阵的史诗级玩法》连载十九:用基向量矩阵实现二次贝塞尔曲线到标准抛物线的转换
在讲解砖块铺贴的时候,我们先用基础的旋转缩放等变换组合出了45度地图铺贴的变换矩阵。然后发现针对性太强,换成别的角度就很不好算了。接着改成了用基向量进行推导的方法。然后到二元二次方程,虽然我们可以通过旋转的方法消灭掉xy项从而判断出方程对应的曲线类型,但过程过于繁琐,表达式太长,处理起来也很不方便,如果还要进行求交而不局限于判断类型,那么用前面的旋转法,演算就更加麻烦了。既然在铺贴的实现中...原创 2018-10-10 21:59:33 · 1331 阅读 · 1 评论 -
【原创】《矩阵的史诗级玩法》连载二十四:两条贝塞尔曲线的常规求解方法(上)
拖延症开始慢慢发作了,这次主要是工作压力变大,而且虽然我某方面的技术优于不少同事,但综合能力却比不过大多数人。有个需求,产品那边一开始就想错了,很多写程序的都提出了质疑,但我没有提出,这原因除了我不懂得思考以外,还有很关键的一点是,按照产品的做法,技术难度比正确的做法高出了几个数量级。而对于我这种技术狂人来说,有难度并且在我感兴趣范围内的东西我都特别喜欢,所以我就欣然接受了产品提出来的做法。再者,...原创 2018-11-25 23:37:17 · 506 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十五:两条贝塞尔曲线的常规求解方法(下)
我们把上篇的方程搬过来。接着把第一条方程中x式的t解出来,代入到y式的t中即可完成消元。这个消元就是解二次方程+化简整理,技术含量不高,就是个体力活。把第一条方程x式中的t解出来。如果大家还记得连载十六中证明二次贝塞尔曲线是抛物线的过程,那么我相信这个式子对大家来说就不陌生了。也就是说,常规做法逃不掉这个蛋疼的求解+去根号的演算,具体如下。现在,第一条方程的t被...原创 2018-12-06 00:06:03 · 325 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十六:两条贝塞尔曲线的矩阵求交方法
上篇的结尾,我说传统法找到了灵感来简化,然而今天我才发现那个简化的思路是错的,既然如此,那我就不写简化的了,直接给出矩阵求解的方法。大家将会发现,即使不存在简单的直线方程,即使没有空子可钻,矩阵大法依然可以迎刃而解。在连载二十一中,我们求出了贝塞尔曲线到抛物线的基向量转换矩阵,并且将这个矩阵应用到直线上,然后用变换后的直线和标准抛物线Y=X^2联立求解算出最终的交点。由于贝塞尔曲线被简化为最简...原创 2018-12-20 00:03:40 · 1120 阅读 · 3 评论 -
【原创】《矩阵的史诗级玩法》连载二十七:两条二次贝塞尔曲线求交的矩阵法代码
这段代码跟连载二十二所实现的直线和贝塞尔曲线求交的代码差异不大,不同的只是由原来的一元二次方程改为四次而已,同时对系数的计算方法进行了调整,但还是没变复杂(看fourFormulaA~fourFoumulaE的计算)。也就是说,把直线换成贝塞尔曲线,并没有对我们的矩阵大法构成什么严重的威胁,嘿嘿!<!DOCTYPE html><html><head>...原创 2018-12-20 00:44:05 · 633 阅读 · 2 评论 -
【原创】《矩阵的史诗级玩法》连载二十八:二次贝塞尔曲线和椭圆的矩阵求交计算
这次的拖延,除了拖延症发作,还有一个原因是我最近在做项目中发现圆弧在图形软件中并不好用,椭圆弧就更不用说了。虽然圆弧在解方程方面比贝塞尔曲线简单很多,但是有一个很大的弊端。这个弊端我写了好多遍草稿,但总感觉还是大多数人看不明白,因为我觉得没有在实战中踩过那些坑都很难理解,而且浮点误差的问题在很多人眼里都是小事,我怎么解释都很难让大家认清这一问题的严重性。总的来说,我觉得圆弧还不如贝塞尔曲线...原创 2019-02-01 02:34:51 · 720 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十九:二次贝塞尔曲线和椭圆的矩阵求交计算代码
本篇的代码跟连载二十七中的大同小异,不同的是把其中一条贝塞尔曲线换成椭圆,然后矩阵的生成也变得直截了当,都基于已知条件。总的来说,比二次贝塞尔曲线的还要简单。PS:Canvas未提供现成的绘制椭圆方法(chrome有一个但其他浏览器还木有),我百度了一个基于正圆+缩放的方法并加入其中。<!DOCTYPE html><html><head><...原创 2019-02-01 04:06:57 · 397 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载三十:两个椭圆的矩阵求交计算
弹指一挥间,连载到了三十篇。能坚持看下来的,估计都是铁粉了。两个椭圆求交,一个变成单位圆,另一个则一定要做矩阵变形。根据连载二十八,这两条椭圆方程可表示如下。如果把其中一条(比如第1条)化为标准圆,那么第二条就要对X,Y执行一个如下的矩阵变换(一路看过来的朋友相信这个套路你们都不会陌生了吧)。然后把这个式子代入到第2条方程里面,天哪,那可不是一般的复杂。在连载二十八...原创 2019-02-01 05:09:11 · 908 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载三十一:两个椭圆的矩阵求交计算代码
跟上次放的代码相比,有变复杂的地方也有变简单的部分,复杂的是系数的计算,因为去根号会产生很多的项,简单的是矩阵的生成,直接把平移旋转缩放连乘即可,无需计算基向量。 <!DOCTYPE html><html><head><title>矩阵法计算二个椭圆的交点</title><script src="Matrix.js...原创 2019-02-01 18:14:19 · 753 阅读 · 4 评论 -
【原创】《矩阵的史诗级玩法》连载三十二:用矩阵法解二元二次方程组的一般式
现在我们给出一个方程组,然后尝试用矩阵来求解。在连载十六中,我们给出了曲线类型的判断法则:Δ<0时,方程为椭圆(包括正圆)Δ>0时,方程为双曲线Δ=0时,方程为抛物线其中Δ=B^2-4AC现在我们来判断给定的两条方程的曲线类型第一条方程,A=1,B=-2,C=1,Δ=B^2-4AC=(-2)^2-4*1*1=0,为抛物线(或者叫二次贝塞尔曲线)第二条...原创 2019-02-01 20:54:21 · 6560 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十一:用矩阵计算直线和二次贝塞尔曲线的交点
搞了这么多理论,现在是时候展现一下矩阵的魅力了。看看经过矩阵变换后的曲线求交是何等的方便!上篇说过,矩阵简化的效果立竿见影,如同连载二的直线椭圆相交判断一样。按我的套路,我是会先给出传统的做法,然后再用矩阵的史诗级玩法将其击败,不过这次为了不让大家看晕,我选择把顺序调过来。如下图,求贝塞尔曲线和直线的交点。虽然这条贝塞尔曲线的基向量矩阵已经在前面给算了出来,但为...原创 2018-10-13 05:41:49 · 2001 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载二十:实战一下二次贝塞尔曲线和抛物线的基向量矩阵转换
真没想到,上班这么多天,我还能坚持着写这系列的博客,自己都觉得太意外了。希望能一直写完吧,嘿嘿!好,不废话了,先来总结一下求解标准抛物线转换为贝塞尔曲线的基向量矩阵的计算步骤。我把转换前后的图片贴到这里来,大家可以照着看以便理解。首先B,D,G为给定的点坐标,其它点或者向量则通过这3个点进行计算,步骤如下:1 求出BD的中点C2 连结CG相交于点O’,按照矩阵变换理论它是C...原创 2018-10-13 01:43:08 · 969 阅读 · 2 评论 -
【原创】《矩阵的史诗级玩法》连载二:利用图形的几何特性简化问题
这标题如果写在考试的作文里,那老师一定会给我评0分,因为矩阵和图形的几何特性看起来并不存在任何关系,在大多数老师眼里这绝逼是一篇文不对题的作文,已经没有细看下去的意义了。类似的事情还真试过发生在我身上,初中的一篇作文本来有个老师给我评了57分(满分60),结果年级主任不服,给我降到了41分,原因跟该文章的标题有异曲同工之妙。懂我的人能看出来其中的奥秘,不懂的就是对牛弹琴了。没错,年级主任就像头牛一原创 2018-02-03 22:09:13 · 981 阅读 · 6 评论 -
【原创】《矩阵的史诗级玩法》连载三:判断一个点是否在矩形内(支持带旋转的)
发完上一篇文章之后,我的积极性突然被打击了下。在相关文章列表中,我找到了一个自己之前没听过的词语——影射几何。度娘告诉我,这门学科跟我所谓的“史诗级玩法”似乎有共通之处。也就是说,我拿来装逼的这玩意儿,不过是别人几百年前就玩烂了的一件玩具而已。但无论如何,我在三维家讲课,不少同事仍然表示收获颇丰,所以我选择了坚持。 判断点与图形的关系,已经是老生常谈的话题了。矩形和圆可谓原创 2018-02-04 15:53:48 · 1187 阅读 · 11 评论 -
【原创】《矩阵的史诗级玩法》连载四:45度地图砖块所蕴含的矩阵基础知识(上)
写理论的东西,最容易被吐槽的,莫过于没有应用领域了。但很幸运地,我找到了很热门的应用领域,就是45度视角游戏的地图铺设。我在三维家讲完这节课以后,负责技术面试的小伙伴们就拿去当面试题来用了,然而竟招来一波吐槽。究其原因,是大部分所谓的45度地图并非真的按照砖块的方向进行裁剪,其网格形状仍然为正方形。因此铺贴和点击等操作的逻辑都变得非常简单,视角完全是美术的事情,程序根本不用关心。在...原创 2018-02-14 17:02:13 · 943 阅读 · 1 评论 -
【原创】《矩阵的史诗级玩法》连载总目录
后面还会继续写,所以来个总目录,以便大家浏览。 连载一:写在前面的话连载二:利用图形的几何特性简化问题连载三:判断一个点是否在矩形内(支持带旋转的)连载四:45度地图砖块所蕴含的矩阵基础知识(上)连载五:45度地图砖块所蕴含的矩阵基础知识(下)连载六:创建我们的矩阵类连载七:平移,缩放,旋转矩阵的实现连载八:利用矩阵变形创建斜45度地图连载九:用矩阵反推45...原创 2018-02-04 16:19:49 · 2105 阅读 · 5 评论 -
【原创】《矩阵的史诗级玩法》连载五:45度地图砖块所蕴含的矩阵基础知识(下)
好了,这次先不废话,直奔主题。 前面我们在做一些图形判断的时候,提到了两种常用的变换:缩放和旋转,它们的变换公式分别为 缩放:x'=x*scaleX,y'=y*scaleY 旋转:x'=x*cosθ-y*sinθ,y'=x*sinθ+y*cosθ 如果只是做单个变换,那么公式确实不复杂,扔到计算机上跑效率也还可以。然而,如上篇...原创 2018-03-02 10:39:42 · 642 阅读 · 2 评论 -
【原创】《矩阵的史诗级玩法》连载六:创建我们的矩阵类
在偏向计算机领域的博客上讲纯理论的东西始终有点不接地气,那就还是用代码实战一下吧。此时我的语言选择困难症开始发作,不知道用啥语言好,用我最熟悉的AS吧,会被喷,用我不熟悉的C++吧,也会被喷。C#,java啥的,对环境的依赖有点大。对于这种纯算法的教程,我不希望开发环境成为大家前进的绊脚石。所以最终就如上文所言,选择了目前很火但是开发环境依赖又很低的H5(也就是JS啦),不介意没代...原创 2018-03-11 18:36:13 · 655 阅读 · 3 评论 -
【原创】《矩阵的史诗级玩法》连载七:平移,缩放,旋转矩阵的实现
上篇我们把矩阵的乘法和转换点等基础变换实现好了(个人觉得转换点也不算很基础的东西),现在我们来把应用型的功能,也就是标题所指的功能给实现出来。 在我最熟悉的AS3里面,Adobe为了降低使用门槛,把这些方法直接实现到矩阵类中,而我则是打算单独做个工具类来封装这些方法,名为MatrixUtil。 function MatrixUtil(...原创 2018-03-11 23:52:27 · 1196 阅读 · 1 评论 -
【原创】《矩阵的史诗级玩法》连载八:利用矩阵变形创建斜45度地图
“拖延症患者”这一称号真的不是浪得虚名,不信你们看下连载七的发表时间,都是7个月前的了,真心感谢这几个月来一直支持我的那几个粉丝,让你们久等了。 上次(也就是7个月前,哈哈)我们把几个基础的变换矩阵给封装到了js里面,现在我们进入案例阶段,先把正常铺贴的地图绘制出来。我用的是Canvas,这样所有位置捕获都不基于dom对象了,而都是纯数学的东西。 <!DOCTYPE htm...原创 2018-10-02 22:44:12 · 683 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载九:用矩阵反推45度地图直角坐标在斜坐标下的位置
我是个比较啰嗦的人,每次打算写一篇文章的时候都会发现太长了,从而被迫拆成两篇甚至更多。也好吧,至少让大家消化的容易一些。上篇我们在给定斜坐标的情况下算出了直角坐标下的位置,从而实现了正方形砖块斜铺的效果。这篇我们要根据给定的直角坐标(如鼠标位置)算出它在斜坐标的哪个位置,从而确定鼠标位于哪个砖块上。可以说这是一个逆向的操作,其做法已在连载四中提及,我们一起来回忆下:横向缩小50%-&g...原创 2018-10-03 03:38:32 · 419 阅读 · 1 评论 -
【原创】《矩阵的史诗级玩法》连载十:初中生都能看懂的逆矩阵求法
在程序这一行做久了,想法都变了不少。以前以为程序员只有数学好的人才能学得会,然而时代不同了,各种成熟的框架和工具链把程序的门槛一降再降。我在三维家讲课的时候发现不少T4+级别的程序员甚至连向量加减法都没听懂。既然如此,那我也降一下门槛好了,虽然难度还是比调用api要高一些。难点之一在于要先把逆矩阵这个概念给解释清楚。上篇我们提到了两个变换恰好相反的矩阵,而这正是逆矩阵的意义所在。从现象看,...原创 2018-10-04 03:21:03 · 1248 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十一:逆矩阵的代码实现及其在45度地图中的应用
从搜索引擎过来这篇文章的朋友可能会有点失望,因为我没在标题上说明是多少阶矩阵的代码。不得不说,固定阶数,并且还只是3阶的求逆实在是太简单了,上篇说初中生都能看懂。而任意高阶数则需要借助诸如克拉默法则一类的定理进行实现,并且可能还得尝试用高斯消元法进行优化。然而这些我都没去做。但不管如何,既然缘分让我们聚在一起,那新来的朋友不妨多留几分钟看下我的总目录,没准能找到你们想要的东西。下面开始正题...原创 2018-10-05 16:46:05 · 366 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十二:任意角度旋转+斜切扭曲的铺贴实现
这个标题拿出来估计不会引起太多的重视,我确实也不知道用什么词汇来表达能达到更好的效果,那直接把上一篇最后的两个图给出来吧!大家可以看一下这些铺贴,如果给足条件了,比如两个轴的角度,你们可以推导出它的铺贴算式么?如果可以的话,那跳过这篇也是无可厚非,但是先说明一下,接下来要压轴登场的史诗级玩法将建立在本篇的基础上,所以先了解下也没啥坏处。至少先看下给出的条件长啥样子。这种坐标变换...原创 2018-10-06 03:01:03 · 614 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载十三:基向量坐标变换矩阵的代码实现
本篇我们把上篇最后提到的矩阵实现出来并替换之前45度地图演示文件的矩阵上。var baseX = new Point(0.87, 0.5); //ex基向量var baseY = new Point(-0.32, 0.94); //ey基向量var matrix = new Matrix();matrix.a = baseX.x; matrix.b = baseX.y;m...原创 2018-10-06 15:32:46 · 581 阅读 · 0 评论 -
【原创】《矩阵的史诗级玩法》连载三十三:作业题:用矩阵判断一个点是否在三角形内(完)
这篇我一开始纠结了很久,到底要不要写在解方程的前面,因为总的来说这比解方程简单很多,方便入门。但另一方面,这是一个很奇葩的做法。点在三角形内的判断,向量法成熟高效,而矩阵法不但绕了个大圈子,而且效率还不咋地,完全是为了玩矩阵而玩矩阵。当然了,奇葩也不失为史诗级的一种玩法,自然就可以归到这个系列当中了。为了适当提高本篇教程的难度,我做出了一个艰难的决定:把这一课题作为作业布置给大家,不过我也不会...原创 2019-02-01 21:40:03 · 470 阅读 · 0 评论