Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
my favourite modules.

mostly in the realm of creative coding and graphics programming

lots of these are my own :)

tooling

https://www.npmjs.org/package/wzrd (browserify dev server)
https://www.npmjs.org/package/budo (like wzrd but with incremental watching & LiveReload)
https://www.npmjs.org/package/beefy (more fully-featured dev server)

mouse/touch events

https://www.npmjs.org/package/mouse-wheel
https://www.npmjs.org/package/mouse-event
https://www.npmjs.com/package/mouse-change
https://www.npmjs.org/package/scroll-speed
https://www.npmjs.org/package/mouse-position (useful for delta)
https://www.npmjs.org/package/touch-position (same idea, but for unified mouse/touch)
https://www.npmjs.org/package/touches (ideal for drag events)
https://www.npmjs.org/package/touch-scroll-physics
https://www.npmjs.org/package/mouse-event-offset (get relative offset of mouse event)

key events

https://www.npmjs.org/package/key-pressed
https://www.npmjs.org/package/keycode
https://www.npmjs.org/package/is-undo-redo

svg

https://www.npmjs.org/package/svg-node (creates SVG node)
https://www.npmjs.org/package/parse-svg-path (parses SVG into commands)
https://www.npmjs.org/package/abs-svg-path (make all path commands absolute)
https://www.npmjs.org/package/normalize-svg-path (normalize to curves)
https://www.npmjs.org/package/svg-path-contours (get 2D points)
https://www.npmjs.org/package/svg-line-curved

2D / paths

https://www.npmjs.org/package/delaunay-triangulate (triangulates 2D/3D points)
https://www.npmjs.org/package/simplify-path
https://www.npmjs.org/package/chaikin-smooth (smooth a polyline)
https://www.npmjs.org/package/adaptive-bezier-curve (approximate curve into discrete 2D points)
https://www.npmjs.org/package/adaptive-quadratic-curve (approximate curve into discrete 2D points)
https://www.npmjs.org/package/triangulate-contours
https://www.npmjs.com/package/is-clockwise (quick orientation check for polygons)
https://www.npmjs.com/package/arc-to (like canvas arc() but with 2D points)
https://www.npmjs.com/package/polyline-normals (for computing polyline normals / extrusion)
https://www.npmjs.com/package/draw-triangles-2d (draws a simplicial complex)

math

https://www.npmjs.org/package/vectors (N-dimensional vector utils)
https://www.npmjs.org/package/clamp
https://www.npmjs.org/package/smoothstep
https://www.npmjs.org/package/eases (grab-bag of easing equations)
https://www.npmjs.org/package/randf (random float between range)
https://www.npmjs.org/package/rnd (random integer between range)
https://www.npmjs.org/package/lerp (linear inteprolation)
https://www.npmjs.org/package/unlerp (normalized range between two values)
https://www.npmjs.org/package/bezier (n-degree bezier interpolation)
https://www.npmjs.org/package/lerp-array (linear interpolation on parallel arrays/vectors)
gl-vec2, gl-mat4, etc (from gl-matrix)
https://www.npmjs.com/package/mat4-interpolate (interpolates two matrices as per W3C spec)
https://www.npmjs.com/package/quat-slerp (quaternion spherical interpolation)

physics

https://www.npmjs.org/package/verlet-system

color

https://www.npmjs.org/package/color-style (convert [r,g,b,a] to CSS string)
https://www.npmjs.org/package/color-convert
https://www.npmjs.org/package/color-string (convert CSS string to [r,g,b,a])
https://www.npmjs.org/package/color-luminance (useful for grayscale)

image processing

https://www.npmjs.org/package/get-rgba-palette (gets color palette from RGBA image)
https://www.npmjs.org/package/stackblur (similar to gaussian blur)
https://www.npmjs.org/package/get-image-pixels
https://www.npmjs.org/package/canvas-pixels
https://www.npmjs.org/package/ndarray

collision

https://www.npmjs.org/package/point-circle-collision
https://www.npmjs.org/package/line-circle-collision
https://www.npmjs.org/package/triangle-circle-collision
https://www.npmjs.org/package/point-in-polygon
https://www.npmjs.org/package/point-in-triangle
https://www.npmjs.org/package/robust-point-in-polygon

canvas

https://www.npmjs.org/package/canvas-autoscale
https://www.npmjs.org/package/canvas-fit
https://www.npmjs.org/package/webgl-context (tiny util to create a webgl context)
https://www.npmjs.org/package/2d-context (same API, but for 2D context) https://www.npmjs.org/package/canvas-loop

dom / CSS

https://www.npmjs.org/package/remove-element
https://www.npmjs.org/package/element-size
https://www.npmjs.org/package/dom-css (styling elements)
https://www.npmjs.org/package/dom-css-transform
https://www.npmjs.org/package/select-box (<select> abstraction)
https://www.npmjs.com/package/css-mat4 (make a 4x4 matrix using W3C transforms spec)
https://www.npmjs.com/package/prefix-style (get a vendor prefix for a specific style name)
https://github.com/npm-dom (lots of DOM modules)

timing

https://www.npmjs.org/package/right-now
https://www.npmjs.org/package/raf-loop
https://www.npmjs.org/package/frame-loop
https://www.npmjs.org/package/raf-loop

animation

https://www.npmjs.org/package/gsap (TweenMax)
https://www.npmjs.org/package/eases (grab-bag of easing equations) https://www.npmjs.org/package/tweenr (small tween engine) https://www.npmjs.org/package/keytime (generic keyframe utility)
https://www.npmjs.org/package/gsap-promise (Bluebird Promise wrapper for TweenMax)

misc utils

https://www.npmjs.org/package/array-range (create an array with given range)
https://www.npmjs.org/package/xtend
https://www.npmjs.org/package/indexof-property
https://www.npmjs.org/package/bluebird (a good Promise implementation)
https://www.npmjs.org/package/babel (a good ES6 transpiler)
https://www.npmjs.com/package/xhr (small XHR abstraction)
https://www.npmjs.com/package/load-json-xhr (loads a JSON with XHR)

unit testing

https://www.npmjs.org/package/tape
https://www.npmjs.org/package/baboon-image-uri (for tests involving Images)
https://www.npmjs.org/package/baboon (especially for GL tests involving images)
https://www.npmjs.org/package/gl-shader-output (useful for testing GLSL output)

sound / web audio

https://www.npmjs.org/package/soundbank
https://www.npmjs.org/package/play-audio

webgl

the stack.gl modules and ecosystem (glsl- or gl- prefixes)
https://github.com/mattdesl/image-sdf (a CLI tool to generate SDFs from images)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.