canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
写在最前
在之前的这篇文章中我们提到了对于贝塞尔公式的运用。本次分享一下如何推导贝塞尔公式以及附一个简单的?即小球跟随曲线轨迹运动。
欢迎关注我的博客,不定期更新中——
效果预览
demo地址
对于如何绘制连续的贝塞尔曲线可以参照这篇文章:基于canvas使用贝塞尔曲线平滑拟合折线段
在本例中生成的曲线由以上文章中的源码提供。
贝塞尔曲线公式推导
上面这张图是贝塞尔曲线的完整公式,看起来一脸懵逼=。=,因为这是N阶的推导公式,本次我们以一二阶贝塞尔公式的推导来理解一下这个推导公式的由来。先来看下网上流传已久的几张贝塞尔动图:
在这三张图中最重要的部分是我们需要理解变量t。t的取值范围是0-1。从上面的gif中也可以看出来似乎曲线的绘制过程就是t从0到1的过程。嗯其实就是这样的。t的真实含义是什么呢?
在p0p1、p1p2、p2p3等等的起点到控制点再到终点的连线中,每段连线都被分割成了两部分(仔细看动图中的黑色、绿色、蓝色圆点),各段连线中两部分的比值都是相同的,比值范围是0到1,而这个比值就是t
来看下面的一阶贝塞尔曲线示意图:
pt是p0p1上的任意一点,p0pt / ptp1 = t。从而我们可以引出下面的推导
此时t为时间,v为速度。我们可以看做从p0到p1的距离等于固定速度乘以固定时间
故到p上某一点的时间为固定的速度乘以某个时间值。同时固定的速度已经已经可以表示为上面的推导公式。此时等式右边就形成了t(0,1) / t;即相当于某个时间值 / 固定时间值,即产生了我们一开始所强调的变量t,其取值范围为[0,1]。从而下面的等式也就比较好理解了。
至此一阶贝塞尔曲线我们已经推到了出来,其中变量为起点、终点与比值t。
那么二阶公式如何从一阶过渡过去呢?
来看下面这张图:
其中Pp(t)的经过路径就是我们所求的二阶贝塞尔曲线,那么其实我们也可以将其从一阶进行演变:
我们先将pa、pb两个点所连线段当做一阶曲线,之后再由两端一阶曲线分别表示pa、pb,最后就得到了我们的二阶曲线公式。仔细观察就能发现这和我们最初的完整公式是相同的:
其中n选择不同数值时就可以得出不同阶的曲线公式。同时从上面的推导过程也可以知道,不论是几阶曲线,我们都可以完全由一阶来表示,而这个“表示”的过程就是我们在上面看到的形成动画中那些辅助线。故可以感受下作者自己写的曲线形成动画中的效果,每段辅助线均由一阶曲线形成:
相关地址
物体跟随复杂曲线轨迹运动
当我们知道曲线的公式有何而来之后,如何让小球沿着曲线运动就很好理解了。我们生成的每段曲线都是可以用公式表示出来的,也正因如此我们就可以得到每个t值时的曲线坐标点。从而知道物体的绘制坐标。
//核心逻辑
LinearGradient.prototype.drawBall = function() {var self = thisvar item = ctrlNodesArr[ctrlDrawIndex] //存储了各段曲线的控制点//各段曲线均为三阶贝塞尔,故下面计算x,y值代入到了三阶公式中var ctrlAx = item.cAx,//各个控制点ctrlAy = item.cAy,ctrlBx = item.cBx,ctrlBy = item.cBy,...if(item.t > 1) {ctrlDrawIndex++ //当一段曲线的t>1说明曲线已经走到头}else {self.ctx.clearRect(0, 0, self.width, self.height)item.t += 0.05var ballX = ox * Math.pow((1 - item.t), 3) + 3 * ctrlAx * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBx * Math.pow(item.t, 2) * (1 - item.t) + x * Math.pow(item.t, 3)var ballY = oy * Math.pow((1 - item.t), 3) + 3 * ctrlAy * item.t * Math.pow((1 - item.t), 2) + 3 * ctrlBy * Math.pow(item.t, 2) * (1 - item.t) + y * Math.pow(item.t, 3)//代入三阶贝塞尔曲线公式算出小球的坐标值self.ctx.beginPath()self.ctx.arc(ballX, ballY, 5, 0, Math.PI * 2, false)self.ctx.fill()}if(ctrlDrawIndex !== ctrlNodesArr.length) {window.requestAnimationFrame(newMap.drawBall.bind(self))}
}
其他canvas相关文章
- bezierMaker.js——N阶贝塞尔曲线生成器
- [基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果](https://github.com/Aaaaaaaty/...
- 基于canvas使用粒子拼出你想要的文字
- 基于canvas使用贝塞尔曲线平滑拟合折线段
- 用canvas实现视频播放与弹幕功能
- 基于canvas实现波浪式绘制图片
- 基于 canvas 实现的一个截图小 demo
最后
demo地址:这里✨✨
源码地址:欢迎star
惯例po作者的博客,不定时更新中——
有问题欢迎在issues下交流。
canvas进阶——贝塞尔公式推导与物体跟随复杂曲线的轨迹运动相关推荐
- 贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
写在最前 本文转载自:Annnnty:贝塞尔公式推导与物体跟随复杂曲线的轨迹运动 在之前的这篇文章中我们提到了对于贝塞尔公式的运用.本次分享一下如何推导贝塞尔公式以及附一个简单的��即小球跟随曲线轨迹 ...
- ae制作小球轨迹运动_在AE里如何让物体沿着路径运动?
如何让物体精确的沿着路径轨迹运动, 手动K帧也能创造出曲线运动,但控制比较麻烦,而且不精确, 用钢笔绘制运动路径可以精确的让物体沿着路径运动,控制简单. 一.创建物体 1.新建一个AE合成,选择HDT ...
- threejs中坐标系转换和实现物体跟随鼠标移动
坐标系转换 下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标: convertTo3DCoordinate(clientX,clientY){var mv = new THREE.V ...
- HTCVIVE物体跟随手柄移动手柄叩击
[1] AssetStore搜索下载以下package VRTK - Virtual Reality Toolkit - [VR Toolkit] SteamVR VIVE Input Utility ...
- Unity协程实现场景中鼠标按住的物体跟随鼠标移动
Unity协程实现场景中的鼠标按住物体跟随鼠标移动 void Awake() { StartCoroutine(OnMouseDown() as IEnumerator); } IEnumerator ...
- js进阶 12-3 如何实现元素跟随鼠标移动
js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...
- CocosCreator2.4 物体跟随鼠标或触摸点
CocosCreator2.4 物体跟随鼠标或触摸点 前言 效果 注意事项 源码 前言 项目需求鼠标点击要有效果,移动要跟随,但是看了文档发现坐标系转换会有问题,于是记录下. 效果 注意事项 使用cc ...
- unity实现子物体跟随父物体效果,但它们不是父子关系
有个需求要实现子物体跟随父物体效果,但是不能使用父子物体关系来实现,这时候就需要自己计算.如果只是实现简单的跟随移动是比较简单的,但是这里面有个难点是旋转问题,如何做到父物体旋转的同时子物体也跟随旋转 ...
- ROS实现无人机目标跟踪/物体跟随/循迹
无人机自主物体跟随/循迹 1. 物体跟踪 1.1 实现思路 1.2 代码示例 2. 自主寻线 本实验采用ROS和OpenCV实现功能,实验平台采用Parrot的Bebop2无人机 ROS部分的学习可以 ...
最新文章
- 使用Prism提供的类实现WPF MVVM点餐Demo
- TZOJ 4865 统计单词数(模拟字符串)
- c_str 以及atoi
- SAP Spartacus的ProductAdapter和OccProductAdapter
- 清新浪漫风情人节海报PSD分层模板!
- mysql基线检查_Mysql安全基线检查
- The Closest M Points//kd树+优先队列
- vs2005安装opengl
- 整流七 - 三相PWM整流器—公式推导篇
- Eterm系统出-航空公司大系统-PID放大软件-IBE查询接口 QQ 799670351 15075679773
- 喇叭POP爆破音产生的原因与解决办法
- vue table表格中只有表头加竖线分割
- 虚幻4引擎2d游戏基础
- 苹果圆圈怎么设置_苹果手机白色圆圈怎么弄
- Vim 自定义补全利器 Snippet
- 数据结构 插入排序(InsertionSort Sort) 详解 附C++代码实现:
- poi-导出excel表格
- [oracle]通过DBLINK远程查询带DBLINK的视图
- 关于petitfatfs的移植问题
- 离线部署python project 2021年4月2日更新
热门文章
- 体验IntelliJ IDEA的远程开发(Remote Development)
- OpenCV 打开双目摄像头(python版)
- FusionCharts属性大全
- 一线前端攻城狮的快应用开发之路:4、链接唤醒快应用
- 首页搬迁 - 一步一步指导搬家
- 虫师『软件测试』基础 与 测试杂谈
- 北大物理系与北大计算机系,五大竞赛学科A+高校排行榜发布!北大实力碾压,科大赶超清华...
- linux下开发basic程序设计,使用 Visual Basic 编写基于 Unity3D 的计算器
- 反编译所有图片加载库,让OOM无所遁形!
- 技术文档高频英文词汇