Skip to content

Instantly share code, notes, and snippets.

View mauriciomassaia's full-sized avatar

Mauricio Massaia mauriciomassaia

View GitHub Profile
const size = 512
const size2 = size / 2
const c = document.createElement('canvas')
c.width = size
c.height = size
document.body.appendChild(c)
const ctx = c.getContext('2d')
ctx.fillStyle = '#ff0000'
ctx.fillRect(0, 0, size, size)
@mauriciomassaia
mauriciomassaia / rename-exported.js
Created August 29, 2019 01:54
Move and Rename files exported from Adobe Media Encoder
const fs = require('fs')
const path = require('path')
const dir = path.join(__dirname, 'exported')
const files = fs.readdirSync(dir)
console.log(files)
files.forEach(file => {
@mauriciomassaia
mauriciomassaia / convert-webm.sh
Created August 29, 2019 01:55
Convert mp4 to webm videos
#!/bin/bash
VIDEOS=/Users/mm/videos/exported/
find "$VIDEOS" -name '*.mp4' -exec sh -c 'ffmpeg -i "$0" -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis "${0%%.mp4}.webm"' {} \;
exit;
@mauriciomassaia
mauriciomassaia / .editorconfig
Created September 10, 2019 01:53
EditorConfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
@mauriciomassaia
mauriciomassaia / wall-mapping.frag
Created January 30, 2020 21:39
PixiJS - Fragment to add a gap and also a mask in projection with 3 walls of 1920x1200 each.
// 3 walls using each a 1920x1200 projector in a row but wall1 and wall2 collided as per projector physical placement
// so need to have a gap, as wall2 only uses 1866px so from x: 1920 (end wall1) to x:1974 (beginning wall2) we need
// to shift all pixels by 54px
// Also discard all pixels that cover the pillar area where another projector will be used with a cone mapping to play
// content on loop.
precision mediump float;
// supplied by pixijs
varying vec2 vTextureCoord;
@mauriciomassaia
mauriciomassaia / spritesheet-manager.js
Created February 6, 2020 23:42
Spritesheet Manager for Pixi.js
import { Loader, Spritesheet } from 'pixi.js'
const ssMap = new Map()
function parseMiddleware (resource, next) {
if (ssMap.has(resource.name)) {
const { baseTexture } = resource.texture
const item = ssMap.get(resource.name)
item.spritesheet = new Spritesheet(baseTexture, item.data)
item.spritesheet.parse(() => {
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
@mauriciomassaia
mauriciomassaia / git-release.md
Last active November 15, 2021 23:37
Git Release

Create a new branch from development:

git checkout -b release/[new version here]

git checkout -b release/1.0.0

tip: run cat package.json| grep version to check the current version before creating the release branch.

Then bump the version [ major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id> ]

@mauriciomassaia
mauriciomassaia / squoosh-process-images.js
Last active March 10, 2022 23:00
Using squoosh to optimise and resize images from a source folder to an output folder and keeps the same filename.
const { ImagePool } = require('@squoosh/lib')
const path = require('path')
const fs = require('fs-extra')
const srcFolder = path.join(__dirname, 'big')
const files = fs.readdirSync(srcFolder)
const outputFolder = path.join(__dirname, 'output')
fs.ensureDir(outputFolder)
fs.emptyDirSync(outputFolder)
@mauriciomassaia
mauriciomassaia / loadSVG.ts
Created August 12, 2021 22:57
Load SVG with Fetch + typescript
const parser = new DOMParser()
export const loadSVG = async (path: string): Promise<HTMLElement> => {
const response = await fetch(path)
const data = await response.text()
const svg = parser.parseFromString(data, 'image/svg+xml')
return svg.documentElement
}