Skip to content

Instantly share code, notes, and snippets.

View ZachSaucier's full-sized avatar
💻
I have a lot to be humble about.

Zach Saucier ZachSaucier

💻
I have a lot to be humble about.
279 followers · 1 following
View GitHub Profile
@scoaband
scoaband / 3d-particles-to-a-2d-canvas.markdown
Created December 13, 2018 18:26
3D particles to a 2D canvas

3D particles to a 2D canvas

HTML5 Canvas - Projecting 3D particles to a 2D canvas. from rectangleworld.com

added JQuery slider to resize

A Pen by borian on CodePen.

License.

@jonitrythall
jonitrythall / svg-pres-elementary.md
Last active March 2, 2020 22:47
A few notes and ideas for talking about SVG animations to elementary school students.

Quick Presentation: SVG Animations For Kids

A few notes and ideas for talking about SVG animations to elementary school students⁠—no one is too young to appreciate and get excited about this stuff while learning that it's a real career option later!

Talking Points

The goal for the speaking part of the presentation is to share a bit about what you do for work, introduce the basics of SVG and coding basic shapes, and talk about the impact of animations.

The Job

  • Tell them about what you do day-to-day and how you got started
  • What's your favorite part of the job?
  • What was your favorite subject in school?
@zadvorsky
zadvorsky / CameraStore.js
Created February 9, 2021 20:40
Store a THREE.js camera position and (Orbit) controls target between page refreshes. Handy if you're working on a scene and refreshing often.
/**
* Use the Web Storage API to save camera position and target between page refreshes.
*
* @param {Object} options
* @param {*} options.camera - The camera you want to store the position of.
* @param {*} [options.controls] - A controls object with a `.target` property.
* @param {String} [options.name="main"] - An optional label. Useful if you want to store multiple cameras.
* @param {Boolean} [options.session=true] - Indicates if you want to use local or session storage.
* See https://developer.mozilla.org/en-US/docs/Web/API/Storage
*/
@patriciogonzalezvivo
patriciogonzalezvivo / GLSL-Noise.md
Last active July 16, 2026 07:28
GLSL Noise Algorithms

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);
@paulirish
paulirish / what-forces-layout.md
Last active July 18, 2026 01:45
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent