Yi Shen pissang

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

	/jslint plusplus: true, vars: true, indent: 2 /

	/*
	convertPointFromPageToNode(element, event.pageX, event.pageY) -> {x, y}
	returns coordinate in element's local coordinate system (works properly with css transforms without perspective projection)

	convertPointFromNodeToPage(element, offsetX, offsetY) -> {x, y}
	returns coordinate in window's coordinate system (works properly with css transforms without perspective projection)
	*/

	<!doctype html>
	<html>
	<head>
	<title>Resolution independent rendering of Bezier curves in WebGL</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script src="glMatrix-0.9.6.min.js"></script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	attribute vec2 aBezierCoord;

	/**
	* An implementation for Quicksort. Doesn't
	* perform as well as the native Array.sort
	* and also runs the risk of a stack overflow
	*
	* Tests with:
	*
	* var array = [];
	* for(var i = 0; i < 20; i++) {
	* array.push(Math.round(Math.random() * 100));

	var stringify = function(obj, prop) {
	var placeholder = '____PLACEHOLDER____';
	var fns = [];
	var json = JSON.stringify(obj, function(key, value) {
	if (typeof value === 'function') {
	fns.push(value);
	return placeholder;
	}
	return value;
	}, 2);

	// test if js engine's Array#sort implementation is stable
	var str = "abcdefghijklmnopqrstuvwxyz";
	str.split("").sort(function(a,b) {
	return ~~(str.indexOf(b)/2.3) - ~~(str.indexOf(a)/2.3);
	}).join("") == "xyzvwtursopqmnklhijfgdeabc";

	// total number of samples at each fragment
	#define NUM_SAMPLES {{ numSamples }}

	#define NUM_SPIRAL_TURNS {{ numSpiralTurns }}

	#define USE_ACTUAL_NORMALS {{ useActualNormals }}

	#define VARIATION {{ variation }}

	uniform sampler2D sGBuffer;

	<!doctype html>
	<html>
	<title>Flatten.js, General SVG Flattener</title>

	<head>
	<script>
	/*
	Random path and shape generator, flattener test base: https://jsfiddle.net/fjm9423q/embedded/result/
	Basic usage example: https://jsfiddle.net/nrjvmqur/embedded/result/