bezier曲线_套娃成神：贝塞尔曲线

2024-04-15 20:46:05

说明：主要参考了维基百科，建议将其和本文对照阅读。

应用场景

贝塞尔曲线在数学和图形学以及设计中都发挥了重要作用，原因就是它能够“作为一种多项式逼近在[ a, b ] 区间上所有的连续函数，并且收敛性很强，也就是一致收敛。” 用人话说呢，就是一种多项式曲线，能够用最少的参数来模拟任意曲线，并且模拟效果普遍极好。

所以各种设计软件，包括Processing， Illustrater等对其进行了广泛使用，从而实现对于曲线数据的数据压缩。

公式

下图选自维基：

可以看出，n次贝塞尔曲线需要n+1个点来确定，而这n+1个点中都包括了曲线起点和曲线终点。其具体形式和二项式公式有很大的相似性。

公式还是不太好理解，还好这个曲线还有一种图形化的描述，先来大概看看吧：

（三次）贝塞尔曲线的图形化描述

这就很容易理解了，首先我们定义函数k平均：

def kmean(pa, pb, k):pax, pay = papbx, pby = pbreturn pax*k+pbx*(1-k), pay*k+pby*(1-k)

这个函数将两个点A， B的坐标按 k ：（1-k）进行平均。图中的P0和P1之间的绿点就是P0和P1的k平均点，而k是一个从0到1的变量（也就是插图中的t）。

那么一次贝塞尔曲线就是：参数点(2个)之间的k平均点(1个)的轨迹。

二次贝塞尔曲线就是：参数点(3个)之间的k平均点(2个)，之间的k平均点(1个)的轨迹。

三次贝塞尔曲线就是：参数点(4个)之间的k平均点(3个) ，之间的k平均点(2个)，之间的k平均点(1个)的轨迹。

不知道熟练“套娃之术”的你有没有豁然开朗了呢？

Processing中验证

https://www.zhihu.com/video/1228720109143052288

代码：

p0 = (100.0, 400.0)
p1 = (20.0, 100.0)
p2 = (400.0, 100.0)
p3 = (500.0, 400.0)
ps = []
for p in (p0, p1, p2, p3):ps.extend(p)def kmean(pa, pb, k):pax, pay = papbx, pby = pbreturn pax*k+pbx*(1-k), pay*k+pby*(1-k)def line_points(ps):beginShape()for p in ps:vertex(*p)circle(p[0], p[1], 12)endShape()def setup():size(600, 600)def draw():background(255)noFill()bezier(*ps)k = float(frameCount)/1000 - frameCount/1000stroke(200, 0, 0)line_points((p0, p1, p2, p3))p01 = kmean(p0, p1, k)p12 = kmean(p1, p2, k)p23 = kmean(p2, p3, k)stroke(200, 100, 0)line_points((p01, p12, p23))p012 = kmean(p01, p12, k)p123 = kmean(p12, p23, k)stroke(200, 150, 0)line_points((p012, p123))p1234 = kmean(p012, p123, k)stroke(200,220, 0)line_points((p1234,))

一点扩展

其实贝塞尔曲线概念本身就是极漂亮的，那么想一想下面的这种效果在Processing中是如何实现的呢？

更多资料

互动在线书：贝塞尔曲线的入门书

MIT出版：计算机辅助设计中的图形查询

bezier曲线_套娃成神：贝塞尔曲线相关推荐

unity 控制点贝塞尔曲线_在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
光滑曲线_计算机图形学十：贝塞尔曲线与贝塞尔曲面
贝塞尔曲线与贝塞尔曲面 1 贝塞尔曲线(Bézier Curves) 在进入具体原理讲解之前,首先看一下一条实际的贝塞尔曲线长什么样子其中为控制点,蓝色所表示曲线正是非常著名的贝塞尔曲线了,可以 ...
unity 控制点贝塞尔曲线_在Unity中使用贝塞尔曲线
前言最近项目需要呈现各种轨道且随机性较强,在找了一天插件后打算自己实现平滑曲线,思路是策划对关卡中的轨道放置任意个节点,我通过代码将所有节点绘制成一条平滑的曲线,每两个节点之间通过三阶贝塞尔实现,最 ...
cad的lisp程序大集合_大数据成神之路-Java高级特性增强(CopyOnWriteArraySet)
大数据成神之路大数据成神之路: 点我去成神之路系列目录^_^ 预计更新500+篇文章,已经更新40+篇~ 本系列的大纲会根据实际情况进行调整,欢迎大家关注~ 导语 CopyOnWriteArrayS ...
css3直线运动_纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
目标--就是纯css实现下面的曲线运动 image.png 这里是我最后实现的效果动画:在线视频实现效果直接看所有的代码: html代码 css代码 html{ background: #ad4e2 ...
怎样用python批量处理文件夹_套娃式文件夹如何通过Python批量处理
前言在我对项目组的一些训练图像进行预处理的时候,发现处理的图像是分好了类,在文件夹里的文件夹里,套娃式存储的,所以对我批处理,以及按原文件夹规则进行存储的时候,就会造成很大困扰但通过下面几个函数的 ...
android 贝塞尔曲线点击区域,白话经典贝塞尔曲线及其在 Android 中的应用
一.前言谈到贝塞尔曲线可能不少人会浮现它高大上的数学公式.然而,在实际应用中,并不需要我们去完全理解或者推导出公式才能应用得上.实际情况是,即使真的只是一个学渣,我们应该也能很轻松的掌握贝塞尔曲线的 ...
canvas贝塞尔曲线爱心_canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
写在最前由于原生的Canvas最高只支持到三阶贝塞尔曲线,那么我想添加多个控制点怎么办呢?(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时,关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控 ...
曲线之美（一）贝塞尔曲线
在图形图像编程时,我们常常需要根据一系列已知点坐标来确定一条光滑曲线.其中有些曲线需要严格地通过所有的已知点,而有些曲线却不一定需要.在后者中,比较有代表性的一类曲线是贝塞尔曲线(Bézier Spl ...

最新文章

热门文章