Supah supahfunk

How to create an HTTPS certificate for localhost domains

This focuses on generating the certificates for loading local virtual hosts hosted on your computer, for development only.

Do not use self-signed certificates in production ! For online certificates, use Let's Encrypt instead (tutorial).

Introduction

This document contains some of the ffmpeg snippets I use most commonly, and typically in the context of converting research-related image data to video. It is not meant to be exhaustive.

Git Flow (with rebasing)

See http://nvie.com/posts/a-successful-git-branching-model/

Features

I added a few methods to three-orbit-controls to be able to manually define phi or theta and be able to rotate to a given point.

// rotation in Y
controls.setAzimuthalAngle(theta);

// rotation in X
controls.setPolarAngle(phi);

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	#!/bin/bash
	# https://developer.twitter.com/en/docs/twitter-api/v1/media/upload-media/uploading-media/media-best-practices
	# - h.264 high profile
	# - 60fps or less
	# - aac-lc, he-aac not supported
	# - 16:9 recommended
	# - 512mb maximum
	# - shorter than 140s
	# - 1:1 pixel aspect ratio
	# - yuv 4:2:0

	var cameraZ = camera.position.z;
	var planeZ = 5;
	var distance = cameraZ - planeZ;
	var aspect = viewWidth / viewHeight;
	var vFov = camera.fov * Math.PI / 180;
	var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
	var planeWidthAtDistance = planeHeightAtDistance * aspect;

	// or

	// fragment shader
	//
	// RGBA color to RGBA greyscale
	//
	// smooth transition based on u_colorFactor: 0.0 = original, 1.0 = greyscale
	//
	// http://www.johndcook.com/blog/2009/08/24/algorithms-convert-color-grayscale/
	// "The luminosity method is a more sophisticated version of the average method.
	// It also averages the values, but it forms a weighted average to account for human perception.
	// We’re more sensitive to green than other colors, so green is weighted most heavily. The formula

	/*
	* PixiJS Background Cover/Contain Script
	* Returns object
	* . {
	* container: PixiJS Container
	* . doResize: Resize callback
	* }
	* ARGS:
	* bgSize: Object with x and y representing the width and height of background. Example: {x:1280,y:720}
	* inputSprite: Pixi Sprite containing a loaded image or other asset. Make sure you preload assets into this sprite.

	float map(float value, float min1, float max1, float min2, float max2) {
	return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
	}