GothAck · December 16, 2016 20:46
diff --git a/sunrise.html b/sunrise.html
 <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>
	<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 ? 2tt : -1+(4-2t)t },
	// accelerating from zero velocity
	easeInCubic: function (t) { return ttt },
	// decelerating to zero velocity
	easeOutCubic: function (t) { return (--t)tt+1 },
	// acceleration until halfway, then deceleration
	easeInOutCubic: function (t) { return t<.5 ? 4ttt : (t-1)(2t-2)(2*t-2)+1 },
	// accelerating from zero velocity
	easeInQuart: function (t) { return ttt*t },
	// decelerating to zero velocity
	easeOutQuart: function (t) { return 1-(--t)tt*t },
	// acceleration until halfway, then deceleration
	easeInOutQuart: function (t) { return t<.5 ? 8tttt : 1-8(--t)ttt },
	// accelerating from zero velocity
	easeInQuint: function (t) { return ttttt },
	// decelerating to zero velocity
	easeOutQuint: function (t) { return 1+(--t)tttt },
	// acceleration until halfway, then deceleration
	easeInOutQuint: function (t) { return t<.5 ? 16ttttt : 1+16(--t)tttt }
	}

	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>