ayamflow

• img sequence to mp4

ffmpeg -framerate <fps> -pattern_type glob -i "*.jpg" -c:v libx264 -r 30 -pix_fmt yuv420p output.mp4 where 24 is the desired fps

• mov to mp4

ffmpeg -i input.mov -vcodec h264 -acodec mp2 output.mp4

• mp4 to gif

ayamflow

// Doesn't require pow()

// Not smoothed i.e. like a triangle function
float linearParabola(float x) {
    return 1.0 - abs(x * 2.0 - 1.0);
}

// Slightly smoothed, no math function
float parabola(float x) {
    return 4.0 * x * (1.0 - x);

ayamflow

1. Size components in px from mockup size

width: 300px;
height: 240px;

2. in resize, change component fontSize from default (16px) to ratio of "device size / mockup size")

el.style.fontSize = Math.min(width, height) / 360 * 16 + 'px'

ayamflow

// Need to toggle the autoClear flag to avoid breaking rendering to RenderTarget

function update(dt) {
  renderer.render(scene, camera);
  renderer.autoClear = false;
  renderer.clearDepth();
  renderer.render(orthoScene, orthoCamera);
  renderer.autoClear = true;
}

ayamflow

// There's always some fiddling because the GLTF exports a whole scene
// with root bone and skinned mesh already appended to it.

let gltf = loadedGltf;
let skinned;
gltf.scene.traverse(function(object) {
    if (object instanceof THREE.SkinnedMesh) {
        skinned = object;
    }
})

ayamflow

// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269

function visibleHeightAtDepth(depth, camera) {
    // compensate for cameras not positioned at z=0
    const cameraOffset = camera.position.z;
    if ( depth < cameraOffset ) depth -= cameraOffset;
    else depth += cameraOffset;
    // vertical fov in radians
    const vFOV = camera.fov * Math.PI / 180;
    // Math.abs to ensure the result is always positive

ayamflow

Object.defineProperties(THREE.Object3D.prototype, {
    x: {
        get: function() {
            return this.position.x
        },
        set: function(value) {
            this.position.x = value
        }
    },
    y: {

ayamflow

export default {
    facebook(url) {
        if (url.indexOf('http') < 0) {
            url = location.protocol + '//' + location.host + url;
        }

        window.open('http://www.facebook.com/dialog/feed?app_id=' + FACEBOOK_ID +
              '&link=' + SITE__URL +
              '&picture=' + url +
              '&name=' + encodeURIComponent('title') +

ayamflow

float levelChannel(float inPixel, float inBlack, float inGamma, float inWhite, float outBlack, float outWhite) {
    return (pow(((inPixel * 255.0) - inBlack) / (inWhite - inBlack), inGamma) * (outWhite - outBlack) + outBlack) / 255.0;
}

vec3 levels(vec3 inPixel, float inBlack, float inGamma, float inWhite, float outBlack, float outWhite) {
    vec3 o = vec3(1.0);
    o.r = levelChannel(inPixel.r, inBlack, inGamma, inWhite, outBlack, outWhite);
    o.g = levelChannel(inPixel.g, inBlack, inGamma, inWhite, outBlack, outWhite);
    o.b = levelChannel(inPixel.b, inBlack, inGamma, inWhite, outBlack, outWhite);
    return o;

ayamflow

font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;