Skip to content

jiwonMe/kirb

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

kirb 🎨

Modern modular Bezier curve library for 2D and 3D geometric operations

npm version License: MIT

✨ Features

  • 🎯 2D & 3D Support - Full support for 2D and 3D Bezier curves
  • πŸ“¦ Modular Architecture - 15 focused modules, all under 300 lines
  • πŸš€ Modern ESM - ES Module first with CommonJS support
  • πŸ”· TypeScript Support - Full type definitions included
  • πŸ”§ Comprehensive API - Everything you need for Bezier curve operations
  • πŸ“ Geometric Operations - Normals, curvatures, intersections, projections
  • 🎨 Offset & Outline - Generate parallel curves and outlines
  • ⚑ Fast & Lightweight - Only 22KB minified

πŸ“¦ Installation

npm install kirb
pnpm add kirb
yarn add kirb

πŸš€ Quick Start

JavaScript

import { Bezier } from 'kirb';

// Create a cubic Bezier curve
const curve = new Bezier(0, 0, 100, 25, 200, 75, 300, 100);

// Get a point at t=0.5
const point = curve.get(0.5);

// Get curve length
const length = curve.length();

// Split curve at t=0.5
const { left, right } = curve.split(0.5);

// Get curve normal at t=0.5
const normal = curve.normal(0.5);

// Find extrema
const extrema = curve.extrema();

// Get bounding box
const bbox = curve.bbox();

TypeScript

import { Bezier, KirbError, ErrorCodes, type Point, type BoundingBox } from 'kirb';

// Full type safety
const curve = new Bezier(0, 0, 100, 25, 200, 75, 300, 100);

// Type inference
const point: Point = curve.get(0.5);
const bbox: BoundingBox = curve.bbox();

// Error handling with types
try {
  curve.offsetPoint(2, 10);
} catch (e) {
  if (e instanceof KirbError) {
    console.log(e.code);     // Typed!
    console.log(e.details);  // Typed!
  }
}

πŸ†• New API Examples

// Clearer offset API
const offsetPt = curve.offsetPoint(0.5, 10);
console.log(offsetPt.point);    // { x, y }
console.log(offsetPt.normal);   // Normal vector
console.log(offsetPt.t);        // 0.5

const offsetCurves = curve.offsetCurve(10);  // Array of curves

// Better search
const result = curve.findParameter(point, { tolerance: 5 });
if (result) {
  console.log(result.t);        // Parameter value
  console.log(result.hits);     // Matching points
}

// Utility methods
const points = curve.sample(20);              // 20 evenly spaced points
const closest = curve.closestPoint(point);    // Closest point on curve
const info = curve.getInfo();                 // Curve metadata

// Check if point is on curve
if (curve.contains(point, { tolerance: 1 })) {
  console.log('Point is on curve!');
}

πŸ“š API Overview

Core Methods

  • get(t) - Get point at position t (0-1)
  • compute(t) - Compute point on curve
  • derivative(t) - Get first derivative
  • normal(t) - Get normal vector
  • length() - Calculate curve length
  • bbox() - Get bounding box
  • extrema() - Find extreme points

πŸ†• New & Improved Methods

Offset Operations (Clearer API)

  • offsetPoint(t, distance) - Get offset point at t ✨
  • offsetCurve(distance) - Create offset curve ✨
  • offset(t, d?) - Legacy method (still works)

Search & Analysis

  • findParameter(point, options) - Find parameter for point ✨
  • closestPoint(point) - Find closest point on curve ✨
  • contains(point, options) - Check if point is on curve ✨
  • on(point, error) - Legacy method (still works)

Utility Methods

  • sample(count) - Sample n points evenly ✨
  • getInfo() - Get curve metadata ✨

Geometric Operations

  • split(t1, t2) - Split curve into segments
  • outline(d1, d2) - Generate curve outline
  • project(point) - Project point onto curve
  • intersects(curve) - Find intersections

Curve Fitting

  • quadraticFromPoints(p1, p2, p3, t) - Fit quadratic curve
  • cubicFromPoints(S, B, E, t) - Fit cubic curve

Analysis

  • curvature(t) - Get curvature at t
  • inflections() - Find inflection points
  • arcs(threshold) - Approximate with circular arcs
  • reduce() - Reduce to simple segments

Error Handling

import { Bezier, KirbError, ErrorCodes } from 'kirb';

try {
  curve.offsetPoint(2, 10);  // Out of range!
} catch (e) {
  if (e instanceof KirbError) {
    console.log(e.code);      // 'OUT_OF_RANGE'
    console.log(e.details);   // { t: 2, validRange: [0, 1] }
  }
}

πŸ—οΈ Project Structure

src/
β”œβ”€β”€ bezier.js              # Main export
β”œβ”€β”€ utils.js               # Utility functions
β”œβ”€β”€ bezier/
β”‚   β”œβ”€β”€ core.js           # Core Bezier class
β”‚   β”œβ”€β”€ poly-bezier.js    # Multiple curves
β”‚   β”œβ”€β”€ lookup.js         # LUT and search
β”‚   β”œβ”€β”€ geometry.js       # Geometric operations
β”‚   β”œβ”€β”€ offset.js         # Offset & scaling
β”‚   β”œβ”€β”€ intersection.js   # Intersection detection
β”‚   └── arcs.js          # Arc approximation
└── utils/
    β”œβ”€β”€ constants.js      # Mathematical constants
    β”œβ”€β”€ compute.js        # Curve computation
    β”œβ”€β”€ geometry.js       # Geometric utilities
    β”œβ”€β”€ roots.js          # Root finding
    β”œβ”€β”€ intersection.js   # Intersection helpers
    └── shape.js         # Shape utilities

🎯 Use Cases

  • Graphics & Animation - SVG paths, canvas drawing, animations
  • Game Development - Smooth trajectories, camera paths
  • UI/UX - Custom easing, path morphing
  • CAD/CAM - Technical drawing, manufacturing
  • Data Visualization - Smooth curve interpolation

πŸ“– Documentation

For detailed documentation, visit the API Reference.

Based on the comprehensive Bezier Curve Primer.

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

πŸ“„ License

MIT Β© jiwonMe


Credits: Built on the foundations of bezier-js by Pomax, modernized with a modular architecture.

About

A nodejs and client-side library for (cubic) Bezier curve work

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%