Skip to content

Instantly share code, notes, and snippets.

@aereal
Last active May 18, 2018
Embed
What would you like to do?
'use strict';
(() => {
const hairImage = document.querySelector('#hairImage')
const faceImage = document.querySelector('#faceImage')
const canvas = document.querySelector('#resultCanvas')
const ctx = canvas.getContext('2d')
const updateCanvas = (filter) => {
ctx.drawImage(faceImage, 0, 0)
ctx.save()
ctx.filter = filter
ctx.globalCompositeOperation = 'overlay'
ctx.drawImage(hairImage, 0, 0)
ctx.restore()
}
const hueRotateContoller = document.querySelector('#hueRotateContoller')
const brightnessController = document.querySelector('#brightnessController')
const saturateController = document.querySelector('#saturateController')
const updateFilter = () => {
const filter = `
hue-rotate(${hueRotateContoller.value}deg)
brightness(${brightnessController.value})
saturate(${saturateController.value})
`
updateCanvas(filter)
}
const shake = (el, fps, increase, minValue, maxValue) => {
let startAt;
let value = minValue;
const shaker = (ts) => {
if (!startAt) startAt = ts;
const elapsed = ts - startAt;
if (elapsed > fps) {
value += increase;
if ((value >= maxValue) || value <= minValue) {
increase = -increase;
}
el.value = value;
updateFilter();
startAt = null;
}
window.requestAnimationFrame(shaker);
}
window.requestAnimationFrame(shaker);
};
shake(hueRotateContoller, 1000 / 60, 30, 0, 360);
shake(brightnessController, 1000 / 120, 0.25, 0, 8);
shake(saturateController, 1000 / 60, 0.05, 0, 4);
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment