贝塞尔路径

用于沿着立方贝塞尔曲线高效查询点的库.

为什么?

这体现了土著联署材料的两个特点 SVGPathElement API : (英语) path.getTotalLength(),以及 path.getPointAtLength()但是比本地的API快得多.

贝泽尔曲线不易按长度取样. 通常情况下,在"Bezier space"中通过0到1之间的数字对每个段进行采样,但Bezier空间中均匀的平分值不会在笛卡尔坐标中产生均分的平分点. 在特定距离中找到一分通常意味着进行某种整合,如果得到很多分数,这种整合会很慢. 我需要它快速,虽然, 这是这里的图书馆进入!

使用量

添加库

在脚本标签中添加库 :

<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected]"></script>

或者在OpenProcessing上,添加CDN链接为库:

https://cdn.jsdelivr.net/npm/@davepagurek/[email protected]

[大
这一一揽子措施仅限无害环境管理。 它不能从普通JS中需要()d. 更多信息

创建路径

通过控制点 API

你可以打电话 create() 带有一系列控制点。 包括a在内的物体中的每个控制点 pt 属性,即曲线将经过的坐标。 它可选择包括: left 财务报告和审定财务报表 right 属性,它分别控制进出点的手柄.

const myPath = BezierPath.create([
  {
    pt: { x: 10, y: 10 },
    right: { x: 50, y: 10 }
  },
  {
    left: { x: 20, y: 20 },
    pt: { x: 20, y: 30 },
    right: { x: 20, y: 40 }
  },
  {
    left: { x: 50, y: 50 },
    pt: { x: 10, y: 50 },
  },
])

https://editor.p5js.org/davepagurek/sketches/dg2o-sLeK 互联网档案馆的存檔,存档日期2013-12-02

如果你想要完全平滑的曲线,那么控制点之间的线 left 财务报告和审定财务报表 right 坐标必须经过 pt 坐标。 确保这一点的一个方法是只创造一面,例如. right,然后反射到另一边。 以下是一个类似Catmull-Rom插入的例子,使用p5's p5.Vector 分数的分类 :

const pts = []
for (let i = 0; i < 5; i++) {
  pts.push({
    pt: createVector(random(width), random(height))
  })
}

// Smooth tangents
for (let i = 0; i < 5; i++) {
  const prev = pts[i-1]
  const curr = pts[i]
  const next = pts[i+1]
  if (prev && next) {
    // Change the scaling of the tangent to adjust the curve tightness
    const tangent = next.pt.copy().sub(prev.pt).div(4)
    curr.right = curr.pt.copy().add(tangent)
    curr.left = curr.pt.copy().sub(tangent)
  }
}

const myPath = BezierPath.create(pts)

通过 SVG <path> 标签

您也可以从页面所嵌入的 SVG 导入路径 :

const myPath = BezierPath.createFromElement(document.querySelector('path'))

绘图路径

您可以通过查询点绘制路径作为多线 getPointAtLength()数字 :

beginShape()
for (let i = 0; i <= 60; i++) {
  const pt = myPath.getPointAtLength(
    map(i, 0, 60, 0, myPath.getTotalLength())
  )
  vertex(pt.x, pt.y)
}
endShape()

一般情况下,您会想根据曲线长度来改变样本点的数量,例如:

beginShape()
const sampleRate = 3 // One point every 3px
const numSamples = ceil(myPath.getTotalLength / sampleRate)
for (let i = 0; i < numSamples; i++) {
  const pt = myPath.getPointAtLength(
    map(i, 0, numSamples-1, 0, myPath.getTotalLength())
  )
  vertex(pt.x, pt.y)
}
endShape()

粉碎路径

只要每个路径的样本点数相同,就可以在两条路径之间通过将两条路径之间的每个样本点放出来进行形态化:

const mix = map(cos(frameCount / 120 * TWO_PI), -1, 1, 0, 1)
const numSamples = ceil(max(path1.getTotalLength(), path2.getTotalLength()) / 3)
beginShape()
for (let i = 0; i < numSamples; i++) {
  const pt1 = path1.getPointAtLength(
    map(i, 0, numSamples-1, 0, path1.getTotalLength())
  )
  const pt2 = path2.getPointAtLength(
    map(i, 0, numSamples-1, 0, path2.getTotalLength())
  )
  vertex(lerp(pt1.x, pt2.x, mix), lerp(pt1.y, pt2.y, mix))
}
endShape()

https://editor.p5js.org/davepagurek/sketches/XvC5H7Zhi. 中国植物物种信息数据库

完整 API

BezierPath

由多个段组成的完整路径.

• getTotalLength(): number
  • 返回路径的总长度
• getPointAtLength(length: number, approximate: boolean = false): Point
  • 返回路径上指定长度的坐标
  • 指定 true 页:1 approximate 将使用内部样本点之间的线性插值。 这将更快,但会导致更分界线.
• getTangentAtLength(length: number, approximate: boolean = false): Point
  • 返回路径上某个长度的正切矢量, 正常化为长度为 1
  • 指定 true 页:1 approximate 将使用内部样本点正切点之间的线性插值来加快执行。 结果仍然会正常化,所以这实际上仍然看起来相当不错,如果不是完全准确的话.
• getAngleAtLength(length: number, approximate: boolean = false): number
  • 喜欢 getTangentAtLength,但它会返回路径的角度 以弧度
  • 这相当于呼叫 Math.atan2(y, x) 在正切向量上