什么是向量  

  向量通常指一个有长度有方向的量。向量使所有的移动和空间行为更容易理解和在代码中实现。向量可以相加,缩放,旋转,指向某物体。 

  在javascript中,一个方向和长度(即向量)在二维空间中可以用横坐标x和纵坐标y表示。 

  

  上图中有4个不同的向量及其x和y分量(左上角为原点{x:0,y:0},这里的向量代表方向、长度,而不是位置。

  向量长度

  向量的方向由x、y分量表示,可以根据x、y坐标用勾股定理来表示长度。

  1. length = Math.sqrt(x*x + y*y);

  一个横坐标( x = -3 ),纵坐标( y = 3 )的向量,利用勾股定理计算长度:

  1. length = Math.sqrt(-3*-3 + 3*3); //length 约为 4.24  

  

  在javascript数学函数中,角是以弧度( radian )为单位,不是角度( degree )。1弧度是弧长和半径相等的弧,圆的周长:2*Math.PI*R(R为半径),圆的弧度:2*Math.PI    

  

    弧度和角度转化

  1. degrees 角度
  2. radians 弧度
  3.  
  4. degrees = radians * 180/Math.PI
  5. 角度弧度乘于180再除于PI
  6.  
  7. radians = degrees * Math.PI/180
  8. 弧度等于角度度乘于PI再除于180
  9.  
  10. //角度转弧度
  11. var degToRad = function(deg){
  12. return deg * (Math.PI/180);
  13. }
  14. //弧度转角度
  15. var radToDeg = function(rad){
  16. return rad * (180/Math.PI);
  17. }

  向量的运算

  1. 加、减:可以通过加减向量的x,y坐标来实现向量的相加或相减

    给飞行的皮球加上一个重力向量,让它真实的下落

    把两个碰撞物体的向量加在一起,计算逼真的碰撞反馈

    给宇宙飞船增加火箭推力的向量,让宇宙飞船移动

  2. 缩放:按照一定比例的缩放向量的x,y坐标,可以缩小或放大向量的长度

    反复以略小于1的向量缩放移动向量,让对应物体缓慢的停下来

    将大炮的方向向量扩大,作为一个发射炮弹的初始向量

  3. 标准化:有时需要将一个向量变为单位长度,单位长度的向量叫单位向量 

    定向喷射的方向

    斜坡的倾斜方向

    大炮的发射方向

  4. 旋转:以任意角度来旋转一个向量,可以指向任意一个想要的方向

    是一个对象始终指向另一个

    更改一个虚拟的喷射引擎的推力方向

    根据发射器的方向改变投射体的初始发射方向

  5. 点乘:点乘给两个向量之间的角度的余弦,或者点乘提示两个向量的方向相近程度。点乘的结果在 -1 到 1 之间变化。

    向量的方向相同:点积 = 1

    向量的夹角是45度:点积 = 0.5  

    向量的夹角是90度:点积 = 0

    向量的夹角是180度:点积 = -1

  创建一个javascript向量对象

  1. var vector2d = function (x, y) {
  2. var vec = {
  3. vx: x,
  4. vy: y,
  5. // 缩放
  6. scale: function (scale) {
  7. vec.vx *= scale;
  8. vec.vy *= scale;
  9. },
  10. //加 另一个向量
  11. add: function (vec2) {
  12. vec.vx += vec2.vx;
  13. vec.vy += vec2.vy;
  14. },
  15. //减 另一个向量
  16. sub: function (vec2) {
  17. vec.vx -= vec2.vx;
  18. vec.vy -= vec2.vy;
  19. },
  20. //相反方向
  21. negate: function () {
  22. vec.vx = -vec.vx;
  23. vec.vy = -vec.vy;
  24. },
  25. //向量长度
  26. length: function () {
  27. return Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy);
  28. },
  29. //向量长度的平方
  30. lengthSquared: function () {
  31. return vec.vx * vec.vx + vec.vy * vec.vy;
  32. },
  33. //标准化
  34. normalize: function () {
  35. var len = Math.sqrt(vec.vx * vec.vx + vec.vy * vec.vy);
  36. if (len) {
  37. vec.vx /= len;
  38. vec.vy /= len;
  39. }
  40. return len;
  41. },
  42. //旋转
  43. rotate: function (angle) {
  44. var vx = vec.vx,
  45. vy = vec.vy,
  46. cosVal = Math.cos(angle),
  47. sinVal = Math.sin(angle);
  48. vec.vx = vx * cosVal - vy * sinVal;
  49. vec.vy = vx * sinVal + vy * cosVal;
  50. },
  51. //调试
  52. toString: function () {
  53. return '(' + vec.vx.toFixed(3) + ',' + vec.vy.toFixed(3) + ')';
  54. }
  55. };
  56. return vec;
  57. };

 

 

  

javascript中的“向量”的更多相关文章

  1. 探秘JavaScript中的六个字符

    JavaScript 是一个奇怪而有趣的语言,我们可以写一些疯狂却仍然有效的代码.它试图帮助我们把事情转换到基于我们如何对待他们的特定类型. 如果我们添加一个字符串,JavaScript会假定我们希望 ...

  2. 通过代数,数字,欧几里得平面和分形讨论JavaScript中的函数式编程

    本文是对函数式编程范式的系列文章从而拉开了与以下延续一个. 介绍 在JavaScript中,函数只是对象.因此,可以构造函数,作为参数传递,从函数返回或分配给变量.因此,JavaScript具有一流的 ...

  3. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  4. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  5. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  6. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  7. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  8. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  9. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

随机推荐

  1. 启动和关闭JBoss As 7.1.1脚本

    启动和关闭JBoss As 7.1.1,脚本例如以下djboss.sh: #!/bin/sh #JBOSS_HOME JBOSS_HOME=/opt/jboss case "$1" ...

  2. poj3278(bfs)

    题目链接:http://poj.org/problem?id=3278 分析:广搜,每次三种情况枚举一下,太水不多说了. #include <cstdio> #include <cs ...

  3. Vsphere client 无法登陆VCenter 处理的方法

    上周做安全的时候将DC.DB和VCenter 三台机器的防火墙都启用了,结果Vcenter 登陆的时候总是提示服务器没有响应,连web client 都无法登陆. 处理过程 一.首先要保证 vmvar ...

  4. Linux iptables简单配置

    #!/bin/sh#modprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t ...

  5. AE+SceneControl源代码共享

    近来的,博友发私信或邮件交换,第一次使用前SceneControl代做一点project股票,做的很粗糙.我们希望对大家有帮助,欢迎留言交流哈萨克斯坦. 除了主开.保存.数据加载.询价,几个功能主要是 ...

  6. IIS架构与HTTP请求处理流程

    IIS架构与HTTP请求处理流程 Windows操作系统中的IIS负责提供互联网服务,一台运行了IIS的计算机可以看成是一台Web服务器. Windows XP SP2 中IIS主版本号为5,Wind ...

  7. Linux下将UTF8编码批量转换成GB2312编码的方法

    Linux下将UTF8编码批量转换成GB2312编码的方法 在sqlplus中导入UTF8编码的sql脚本就会出现乱码错误,这时就需要将UTF8编码转换成GB2312编码,下面为大家介绍下在Linux ...

  8. OCP读书笔记(19) - 数据库空间管理

    传输表空间:将linux下的数据库中的test表空间传输到windows平台下的数据库 在传输表空间前,先确定一下源库与目标数据库字符集一致: select * from nls_database_p ...

  9. Hibernate4 : 持久化你的第一个类

    由于目前我在学校的一个实验室跟老师学习Java EE开发,老师用的是Seam框架接活做项目,所以这一系列的文章将会向Seam方向写..路线大致应该是 : JSP --> Servlet --&g ...

  10. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...