Animating SVGs With CSS Transforms

Necessary for hitting 60 FPS on mobile.

Clipping Magic

Instantly create masks, cutouts, and clipping paths.

View chunk-level diffs of PNG files

1. Download zlib and build it with ./configure and make.
2. Download pngcheck.
3. Make sure that the zlib directory is called zlib and is a sibling of of the pngcheck directory.
4. Build pngcheck with make -f Makefile.unx.
5. Put pngcheck somewhere in your path.
6. Create a pngdiff shell script somewhere in your path:

   #!/bin/bash
   
   LOCAL_FILE=`mktemp /tmp/pngdiff.local.XXXXXX` || exit 1
   pngcheck -v $1 > $LOCAL_FILE
   
   REMOTE_FILE=`mktemp /tmp/pngdiff.remote.XXXXXX` || exit 1
   pngcheck -v $2 > $REMOTE_FILE
   
   bbdiff --wait --resume $LOCAL_FILE $REMOTE_FILE

   (replacing bbdiff with your preferred text diffing tool)
7. Add the following lines to ~/.gitconfig:

   [difftool "pngdiff"]
     cmd = pngdiff "$REMOTE" "$LOCAL"

8. Run git difftool -t pngdiff to view diffs.

Relatedly, to view diffs of images in Preview.app (using the up/down arrows to toggle between the old and new versions), add this to ~/.gitconfig:

[difftool "imagediff"]
  cmd = open -n -W -a preview "$REMOTE" "$LOCAL"

Animated GIFs the Hard Way

GPU Accelerated Compositing in Chrome

Background and details on the implementation of hardware-accelerated compositing in Chrome.

Learning Modern 3D Graphics Programming

Vector Art in Photoshop

• Vector shapes in Photoshop CS6
• Helpful actions
• Aligning pasted vectors

Foundation Icons Fonts

Custom icon sets that are stored in a handy web font.

glfx.js

Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone.

Workshop / Chrome Experiments

• dat.GUI: A lightweight graphical user interface for changing variables in JavaScript. Rather than modify variables manually in your code, use dat.GUI to modify them during execution.
• three.js: A lightweight 3D engine. Three.js makes it easy to render graphics with canvas, svg, and WebGL.
• stats.js: A JavaScript performance widget. Stats.js adds a simple info box to your page displaying frames per second (FPS) or, with a mouse click, the milliseconds required to render the frame.

Glyphish

Icons for mobile apps

NounProject

The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language, so we may share them in a fun and meaningful way.

SceneJS - WebGL Scene Graph Library

SceneJS is an open source 3D engine for JavaScript which provides a JSON-based API for defining and manipulating 3D scenes on WebGL.

Perceptual Image Difference Utility

PerceptualDiff is an image comparison utility that makes use of a computational model of the human visual system to compare two images.

MaxSquare: a fast and simple algorithm for maximizing photo thumbnail sizes

MaxSquare is an algorithm which calculates the optimal grid size for a collection of n images such that each image is allocated the largest possible square cell.

Coded Exposure Photography (Flutter Shutter Deblur, SIGGRAPH 2006)

In a conventional single-exposure photograph, moving objects or moving cameras cause motion blur. The exposure time defines a temporal box filter that smears the moving object across the image by convolution. This box filter destroys important high-frequency spatial details so that deblurring via deconvolution becomes an ill-posed problem.

Rather than leaving the shutter open for the entire exposure duration, we "flutter'' the camera's shutter open and closed during the chosen exposure time with a binary pseudo-random sequence. The flutter changes the box filter to a broad-band filter that preserves high-frequency spatial details in the blurred image and the corresponding deconvolution becomes a well-posed problem. We demonstrate that manually-specified point spread functions are sufficient for several challenging cases of motion-blur removal including extremely large motions, textured backgrounds and partial occluders.