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:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Canvas Hexagonal Map</title> | |
<style type="text/css"> | |
canvas { | |
border:0; | |
display:block; | |
margin:0 auto; |
var parser = document.createElement('a'); | |
parser.href = "http://example.com:3000/pathname/?search=test#hash"; | |
parser.protocol; // => "http:" | |
parser.hostname; // => "example.com" | |
parser.port; // => "3000" | |
parser.pathname; // => "/pathname/" | |
parser.search; // => "?search=test" | |
parser.hash; // => "#hash" | |
parser.host; // => "example.com:3000" |
How to convert a video file to an animated GIF on Linux: | |
Install required software: | |
apt-get install ffmpeg gifsicle imagemagick: | |
Convert the video file to a series of small images: | |
mkdir /tmp/gif/ | |
ffmpeg -i YOURVIDEOFILE.mp4 -r 10 /tmp/gif/out%04d.gif | |
Combine these images together into a GIF animation: | |
gifsicle –delay=10 –loop /tmp/gif/*.gif > animation.gif | |
Optimise the GIF animation so the file size is smaller: |
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
float rand(float n){return fract(sin(n) * 43758.5453123);}
float noise(float p){
float fl = floor(p);
float fc = fract(p);
// takes a {} object and returns a FormData object | |
var objectToFormData = function(obj, form, namespace) { | |
var fd = form || new FormData(); | |
var formKey; | |
for(var property in obj) { | |
if(obj.hasOwnProperty(property)) { | |
if(namespace) { |
<!DOCTYPE html> | |
<html manifest=sketch.manifest> | |
<head> | |
<meta charset=utf-8> | |
<title>Sketch</title> | |
<meta name=apple-mobile-web-app-capable content=yes> | |
<meta name=apple-mobile-web-app-status-bar-style content=black> | |
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui"> | |
<link href="http://staticresource.com/formal.css" rel=stylesheet type=text/css> | |
<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♬♩♧♨♴♧♯♬♤♥♮♲♯♤♹♥♬♬♯♷☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧♲♥♤☧☻♣☮♬♩♮♥♗♩♤♴♨☽☳☰☻♣☮♬♩♮♥♃♡♰☽☧♲♯♵♮♤☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☴☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☴☵☬☱☳☰☬☷☰☬☲☰☰☬☱☰☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☱☰☵☬☱☳☰☬☱☴☰☬☵☰☬ |
/* | |
##Device = Desktops | |
##Screen = 1281px to higher resolution desktops | |
*/ | |
@media (min-width: 1281px) { | |
/* CSS */ | |
/** | |
* Run this with `babel-node generateSVG.js` | |
*/ | |
import fs from 'fs'; | |
import path from 'path'; | |
import { Readable } from 'stream'; | |
import childProcess from 'child_process'; | |
import phantomjs from 'phantomjs'; | |
import im from 'imagemagick'; | |
import tmp from 'tmp'; |
import React, {PropTypes} from 'react'; | |
import { debounce } from 'lodash'; | |
// A simple helper component, wrapping retina logic for canvas and | |
// auto-resizing the canvas to fill its parent container. | |
// To determine size/layout, we just use CSS on the div containing | |
// the Canvas component (we're using this with flexbox, for example). | |
// Expects a "paint" function that takes a "context" to draw on | |
// Whenever this component updates it will call this paint function | |
// to draw on the canvas. For convenience, pixel dimensions are stored |