Skip to content

Instantly share code, notes, and snippets.

View ggomaeng's full-sized avatar
🤖
beep boop

undefined ggomaeng

🤖
beep boop
597 followers · 64 following
View GitHub Profile
@zackthehuman
zackthehuman / hexagons.js
Created February 20, 2012 03:46
Drawing a hexagonal grid with HTML canvas
<!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;
@jlong
jlong / uri.js
Created April 20, 2012 13:29
URI Parsing with Javascript
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"
@dergachev
dergachev / GIF-Screencast-OSX.md
Last active June 5, 2024 22:16
OS X Screencast to animated GIF

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.

Screencapture GIF

Instructions

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

@tfogo
tfogo / howtogif
Created April 8, 2014 13:19
How to convert videos to gif using ffmpeg and gifsicle
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:
@patriciogonzalezvivo
patriciogonzalezvivo / GLSL-Noise.md
Last active June 19, 2024 12:26
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);
@ghinda
ghinda / object-to-form-data.js
Last active May 21, 2024 20:48
JavaScript Object to FormData, with support for nested objects, arrays and File objects. Includes Angular.js usage.
// 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) {
@tomhodgins
tomhodgins / sketch.html
Last active January 9, 2024 15:16
Draw <svg> inside the browser! On mousedown and touchstart it begins drawing a line, drops nodes as you mousemove or touchmove, and then finishes the line where you mouseup or touchend. It also has support for line width and color, exporting the current drawing by email as well as downloading the drawing as an svg file.You can also import SVGs. h…
<!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('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♬♩♧♨♴♧♯♬♤♥♮♲♯♤♹♥♬♬♯♷☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧♲♥♤☧☻♣☮♬♩♮♥♗♩♤♴♨☽☳☰☻♣☮♬♩♮♥♃♡♰☽☧♲♯♵♮♤☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☴☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☴☵☬☱☳☰☬☷☰☬☲☰☰☬☱☰☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☱☰☵☬☱☳☰☬☱☴☰☬☵☰☬
@gokulkrishh
gokulkrishh / media-query.css
Last active June 18, 2024 18:06
CSS Media Queries for Desktop, Tablet, Mobile.
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
/* CSS */
@tomazzaman
tomazzaman / generateSVG.js
Created January 16, 2016 19:33
Generate PNG from a React-powered SVG. Server-side.
/**
* 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';
@JobLeonard
JobLeonard / canvas.js
Last active July 29, 2023 01:44
A react component that wraps and autosizes a canvas element
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