Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active August 16, 2022 10:14
Show Gist options
  • Star 52 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save mattdesl/73e3b9f902f9c834b721 to your computer and use it in GitHub Desktop.
Save mattdesl/73e3b9f902f9c834b721 to your computer and use it in GitHub Desktop.
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