Skip to content

Instantly share code, notes, and snippets.

@baptistebriel
Forked from mattdesl/modules.md
Last active September 18, 2021 09:18
Show Gist options
  • Save baptistebriel/573ea96e20e56157448b to your computer and use it in GitHub Desktop.
Save baptistebriel/573ea96e20e56157448b to your computer and use it in GitHub Desktop.

mostly in the realm of creative coding and graphics programming

lots of these are my own :)

mouse/touch events

https://www.npmjs.org/package/wheel
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/clickdrag (for clicking & drag outside of an element)
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

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)

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

dom / CSS

https://www.npmjs.org/package/remove-element
https://www.npmjs.org/package/element-size
https://www.npmjs.org/package/select-box (<select> abstraction)
https://www.npmjs.org/package/parse-unit
https://github.com/npm-dom (lots of DOM modules)

timing

https://www.npmjs.org/package/right-now
https://www.npmjs.org/package/frame-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/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/6to5 (a good ES6 transpiler)

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)

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment