raphaelameaume

function syncProps(props) {
	return Object.keys(props).reduce((all, key) => {
		const prop = { ...props[key] };

		const storageKey = `${key}`;

		const { onChange = () => {} } = prop;

		prop.onChange = (prop) => {
			localStorage.setItem(storageKey, JSON.stringify(prop.value));

raphaelameaume

• Change extension

ffmpeg  -i input.MOV -c copy  output.mp4

• Add black borders to video

ffmpeg -i input.mp4 -vf "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2,setsar=1" output.mp4

raphaelameaume

float mapRange(float value, float low1, float high1, float low2, float high2) {
    return low2 + (value - low1) * (high2 - low2) / (high1 - low1);
}

raphaelameaume

vec2 uvRotate (vec2 baseUv, float angle, vec2 center) {
    vec2 uv = baseUv;
    uv -= center;

    mat2 m = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
    uv = m * uv;

    uv += center;

    return uv;

raphaelameaume

vec2 uvContain(vec2 baseUv, vec2 size, vec2 resolution) {
    float tAspect = size.x / size.y;
    float pAspect = resolution.x / resolution.y;
    float pWidth = resolution.x;
    float pHeight = resolution.y;

    float width = 0.;
    float height = 0.;

    if ( tAspect < pAspect ) {

raphaelameaume

vec2 uvCover (vec2 uv, vec2 size, vec2 resolution) {
    vec2 coverUv = uv;
    vec2 s = resolution; // Screen
    vec2 i = size; // Image

    float rs = s.x / s.y;
    float ri = i.x / i.y;
    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
    

raphaelameaume

vec2 uvScale (vec2 baseUv, float scale) {
    vec2 uv = baseUv;

    float s = 1. / scale;
    uv = uv * s - ( s - 1.) * 0.5;

    return uv;
}

vec2 uvScale (vec2 baseUv, vec2 scale) {