bezierCubic

a cubic Bezier curve and returns both value and derivative.

110 total functionsUpdated: Invalid Date

bezierCubic

a cubic Bezier curve and returns both value and derivative.

Parameters

NameTypeDescription
tf32Parameter along the curve (0-1).
p0f32First control point.
p1f32Second control point.
p2f32Third control point.
p3f32Fourth control point.

Returns

vec2<f32>value and derivative (tangent).

WGSL Code

fn bezierCubic(t: f32, p0: f32, p1: f32, p2: f32, p3: f32) -> vec2<f32> {
// Clamp t to [0,1]
let tt = clamp(t, 0.0, 1.0);
// Calculate curve value using cubic Bezier formula
// P(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃
let t1 = 1.0 - tt;
let t1Squared = t1 * t1;
let t1Cubed = t1Squared * t1;
let tSquared = tt * tt;
let tCubed = tSquared * tt;
let value = t1Cubed * p0 +
3.0 * t1Squared * tt * p1 +
3.0 * t1 * tSquared * p2 +
tCubed * p3;
// Calculate derivative for tangent information
// P'(t) = 3(1-t)²(P₁-P₀) + 6(1-t)t(P₂-P₁) + 3t²(P₃-P₂)
let derivative = 3.0 * t1Squared * (p1 - p0) +
6.0 * t1 * tt * (p2 - p1) +
3.0 * tSquared * (p3 - p2);
return vec2<f32>(value, derivative);
}

About wgsl-fns

A JavaScript library providing WGSL utility functions as strings for WebGPU shader development. Includes mathematical utilities, noise generation, signed distance fields, and color manipulation functions.

Install:npm install wgsl-fns
Import:import { bezierCubic, getFns } from 'wgsl-fns'
Usage:getFns(['bezierCubic'])