AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

数学之美-前端工程师的数学世界 by 屈光宇

发布者 FEer   简介 前端技术
发布于 1437093698134  浏览 3473 关键词 前端, JavaScript, 算法 
分享到

第1页

数学之美

前端⼯工程师的数学世界



第2页

先来玩个例⼦子

怎么做到的?



!

答案后面会揭晓

http://qgy18.imququ.com/bobo/edit.html



第3页

坐标系

x

⽹网页上的直角坐标系:



!

1)双重坐标系(屏幕、页面)

 2)三维直角坐标(left, top, z-index)

 3)坐标值与相对位置(absolute、relative)

 4)参考点(元素左上角)

y



第4页

直角坐标系



直角坐标系的作用



1) ⽔水平垂直居中⼀一个固定宽⾼高的区块

 2) 判断两个绝对定位的div是否重叠

 3) 碰撞检测



div1 div1



div2



div1 参考点的平移



第5页

直角坐标系

碰撞检测



第6页

直角坐标系

直角坐标系的局限性

匀速圆周运动(旋转)

x^2 + y^2 = r^2 正确吗?

参数⽅方程: 

 x = r cos a

 y = r sin a



第7页

其他坐标系

CSS3:

 transition

 transform-rotate

 transform-origin

极坐标⽅方程:

 r(Θ)=a



第8页

直角与非直角坐标系

圆的三种数学表达

代数⽅方程:x^2 + y^2 = r^2 参数⽅方程:



x = r cos a

 y = r sin a

极坐标:r(Θ)=a 思考:



第9页

代数模型

求点到线段(多边形)的距离

百度地图使⽤用该模型!

思路:



!

1) 先求斜率,然后将斜截式变换为标准式,用上面的公式计算距离



!

2) 线路中的某段道路可能是⽔水平或垂直的,即该线段的斜率为0或者为1,

 此时计算距离需用特殊的⽅方程



第10页

向量模型



求点到线段的距离

C







  AB × AC = ?

B



D



初中物理告诉我们——!

!

向量AB和AC的合⼒力矩的⼤大⼩小即AB与AC在垂直⽅方向上分量的乘积即:!



AB × AC = AB • AC • sinθ



第11页

向量⽅方程



根据平⾏行四边形面积与底边求⾼高



AB × AC CD =

AC



d=



(x0 y1)2 + (x1y0 )2 x12 + y12



向量叉乘的计算公式



[x0 , y0 ]×[x1, y1] = [x0 y1,−x1 y0 ]



第12页

向量⽅方程



代数法:



向量法:



1) 计算量⼤大

 2) 步骤多

 3) 需要考虑特殊情况,如 0和⽆无穷⼤大

 4) 开⽅方需要考虑符号

 5)⽆无直观物理意义



1) 计算量⼀一般不⼤大

 2) 步骤少

 3) 不需要考虑特殊情况

 4) 不需要考虑符号

 5)有直观物理意义





第13页

三角函数

哪些情形下考虑使用三角函数



!

1. 周期规律

 2. 连续

 3. 正负符号(消除开根号)

 4. (椭)圆周有关的

 5. 向量



第14页

神奇的“抖图”

基本原理:

原图



B! ! !

A1 A2

! 效果区域 平移椭! 圆中⼼心,周期旋转



平面上的点插值



第15页

抖图具体操作



2.找出区域椭圆 的中⼼心点 A1



1.设置要抖动 的椭圆形区域

5.在A2运动过程中,以 椭圆区域边界的点B为 参考点,将A1B的像素

点映射到A2B上



3.对椭圆中⼼心点 A1进⾏行⼀一个平移,

得到中⼼心点A2

4.以A1为中⼼心, 对A2做⼀一个椭圆周

运动



第16页

抖图具体操作

B

我是⼀一张图片



第17页

代数⽅方法 B

C1 C2

ab A1 A2

算法概要:对椭圆内部的每⼀一个像素点,求出变换后的坐标

 根据代数的⽅方法即上图的已知c1,求c2

 因为A1、A2已知,可以先求a角,再通过a角求出B点,根据A2B求出b角

 因为满⾜足Bc1:BA1 = Bc2:BA2,因此可以求出c2



第18页

代数⽅方法的特点

优点

 不重复,不遗漏计算所有的点



缺点



1. 求角需要计算反正切

 2. 计算中需要开平⽅方

 3. 反正切有⽆无穷⼤大,需要特殊处理

 4. 每计算⼀一个像素点,需要重复计算角度(该角度很 可能之前已经算过)



第19页

向量⽅方法

B

c1 c2

A1 A2



扇形扫描



算法概要:对椭圆以中⼼心A1为圆⼼心进⾏行⼀一个0~360度的扇形扫描

 对每根“向量轴”A1B,求出对应的向量A1A2和向量A2B

 对A2B上的每⼀一个像素点c2,求出原始向量轴A1B上的对应像素点

 c1,将c1所在的像素copy到c2位置



第20页

向量⽅方法的特点

优点



向量计算不需要求反正切,不重复计算角度

 没有开平⽅方问题

 没有正负号问题

 加法和乘法运算取代复杂运算



缺点



重复计算了⼀一些像素点





第21页

计算耗时对比



代数







代数



向量



0 PC浏览器



向量

Android浏览器



第22页

概率、逻辑与证明⽅方法

硬币问题 or ⼀一种抽奖游戏

想象你⼿手里有5个硬币,每个硬币有正反面,求:

 将这5个银币随机抛⼀一次,有3个或3个以上正面朝上的概率

常规与非常规解法?

 真的只是数学问题?

 忘记公式怎么解?

 解法过程中的思考和优化?



第23页

排列组合解法



排列组合公式:



C53



+ C54 25



+ C55



=



1 2



第24页

穷举状态

0 - 反面, 1 - 正面

 00000(2) ~ 11111(2)= 0 ~ 31



求0~31这些数字转换成2进制数中超过两个 “1”的数字的个数



第25页

思维实验法

考虑情形A:5硬币中3个及以上正面朝上

 考虑情形B:5硬币中3个及以上反面朝上

 对于独立硬币来说,正面朝上和反面朝上概率均等,因此A和B相对于 所有情形的集合出现的概率相同

 又因为,显然对于5个硬币来说,B情形和A情形互斥,它们合起来概率 为1

 所以A、B的概率均为1/2



第26页

模拟事件法

用随机数模拟硬币的情况,随机模拟N次

 求出符合条件的次数,得到近似概率

 N越⼤大,得到的概率越接近于准确概率



第27页

解决问题的数学⽅方法



穷举



计算



模拟



思维



证明



第28页

逻辑证明



最后讲⼀一个与前端⽆无关的数学问题:



有理数的有理数次⽅方可以是⽆无理数,那么⽆无理 数的⽆无理数次⽅方可以是有理数吗?

 如果是,如何证明?



思维的⼒力量:不是所有的真理都必须亲眼所见



2 ( )2 2



( )!

"#





2$ 2 %&



第29页

谢谢

!

Q&A



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。