Instantly share code, notes, and snippets.

# Balint Morvai balint42

Last active April 30, 2022 03:13
Javascript De Casteljau's algorithm splitting n-th degree Bezier curve

# De Casteljau's algorithm

De Casteljau's algorithm for splitting n-th degree Bezier curves. Control points can be 1 or 2 dimensional, thus x only or [x, y] vectors. Does not return the values of a Bezier curve at a given point, but rather the correct new control points of the resulting partial curves, if the Bezier curve is split in two curves at the given point. This allows for animated drawing of Bezier curves as well: simply split at the point up to which you want to draw and only draw the first resulting curve, repeat on every animation frame while advancing the split point.

But beyond the well known "animated drawing of Bezier curves" scenario, this code also serves cases where you just want to have the control points of the split curves, not curve values. The whole thing is not optimized for speed but readability. See it here!

Last active March 28, 2021 20:16
parse svg path javascript function

# JS function for parsing SVG paths

Parse an svg path object and generate an Array of path commands. Each command is an Array of the form `[command, arg1, arg2, ...]` NOTE: parsing is done via `pathSegList` which is faster and more reliable than parsing the path string directly, but might not work in old browsers.

Last active January 14, 2023 01:49
reflect point on line javascript function

# Reflect point along line

Javascript function to reflect point `p` along line through points `p0` and `p1`. Expects three point objects of the type `{ x: number1, y: number2 }` as input and returns the first point `p` reflected on `p0` and `p1` as output.

Last active August 29, 2015 14:13
convert SVG ellipse parameters javascript function

# Convert SVG ellipse parameters

Javascript function for converting the parameters that come with an SVG elliptic arc, namely the starting point `ps`, the end point `pe`, the horizontal radius `rh`, the vertical radius `rv`, the rotation in degree `rot`, the large arc flag `fa`, the sweep flag `fs`. These are converted to the ellipse center point `pc` and a point containing the elliptic arc start and end rotations in degrees, `phi1` and `phi2`. Thus the function returns an array with two points. The term `point` always refers to a JS object of the type `{x:number1, y:number2}`.

More precisely this code is the rough (some input checking rules are ignored) implementation of this standard.

Last active May 17, 2016 23:04 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Last active May 17, 2016 23:03 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski's beautiful work on Circos.

Last active May 17, 2016 23:03 — forked from mbostock/.block

D3 example cartoonized with comic.js.

Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Last active May 17, 2016 23:02 — forked from mbostock/.block

D3 example cartoonized with comic.js.

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.