Fred Hohman fredhohman

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:

People

Download source code from Overleaf if you use it: menu -> download -> source.
Strip comments and combine all tex files (f01-main.tex, f02-intro.tex, etc.) into one file arxiv_main.tex.

# Replace f01-main.tex with the main tex file in your overleaf project
latexpand --empty-comments f01-main.tex > arxiv_main.tex


	from PIL import Image, ImageDraw
	import argparse
	import sys

	def get_colors(image_file, numcolors=10, resize=150):
	# Resize image to speed up processing
	img = Image.open(image_file)
	img = img.copy()
	img.thumbnail((resize, resize))

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Holy Grail</title>
	<style>
	/* some basic styles. nothing to do with flexbox */
	header, footer,
	nav, article, aside {
	border: 1px solid black;

	#!/usr/bin/env python
	import sys,os
	import time
	import argparse

	import matplotlib as mpl
	mpl.use('Agg')
	import matplotlib.pyplot as plt

	import numpy as np

	<div class="video-item">
	<iframe id="video0" src="//www.youtube.com/embed/4DMGfbje7NY?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
	<button class="play">Play</button>
	<button class="stop">Stop</button>
	</div>

	<div class="video-item">
	<iframe id="video1" src="//www.youtube.com/embed/nJl-qVoEEJI?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
	<button class="play">Play</button>
	<button class="stop">Stop</button>

	<script>
	import { value, count } from './stores';

	let localValue = $value;
	</script>

	<style>
	h1 {
	color: purple;
	}