### Generating Lookup Table for Quadratic Curve

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example demonstrates using the `.getLUT(steps)` method on a quadratic Bezier curve to generate a lookup table of points. The `steps` parameter determines the number of parametrically equidistant points, which are then drawn as circles along the curve.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); var LUT = curve.getLUT(16); LUT.forEach(p => this.drawCircle(p,2)); }
```

--------------------------------

### Generating Graduated Curve Outlines in Bezier.js (Cubic Example 2)

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates creating a graduated outline for a cubic Bezier curve using four distance parameters, similar to the previous example but with different curve control points. The `Bezier.js` library handles the graduation of offsets linearly along the curve. This example initializes another cubic Bezier curve and draws its graduated outline, showcasing the flexibility of the `outline(d1,d2,d3,d4)` method.

```javascript
new Bezier(102, 33, 16, 99, 101, 129, 132, 173 ); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var outline = curve.outline(5,5,25,25); outline.curves.forEach(c => this.drawCurve(c)); }
```

--------------------------------

### Constructing Quadratic 2D Bezier Curve

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example demonstrates the construction of a 2D quadratic Bezier curve using six numerical arguments representing three control points (x, y pairs). The associated `draw` function illustrates how to render the curve's skeleton and the curve itself for visualization.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); }
```

--------------------------------

### Retrieving a Point on a Bezier Curve with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example illustrates how to retrieve a specific point on a Bezier curve using the `curve.get(t)` method, where `t` is a value between 0 and 1. The `get` method is an alias for `compute` and is used here to highlight the point at `t=0.5` on the curve.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); this.drawPoint(curve.get(0.5)); }
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); this.drawPoint(curve.get(0.5)); }
```

--------------------------------

### Generating Single-Distance Curve Outline Shapes in Bezier.js (Cubic Example 1)

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet shows how to generate a curve's outline as a series of distinct shape objects using `curve.outlineshapes(d)`. Each shape object contains four Bezier curves representing the start cap, forward path, end cap, and back path. When a single distance `d` is provided, the outline is generated at that distance on both the normal and anti-normal sides. The example initializes a cubic Bezier curve and then draws the resulting shapes with a random fill.

```javascript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.outlineshapes(25).forEach(s => { this.setRandomFill(0.2); this.drawShape(s); }); }
```

--------------------------------

### Generating Graduated Curve Outlines in Bezier.js (Cubic Example 1)

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet illustrates how to create a graduated outline for a cubic Bezier curve using four distance parameters: `d1` (initial normal offset), `d2` (initial anti-normal offset), `d3` (final normal offset), and `d4` (final anti-normal offset). The offsets are applied linearly along the curve, providing a varying thickness. The example initializes a cubic Bezier curve and draws its graduated outline.

```javascript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var outline = curve.outline(5,5,25,25); outline.curves.forEach(c => this.drawCurve(c)); }
```

--------------------------------

### Constructing Cubic 2D Bezier Curve

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example demonstrates the construction of a 2D cubic Bezier curve using eight numerical arguments representing four control points (x, y pairs). The `draw` function shows how to render the curve's skeleton and the curve itself for visualization.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); }
```

--------------------------------

### Generating Lookup Table for Cubic Curve

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example demonstrates using the `.getLUT(steps)` method on a cubic Bezier curve to generate a lookup table of points. The `steps` parameter specifies the number of parametrically equidistant points, which are then drawn as circles along the curve.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); var LUT = curve.getLUT(16); LUT.forEach(p => this.drawCircle(p,2)); }
```

--------------------------------

### Generating Single-Distance Curve Outline Shapes in Bezier.js (Cubic Example 2)

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates generating a curve's outline as a series of distinct shape objects using `curve.outlineshapes(d)`, similar to the previous example but with different curve control points. Each shape object provides detailed Bezier curves for its components. When a single distance `d` is provided, the outline is generated symmetrically. The example initializes another cubic Bezier curve and then draws the resulting shapes with a random fill, highlighting the `outlineshapes` method's output.

```javascript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.outlineshapes(25).forEach(s => { this.setRandomFill(0.2); this.drawShape(s); }); }
```

--------------------------------

### Reducing a Quadratic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates reducing a quadratic Bezier curve into 'simple' subcurves. It initializes a curve, draws its skeleton, then iterates through the reduced segments, drawing each one and marking the start of subsequent segments with a circle.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); var reduced = curve.reduce(); if(reduced.length>0) { reduced.forEach((c,i) => { this.setColor("black"); if(i>0) this.drawCircle(c.points\[0\],3); this.setRandomColor(); this.drawCurve(c); }); } else { this.drawCurve(curve); } }
```

--------------------------------

### Reducing a Cubic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates reducing a cubic Bezier curve into 'simple' subcurves. It initializes a curve, draws its skeleton, then iterates through the reduced segments, drawing each one and marking the start of subsequent segments with a circle.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); var reduced = curve.reduce(); if(reduced.length>0) { reduced.forEach((c,i) => { this.setColor("black"); if(i>0) this.drawCircle(c.points\[0\],3); this.setRandomColor(); this.drawCurve(c); }); } else { this.drawCurve(curve); } }
```

--------------------------------

### Finding Extrema on a Bezier Curve with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example shows how to find the extrema (points where the curve changes direction along an axis) of a Bezier curve using `curve.extrema()`. The method returns an object containing `values` (t-values) and `points` (coordinates) of the extrema. The snippet highlights these points on the curve.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.extrema().values.forEach(t => this.drawCircle(curve.get(t),3)); }
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.extrema().values.forEach(t => this.drawCircle(curve.get(t),3)); }
```

--------------------------------

### Intersecting Quadratic Bezier Curves with a Line in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example shows how to find intersections between a quadratic Bezier curve and a defined line. It initializes a quadratic curve and a line object `{p1: {x,y}, p2: {x,y}}`. The `curve.intersects(line)` method is used to calculate the intersection points, which are returned as an array of `t` values on the curve, and the snippet draws a point at each intersection.

```JavaScript
new Bezier(58, 173, 26, 28, 163, 104); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); var line = { p1: {x:0, y:175}, p2: {x:200,y:25} }; this.setColor("red"); this.drawLine(line.p1, line.p2); this.setColor("black"); curve.intersects(line).forEach(t => this.drawPoint(curve.get(t))); }
```

--------------------------------

### Intersecting Cubic Bezier Curves with a Line in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates finding intersections between a cubic Bezier curve and a line. It initializes a cubic curve and a line object `{p1: {x,y}, p2: {x,y}}`. The `curve.intersects(line)` method is called to compute the intersection points, which are returned as an array of `t` values on the curve, and the example draws a point at each intersection.

```JavaScript
new Bezier(53, 163, 27, 19, 182, 176, 155, 36); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); var line = { p1: {x:0, y:175}, p2: {x:200,y:25} }; this.setColor("red"); this.drawLine(line.p1, line.p2); this.setColor("black"); curve.intersects(line).forEach(t => this.drawPoint(curve.get(t))); }
```

--------------------------------

### Finding Self-Intersections with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates how to find self-intersections of a Bezier curve using the `intersects()` method without arguments. It initializes a cubic Bezier curve and visualizes its skeleton and curve. The `intersects()` method returns an array of `float/float` strings, where each pair represents `t` values on the curve at which an intersection is found, and the example draws a point at the first `t` value of each pair.

```JavaScript
new Bezier(100,25 , 10,180 , 170,165 , 65,70); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); curve.intersects().forEach(pair => { var t = pair.split("/").map(v => parseFloat(v)); this.drawPoint(curve.get(t[0])); }); }
```

--------------------------------

### Intersecting Two Quadratic Bezier Curves in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example illustrates how to find intersections between two quadratic Bezier curves. It initializes two quadratic curves, `curve` and `curve2`. The `curve.intersects(curve2)` method is used to identify and mark the intersection points. The method yields an array of `float/float` strings, where the first float is the `t` value on the first curve and the second is on the second curve, and the snippet draws a point on the first curve at the first `t` value of each pair.

```JavaScript
new Bezier(48, 84, 100, 187, 166, 37); var curve2 = new Bezier(68, 150, 74, 6, 143, 150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); this.drawCurve(curve2); this.setColor("black"); curve.intersects(curve2).forEach(pair => { var t = pair.split("/").map(v => parseFloat(v)); this.drawPoint(curve.get(t[0])); }); }
```

--------------------------------

### Calculating Curve Normal with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This example demonstrates how to calculate the normal vector at various points along a Bezier curve using `curve.normal(t)`. The method returns a normalized vector `{x: nx, y: ny}`. In 2D, the normal is the normalized tangent rotated by a quarter turn, as illustrated by the drawn lines.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var pt, nv, d=20; for(var t=0; t<=1; t+=0.1) { var pt = curve.get(t); var nv = curve.normal(t); this.drawLine(pt, { x: pt.x + d*nv.x, y: pt.y + d*nv.y} ); } }
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var pt, nv, d=20; for(var t=0; t<=1; t+=0.1) { var pt = curve.get(t); var nv = curve.normal(t); this.drawLine(pt, { x: pt.x + d*nv.x, y: pt.y + d*nv.y} ); } }
```

--------------------------------

### Calculating Curve Tangent with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet shows how to calculate the tangent vector at various points along a Bezier curve using `curve.derivative(t)`. The method returns a non-normalized vector `{x: dx, y: dy}` representing the direction of the curve at `t`. The example draws lines indicating the tangent direction.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); for(var t=0; t<=1; t+=0.1) { var pt = curve.get(t); var dv = curve.derivative(t); this.drawLine(pt, { x: pt.x + dv.x, y: pt.y + dv.y} ); } }
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); for(var t=0; t<=1; t+=0.1) { var pt = curve.get(t); var dv = curve.derivative(t); this.drawLine(pt, { x: pt.x + dv.x, y: pt.y + dv.y} ); } }
```

--------------------------------

### Intersecting Two Cubic Bezier Curves in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates finding intersections between two cubic Bezier curves. It initializes two cubic curves, `curve` and `curve2`. The `curve.intersects(curve2)` method is called to compute and display the intersection points. The method returns an array of `float/float` strings, with the first `t` value corresponding to the first curve and the second to the second curve, and the example draws a point on the first curve at the first `t` value of each pair.

```JavaScript
new Bezier(48, 84, 104, 176, 190, 37, 121, 75); var curve2 = new Bezier(68, 145, 74, 6, 143, 197, 138, 55 ); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); this.drawCurve(curve2); this.setColor("black"); curve.intersects(curve2).forEach(pair => { var t = pair.split("/").map(v => parseFloat(v)); this.drawPoint(curve.get(t[0])); }); }
```

--------------------------------

### Importing Bezier.js from a local file (ES Modules)

Source: https://github.com/pomax/bezierjs/blob/master/README.md

This snippet shows how to import the Bezier.js library when it's located as a local file within your project, either in Node.js or a browser environment. It assumes the `bezier.js` file is placed in a `/js/vendor` directory and demonstrates importing the `Bezier` constructor to create an instance.

```JavaScript
import { Bezier } from "/js/vendor/bezier.js";

const b = new Bezier(...);
```

--------------------------------

### Importing Bezier.js Module

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates how to import the Bezier class from its module file and expose it globally on the `window` object, making it accessible for client-side use in a browser environment.

```JavaScript
import { Bezier } from "./js/bezier.js";
window.Bezier = Bezier;
```

--------------------------------

### Generating and Offsetting a Quadratic Bezier Curve Outline in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates generating an outline for a quadratic Bezier curve. It initializes a curve, draws its skeleton and the curve, then creates an outline at a distance of 25 units. It further offsets this outline by 10 and -10 units, drawing all resulting curves to visualize the outline and its variations.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var doc = c => this.drawCurve(c); var outline = curve.outline(25); outline.curves.forEach(doc); this.setColor("rgba(0,0,255,0.3)"); outline.offset(10).curves.forEach(doc); outline.offset(-10).curves.forEach(doc); }
```

--------------------------------

### Importing Bezier.js in Node.js (ES Modules)

Source: https://github.com/pomax/bezierjs/blob/master/README.md

This snippet demonstrates how to import the Bezier.js library using ES module syntax in a Node.js environment. It shows the basic structure for importing the `Bezier` constructor and then instantiating a new Bezier object.

```JavaScript
import { Bezier } from "bezier-js";

const b = new Bezier(...);
```

--------------------------------

### Generating and Offsetting Curve Outlines in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates generating a curve's outline using `curve.outline(d)` and further offsetting the resulting `PolyBezier` object. It initializes a Bezier curve, draws its skeleton and original curve, then calculates and draws the outline at a distance of 25 units. It also shows how to apply additional offsets of 10 and -10 units to the `PolyBezier` outline, drawing these in a different color. The `PolyBezier` object provides methods like `length()`, `bbox()`, and `offset(d)` for further manipulation.

```javascript
new Bezier(102, 33, 16, 99, 101, 129, 132, 173 ); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); const drawCurve = c => this.drawCurve(c); var outline = curve.outline(25); outline.curves.forEach(drawCurve); this.setColor("rgba(0,0,255,0.3)"); outline.offset(10).curves.forEach(drawCurve); outline.offset(-10).curves.forEach(drawCurve); }
```

--------------------------------

### Creating Quadratic Bezier from Points

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates `Bezier.quadraticFromPoints`, which constructs quadratic Bezier curves passing through three specified points. It shows how varying the `t` parameter generates different curves, with the middle point `B` acting as the control point for the generated curves.

```JavaScript
false; var B = {x: 100, y: 50}; var tvalues = [0.2, 0.3, 0.4, 0.5]; var curves = tvalues.map(t => Bezier.quadraticFromPoints({x:150, y: 40}, B, {x:35, y:160}, t)); var draw = function() { var offset = {x:45,y:30}; curves.forEach((b,i) => { this.drawSkeleton(b, offset, true); this.setColor("rgba(0,0,0,0.2)"); this.drawCircle(b.points[1], 3, offset); this.drawText("t=" + tvalues[i], { x: b.points[1].x + offset.x - 15, y: b.points[1].y + offset.y - 10, }); this.setRandomColor(); this.drawCurve(b, offset); }); this.setColor("black"); this.drawCircle(curves[0].points[0], 3, offset); this.drawCircle(curves[0].points[2], 3, offset); this.drawCircle(B, 3, offset); }
```

--------------------------------

### Requiring Bezier.js in Node.js (CommonJS)

Source: https://github.com/pomax/bezierjs/blob/master/README.md

This snippet illustrates how to load the Bezier.js library using the legacy CommonJS `require` syntax in a Node.js environment. It provides the basic pattern for obtaining the `Bezier` constructor and subsequently creating a new Bezier object.

```JavaScript
const Bezier = require("bezier-js");

const b = new Bezier(...);
```

--------------------------------

### Offsetting a Quadratic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates offsetting a quadratic Bezier curve. It initializes a curve, draws its skeleton and the curve itself, then offsets the curve by 25 units and draws the resulting segments. It also draws a single point offset at t=0.5 by 25 units.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.offset(25).forEach(c => this.drawCurve(c)); this.drawPoint(curve.offset(0.5,25)); }
```

--------------------------------

### Approximating a Quadratic Bezier Curve with Arcs in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates approximating a quadratic Bezier curve as a sequence of circular arcs. It initializes a curve, draws its skeleton, then retrieves the approximating arcs and draws each one with a random fill.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); var arcs = curve.arcs(); this.setColor("black"); arcs.forEach(arc => { this.setRandomFill(0.1); this.drawArc(arc); }); }
```

--------------------------------

### Offsetting a Cubic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates offsetting a cubic Bezier curve. It initializes a curve, draws its skeleton and the curve itself, then offsets the curve by 25 units and draws the resulting segments. It also draws a single point offset at t=0.5 by 25 units.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 145,179); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); curve.offset(25).forEach(c => this.drawCurve(c)); this.drawPoint(curve.offset(0.5,25)); }
```

--------------------------------

### Approximating a Cubic Bezier Curve with Arcs in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates approximating a cubic Bezier curve as a sequence of circular arcs. It initializes a curve, draws its skeleton, then retrieves the approximating arcs and draws each one with a random fill.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); var arcs = curve.arcs(); this.setColor("black"); arcs.forEach(arc => { this.setRandomFill(0.1); this.drawArc(arc); }); }
```

--------------------------------

### Scaling a Reduced Quadratic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates scaling a quadratic Bezier curve. It first reduces the curve into simple segments, then iterates through a range of scale factors (-30 to 30) and draws scaled versions of the middle reduced segment. This highlights the `scale()` method's dependency on 'simple' curve segments.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.setColor("black"); var reduced = curve.reduce(), len = reduced.length; if(len>0) { reduced.forEach((c,i) => { if(i>0) this.drawCircle(c.points\[0\],3); this.drawCurve(c); }); for(var i=-30; i<=30; i+=10) { this.drawCurve(reduced\[(len/2)|0\].scale(i)); } } else { this.drawCurve(curve); } }
```

--------------------------------

### Creating Cubic Bezier from Points

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet illustrates `Bezier.cubicFromPoints`, which creates cubic Bezier curves that pass through three given points. Multiple curves are generated by varying the `t` parameter, demonstrating how the intermediate control points are derived to ensure the curve passes through `B`.

```JavaScript
false; var p1 = {x:110, y: 50}, B = {x: 50, y: 80}, p3 = {x:135, y: 100}; var tvalues = [0.2, 0.3, 0.4, 0.5]; var curves = tvalues.map(t => Bezier.cubicFromPoints(p1, B, p3, t)); var draw = function() { var offset = {x:0,y:0}; curves.forEach((b,i) => { this.setRandomColor(); this.drawCurve(b, offset); }); this.setColor("black"); this.drawCircle(curves[0].points[0], 3, offset); this.drawCircle(curves[0].points[3], 3, offset); this.drawCircle(B, 3, offset); }
```

--------------------------------

### Splitting a Bezier Curve with Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet illustrates how to split a Bezier curve into a sub-curve using `curve.split(t1, t2)`. When two `t` values are provided, it extracts the segment of the curve between `t1` and `t2`, returning a new Bezier curve. The original curve is shown in light grey, and the extracted segment in red.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.setColor("lightgrey"); this.drawCurve(curve); var c = curve.split(0.25, 0.75); this.setColor("red"); this.drawCurve(c); this.drawCircle(curve.get(0.25),3); this.drawCircle(curve.get(0.75),3); }
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.setColor("lightgrey"); this.drawCurve(curve); var c = curve.split(0.25, 0.75); this.setColor("red"); this.drawCurve(c); this.drawCircle(curve.get(0.25),3); this.drawCircle(curve.get(0.75),3); }
```

--------------------------------

### Calculating Curve Length and Offset in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates how to calculate the length of a Bezier curve using `curve.length()` and generate offset curves using `curve.offset()`. It also shows how to draw the offset curves and display the total arclength. The `offset` method creates a new curve parallel to the original.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var arclength = curve.length(); var offset = curve.offset(-10), last=offset.length-1; offset.forEach((c,idx) => { this.drawCurve(c); if(idx===last) { var p1 = curve.offset(0.95, -15); var p2 = c.get(1); var p3 = curve.offset(0.95, -5); this.drawLine(p1,p2); this.drawLine(p2,p3); var label = ((100*arclength)|0)/100 + "px"; this.drawText(label, {x:p2.x+7,y:p2.y-3}); } }); }
```

```JavaScript
new Bezier(100, 25, 10, 90, 110, 100, 132, 192 ); var draw = function() { this.drawSkeleton(curve); this.drawCurve(curve); this.setColor("red"); var arclength = curve.length(); var offset = curve.offset(-10), last=offset.length-1; offset.forEach((c,idx) => { this.drawCurve(c); if(idx===last) { var p1 = curve.offset(0.95, -15); var p2 = c.get(1); var p3 = curve.offset(0.95, -5); this.drawLine(p1,p2); this.drawLine(p2,p3); var label = ((100*arclength)|0)/100 + "px"; this.drawText(label, {x:p2.x+7,y:p2.y-3}); } }); }
```

--------------------------------

### Scaling a Reduced Cubic Bezier Curve in Bezier.js

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

This snippet demonstrates scaling a cubic Bezier curve. It first reduces the curve into simple segments, then iterates through a range of scale factors (-30 to 30) and draws scaled versions of the middle reduced segment. This highlights the `scale()` method's dependency on 'simple' curve segments.

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195); var draw = function() { this.drawSkeleton(curve); this.setColor("black"); var reduced = curve.reduce(), len = reduced.length; if(len>0) { reduced.forEach((c,i) => { if(i>0) this.drawCircle(c.points\[0\],3); this.drawCurve(c); }); for(var i=-30; i<=30; i+=10) { this.drawCurve(reduced\[(len/2)|0\].scale(i)); } } else { this.drawCurve(curve); } }
```

--------------------------------

### Projecting Points onto Curve with Bezier.js - JavaScript

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

Finds the point on the curve closest to a specified off-curve point. It uses a two-pass projection test based on the curve's Look-Up Table (LUT) to find an initial closest match, followed by a fine interval check for a more precise projection.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150);
var draw = function(evt) {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  if (evt) {
    var mouse = {x: evt.offsetX, y: evt.offsetY};
    var p = curve.project(mouse);
    this.drawLine(p,mouse);
  }
}
```

```JavaScript
new Bezier(100,25 , 10,90 , 50,185 , 170,175);
var draw = function(evt) {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  if (evt) {
    var mouse = {x: evt.offsetX, y: evt.offsetY};
    var p = curve.project(mouse);
    this.drawLine(p,mouse);
  }
}
```

--------------------------------

### Calculating Curve Curvature with Bezier.js - JavaScript

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

Calculates the curvature of the curve at a specific point 't' using the provided curvature formula. It returns an object containing 'k' (the curvature) and 'r' (the radius of curvature, equal to 1/k). An infinite curvature (k=0) is represented with r=0.

```JavaScript
new Bezier(120,40 , 50,30 , 75,150);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  for(var s=0; s<256; s+=2) {
    this.setColor("rgba(255,127,"+s+",0.6)");
    let t = s/255;
    let p = curve.get(t);
    let n = curve.normal(t);
    let kr = curve.curvature(t);
    this.drawLine(p, {
      x: p.x + n.x * kr.k * 5000,
      y: p.y + n.y * kr.k * 5000
    });
  }
}
```

```JavaScript
new Bezier(110,15 , 10,40 , 100,130 , 90,195);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  for(var s=0; s<256; s+=2) {
    this.setColor("rgba(255,127,"+s+",0.6)");
    let t = s/255;
    let p = curve.get(t);
    let n = curve.normal(t);
    let kr = curve.curvature(t);
    this.drawLine(p, {
      x: p.x + n.x * kr.k * 5000,
      y: p.y + n.y * kr.k * 5000
    });
  }
}
```

--------------------------------

### Calculating Bounding Box with Bezier.js - JavaScript

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

Calculates the axis-aligned bounding box for the curve. This calculation is based on the curve's hull coordinates and its extrema, and the result may be cached for performance.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  this.drawbbox(curve.bbox());
}
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  this.drawbbox(curve.bbox());
}
```

--------------------------------

### Generating Hull Points with Bezier.js - JavaScript

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

Generates all hull points at all iterations for a given 't' value on the curve. The number of points generated depends on whether the curve is quadratic (6 points) or cubic (10 points), representing the successive de Casteljau iterations.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  var hull = curve.hull(0.5);
  this.drawHull(hull);
  this.drawCircle(hull.slice(-1)[0], 5);
}
```

```JavaScript
new Bezier(100,25 , 10,90 , 50,185 , 170,175);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("rgb(255,100,100)");
  var hull = curve.hull(0.5);
  this.drawHull(hull);
  this.drawCircle(hull.slice(-1)[0], 5);
}
```

--------------------------------

### Finding Inflection Points with Bezier.js - JavaScript

Source: https://github.com/pomax/bezierjs/blob/master/docs/index.html

Calculates all inflection points on a curve, which are points where the curvature changes sign. This method returns an array of 't' values where inflections occur. Note that quadratic curves inherently do not have inflection points.

```JavaScript
new Bezier(150,40 , 80,30 , 105,150);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("red");
  curve.inflections().forEach(t => this.drawCircle(curve.get(t),3));
}
```

```JavaScript
new Bezier(100,25 , 10,90 , 110,100 , 150,195);
var draw = function() {
  this.drawSkeleton(curve);
  this.drawCurve(curve);
  this.setColor("red");
  curve.inflections().forEach(t => this.drawCircle(curve.get(t),3));
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.