Skip to content

Instantly share code, notes, and snippets.

@GothAck GothAck/sunrise.html
Created Dec 16, 2016

Embed
What would you like to do?
<html>
<body>
<script>
const EasingFunctions = {
// no easing, no acceleration
linear: function (t) { return t },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t) },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1 },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}
function setColor(r, g, b) {
console.log(document.body.bgColor = '#' +
([r, g, b].map(c => {
c = (~~c).toString(16);
if (c.length === 1) {
return '0' + c;
}
return c;
}).join('')));
}
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [ ~~(h * 65535), ~~(s * 255), ~~(l * 255) ];
}
function toXY(red,green,blue){
//Gamma correctie
red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92);
//Apply wide gamut conversion D65
var X = red * 0.664511 + green * 0.154324 + blue * 0.162028;
var Y = red * 0.283881 + green * 0.668433 + blue * 0.047685;
var Z = red * 0.000088 + green * 0.072310 + blue * 0.986039;
var fx = X / (X + Y + Z);
var fy = Y / (X + Y + Z);
if (isnan(fx)) {
fx = 0.0;
}
if (isnan(fy)) {
fy = 0.0;
}
return [fx.toPrecision(4),fy.toPrecision(4)];
}
function setColorHue(r, g, b) {
const [hue, sat, bri] = rgbToHsl(r, g, b);
node.send({
payload: {
xy: toXY(p/255, g/255, b/255),
colormode: 'xy',
}
});
}
const color = [0, 0, 0];
function doit(val, end, gran, ms, cb, done) {
if (gran > 0) {
const _cb = v => cb(Math.min(v, 1));
const _int = setInterval(() => {
_cb(val);
if ((val += gran) >= end) {
clearInterval(_int);
_cb(val);
done && done();
}
}, ms);
} else {
const _cb = v => cb(Math.max(v, 0));
const _int = setInterval(() => {
let t = val;
_cb(val);
if ((val += gran) <= end) {
clearInterval(_int);
_cb(val);
done && done();
}
}, ms);
}
}
const time = 100 / 2;
const red = [
[0, 1, 1/255, time / 2, EasingFunctions.easeInQuad],
[1, 0.5, -1/255, time * 2, EasingFunctions.easeInQuad],
[0.5, 0.9, 1/255, time, EasingFunctions.easeInQuad],
];
const green = [
[time * 100],
[0, 0.5, 1/255, time *.75, EasingFunctions.easeInQuad],
[0.5, 0.1, -1/255, time, EasingFunctions.easeInQuad],
[0.1, 1, 1/255, time / 2, EasingFunctions.easeInQuad],
]
const blue = [
[time * 100],
[0, 1, 1/255, time, EasingFunctions.easeInQuad],
]
function runColor(arr, i, done) {
arr = arr.slice();
function runNext() {
const args = arr.shift();
if (args.length === 1) {
return setTimeout(runNext, args[0]);
}
let [s, e, g, m, f] = args;
f = f || EasingFunctions.linear;
const cb = f ? (v => color[i] = 255 * f(v)) : () => {};
doit(s, e, g, m, cb, () => {
if (arr.length) {
runNext();
} else if (done) {
done();
}
});
}
runNext();
}
// doit(0, 1/255, 10, (v) => console.log(EasingFunctions.easeInQuad(v)));
setColor(0, 0, 0);
let done = 3
runColor(red, 0, () => done--);
runColor(green, 1, () => done--);
runColor(blue, 2, () => done--);
const start = Date.now();
const pageint = setInterval(() => {
setColor(...color);
if (!done) {
clearInterval(pageint);
console.log(Date.now() - start);
}
}, 10);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.