Last active
September 12, 2016 02:26
-
-
Save pstuffa/c868860ad449c5d00121 to your computer and use it in GitHub Desktop.
Waves IV
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| canvas { | |
| position: absolute; | |
| } | |
| </style> | |
| <canvas id="canvas-back" width="960" height="500"></canvas> | |
| <canvas id="canvas-front" width="960" height="500"></canvas> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <script> | |
| /* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */ | |
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i}); | |
| /* https://github.com/d3/d3-color Copyright 2015 Mike Bostock */ | |
| "undefined"==typeof Map?(Map=function(){this.clear()},Map.prototype={set:function(t,e){return this._[t]=e,this},get:function(t){return this._[t]},has:function(t){return t in this._},"delete":function(t){return t in this._&&delete this._[t]},clear:function(){this._=Object.create(null)},get size(){var t=0;for(var e in this._)++t;return t},forEach:function(t){for(var e in this._)t(this._[e],e,this)}}):function(){var t=new Map;t.set(0,0)!==t&&(t=t.set,Map.prototype.set=function(){return t.apply(this,arguments),this})}(),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.color={})}(this,function(t){"use strict";function e(){}function s(t,e,s){this.r=Math.max(0,Math.min(255,Math.round(t))),this.g=Math.max(0,Math.min(255,Math.round(e))),this.b=Math.max(0,Math.min(255,Math.round(s)))}function n(t,e,s){return isNaN(t)&&(t=0),isNaN(e)&&(e=0),isNaN(s)&&(s=0),"#"+(16>t?"0"+t.toString(16):t.toString(16))+(16>e?"0"+e.toString(16):e.toString(16))+(16>s?"0"+s.toString(16):s.toString(16))}function r(t,n,r){return 1===arguments.length&&(t instanceof e||(t=l(t)),t?(t=t.rgb(),r=t.b,n=t.g,t=t.r):t=n=r=NaN),new s(t,n,r)}function i(t){return r(t>>16&255,t>>8&255,255&t)}function a(t,e,s){this.h=+t,this.s=Math.max(0,Math.min(1,+e)),this.l=Math.max(0,Math.min(1,+s))}function o(t,e,s){return 255*(60>t?e+(s-e)*t/60:180>t?s:240>t?e+(s-e)*(240-t)/60:e)}function h(t,s,n){if(1===arguments.length)if(t instanceof a)n=t.l,s=t.s,t=t.h;else if(t instanceof e||(t=l(t)),t){if(t instanceof a)return t;t=t.rgb();var r=t.r/255,i=t.g/255,o=t.b/255,h=Math.min(r,i,o),u=Math.max(r,i,o),c=u-h;n=(u+h)/2,c?(s=.5>n?c/(u+h):c/(2-u-h),t=r===u?(i-o)/c+6*(o>i):i===u?(o-r)/c+2:(r-i)/c+4,t*=60):(t=NaN,s=n>0&&1>n?0:t)}else t=s=n=NaN;return new a(t,s,n)}function l(t){var e;return t=(t+"").trim().toLowerCase(),(e=R.exec(t))?(e=parseInt(e[1],16),r(e>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e)):(e=E.exec(t))?i(parseInt(e[1],16)):(e=z.exec(t))?r(e[1],e[2],e[3]):(e=P.exec(t))?r(2.55*e[1],2.55*e[2],2.55*e[3]):(e=O.exec(t))?h(e[1],.01*e[2],.01*e[3]):L.has(t)?i(L.get(t)):null}function u(t,e,s){this.l=+t,this.a=+e,this.b=+s}function c(t){return 255*(.0031308>=t?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function g(t){return t>F?t*t*t:G*(t-D)}function f(t){return t>T?Math.pow(t,1/3):t/G+D}function d(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function p(t,e,s){this.h=+t,this.c=+e,this.l=+s}function b(t,e,n){if(1===arguments.length)if(t instanceof u)n=t.b,e=t.a,t=t.l;else if(t instanceof p){var i=t.h*U;n=Math.sin(i)*t.c,e=Math.cos(i)*t.c,t=t.l}else{t instanceof s||(t=r(t));var a=d(t.r),o=d(t.g),n=d(t.b),h=f((.4124564*a+.3575761*o+.1804375*n)/K),l=f((.2126729*a+.7151522*o+.072175*n)/Q),c=f((.0193339*a+.119192*o+.9503041*n)/J);n=200*(l-c),e=500*(h-l),t=116*l-16}return new u(t,e,n)}function N(t,e,s){return 1===arguments.length&&(t instanceof p?(s=t.l,e=t.c,t=t.h):(t instanceof u||(t=b(t)),s=t.l,e=Math.sqrt(t.a*t.a+t.b*t.b),t=Math.atan2(t.b,t.a)*W,0>t&&(t+=360))),new p(t,e,s)}function m(t,e,s){this.h=+t,this.s=+e,this.l=+s}function w(t,e,n){if(1===arguments.length)if(t instanceof m)n=t.l,e=t.s,t=t.h;else{t instanceof s||(t=r(t));var i=t.r/255,a=t.g/255,o=t.b/255;n=(at*o+it*i-rt*a)/(at+it-rt);var h=o-n,l=(Y*(a-n)-tt*h)/Z,u=Math.pow(n,nt);e=Math.sqrt(l*l+h*h)/(Y*u*(1-u)),t=e?Math.atan2(l,h)*W-120:NaN,0>t&&(t+=360)}return new m(t,e,n)}function y(t,e){t=w(t),e=w(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function v(t,e){var s=(t-e)%360;return s+(s>180?-360:-180>s?360:0)}function M(t,e){t=w(t),e=w(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function k(t,e){t=N(t),e=N(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}}function x(t,e){t=N(t),e=N(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.c)?e.c:t.c,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.c)?0:e.c-n,o=e.l-r;return function(e){return t.h=s+i*e,t.c=n+a*e,t.l=r+o*e,t+""}}function q(t,e){t=b(t),e=b(e);var s=t.l,n=t.a,r=t.b,i=e.l-s,a=e.a-n,o=e.b-r;return function(e){return t.l=s+i*e,t.a=n+a*e,t.b=r+o*e,t+""}}function _(t,e){t=h(t),e=h(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:e.h-s,a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function S(t,e){t=h(t),e=h(e);var s=isNaN(t.h)?e.h:t.h,n=isNaN(t.s)?e.s:t.s,r=t.l,i=isNaN(e.h)?0:v(e.h,s),a=isNaN(e.s)?0:e.s-n,o=e.l-r;return function(e){return t.h=s+i*e,t.s=n+a*e,t.l=r+o*e,t+""}}function j(t,e){t=r(t),e=r(e);var s=t.r,i=t.g,a=t.b,o=e.r-s,h=e.g-i,l=e.b-a;return function(t){return n(Math.round(s+o*t),Math.round(i+h*t),Math.round(a+l*t))}}e.prototype={toString:function(){return this.rgb()+""}};var L=(new Map).set("aliceblue",15792383).set("antiquewhite",16444375).set("aqua",65535).set("aquamarine",8388564).set("azure",15794175).set("beige",16119260).set("bisque",16770244).set("black",0).set("blanchedalmond",16772045).set("blue",255).set("blueviolet",9055202).set("brown",10824234).set("burlywood",14596231).set("cadetblue",6266528).set("chartreuse",8388352).set("chocolate",13789470).set("coral",16744272).set("cornflowerblue",6591981).set("cornsilk",16775388).set("crimson",14423100).set("cyan",65535).set("darkblue",139).set("darkcyan",35723).set("darkgoldenrod",12092939).set("darkgray",11119017).set("darkgreen",25600).set("darkgrey",11119017).set("darkkhaki",12433259).set("darkmagenta",9109643).set("darkolivegreen",5597999).set("darkorange",16747520).set("darkorchid",10040012).set("darkred",9109504).set("darksalmon",15308410).set("darkseagreen",9419919).set("darkslateblue",4734347).set("darkslategray",3100495).set("darkslategrey",3100495).set("darkturquoise",52945).set("darkviolet",9699539).set("deeppink",16716947).set("deepskyblue",49151).set("dimgray",6908265).set("dimgrey",6908265).set("dodgerblue",2003199).set("firebrick",11674146).set("floralwhite",16775920).set("forestgreen",2263842).set("fuchsia",16711935).set("gainsboro",14474460).set("ghostwhite",16316671).set("gold",16766720).set("goldenrod",14329120).set("gray",8421504).set("green",32768).set("greenyellow",11403055).set("grey",8421504).set("honeydew",15794160).set("hotpink",16738740).set("indianred",13458524).set("indigo",4915330).set("ivory",16777200).set("khaki",15787660).set("lavender",15132410).set("lavenderblush",16773365).set("lawngreen",8190976).set("lemonchiffon",16775885).set("lightblue",11393254).set("lightcoral",15761536).set("lightcyan",14745599).set("lightgoldenrodyellow",16448210).set("lightgray",13882323).set("lightgreen",9498256).set("lightgrey",13882323).set("lightpink",16758465).set("lightsalmon",16752762).set("lightseagreen",2142890).set("lightskyblue",8900346).set("lightslategray",7833753).set("lightslategrey",7833753).set("lightsteelblue",11584734).set("lightyellow",16777184).set("lime",65280).set("limegreen",3329330).set("linen",16445670).set("magenta",16711935).set("maroon",8388608).set("mediumaquamarine",6737322).set("mediumblue",205).set("mediumorchid",12211667).set("mediumpurple",9662683).set("mediumseagreen",3978097).set("mediumslateblue",8087790).set("mediumspringgreen",64154).set("mediumturquoise",4772300).set("mediumvioletred",13047173).set("midnightblue",1644912).set("mintcream",16121850).set("mistyrose",16770273).set("moccasin",16770229).set("navajowhite",16768685).set("navy",128).set("oldlace",16643558).set("olive",8421376).set("olivedrab",7048739).set("orange",16753920).set("orangered",16729344).set("orchid",14315734).set("palegoldenrod",15657130).set("palegreen",10025880).set("paleturquoise",11529966).set("palevioletred",14381203).set("papayawhip",16773077).set("peachpuff",16767673).set("peru",13468991).set("pink",16761035).set("plum",14524637).set("powderblue",11591910).set("purple",8388736).set("rebeccapurple",6697881).set("red",16711680).set("rosybrown",12357519).set("royalblue",4286945).set("saddlebrown",9127187).set("salmon",16416882).set("sandybrown",16032864).set("seagreen",3050327).set("seashell",16774638).set("sienna",10506797).set("silver",12632256).set("skyblue",8900331).set("slateblue",6970061).set("slategray",7372944).set("slategrey",7372944).set("snow",16775930).set("springgreen",65407).set("steelblue",4620980).set("tan",13808780).set("teal",32896).set("thistle",14204888).set("tomato",16737095).set("turquoise",4251856).set("violet",15631086).set("wheat",16113331).set("white",16777215).set("whitesmoke",16119285).set("yellow",16776960).set("yellowgreen",10145074),$=s.prototype=new e,H=.7;$.darker=function(t){return t=null==t?H:Math.pow(H,t),new s(this.r*t,this.g*t,this.b*t)};var I=1/H;$.brighter=function(t){return t=null==t?I:Math.pow(I,t),new s(this.r*t,this.g*t,this.b*t)},$.rgb=function(){return this},$.toString=function(){return n(this.r,this.g,this.b)};var C=a.prototype=new e;C.brighter=function(t){return t=null==t?I:Math.pow(I,t),new a(this.h,this.s,this.l*t)},C.darker=function(t){return t=null==t?H:Math.pow(H,t),new a(this.h,this.s,this.l*t)},C.rgb=function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,n=this.l,r=.5>=n?n*(1+e):n+e-n*e,i=2*n-r;return new s(o(t>=240?t-240:t+120,i,r),o(t,i,r),o(120>t?t+240:t-120,i,r))};var O=/^hsl\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/,P=/^rgb\(\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*\)$/,z=/^rgb\(\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*,\s*([-+]?\d+)\s*\)$/,E=/^#([0-9a-f]{6})$/,R=/^#([0-9a-f]{3})$/;l.prototype=e.prototype,r.prototype=s.prototype,h.prototype=a.prototype;var A=u.prototype=new e,B=18;A.brighter=function(t){return new u(this.l+B*(null==t?1:t),this.a,this.b)},A.darker=function(t){return new u(this.l-B*(null==t?1:t),this.a,this.b)};var D=4/29,F=6/29,G=3*F*F,J=1.08883,K=.95047,Q=1;A.rgb=function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,n=isNaN(this.b)?t:t-this.b/200;return t=Q*g(t),e=K*g(e),n=J*g(n),new s(c(3.2404542*e-1.5371385*t-.4985314*n),c(-.969266*e+1.8760108*t+.041556*n),c(.0556434*e-.2040259*t+1.0572252*n))};var T=F*F*F,U=Math.PI/180,V=p.prototype=new e;V.brighter=function(t){return new p(this.h,this.c,this.l+B*(null==t?1:t))},V.darker=function(t){return new p(this.h,this.c,this.l-B*(null==t?1:t))},V.rgb=function(){return b(this).rgb()},b.prototype=u.prototype;var W=180/Math.PI;N.prototype=p.prototype;var X=m.prototype=new e;X.brighter=function(t){return t=null==t?I:Math.pow(I,t),new m(this.h,this.s,this.l*t)},X.darker=function(t){return t=null==t?H:Math.pow(H,t),new m(this.h,this.s,this.l*t)};var Y=1.97294,Z=-.90649,tt=-.29227,et=1.78277,st=-.14861,nt=1,rt=Y*et,it=Y*Z,at=et*tt-Z*st;X.rgb=function(){var t=isNaN(this.h)?0:(this.h+120)*U,e=Math.pow(this.l,nt),n=isNaN(this.s)?0:this.s*e*(1-e),r=Math.cos(t),i=Math.sin(t);return new s(255*(e+n*(st*r+et*i)),255*(e+n*(tt*r+Z*i)),255*(e+n*Y*r))},w.prototype=m.prototype,t.color=l,t.rgb=r,t.hsl=h,t.lab=b,t.hcl=N,t.cubehelix=w,t.interpolateRgb=j,t.interpolateHsl=S,t.interpolateHslLong=_,t.interpolateLab=q,t.interpolateHcl=x,t.interpolateHclLong=k,t.interpolateCubehelix=M,t.interpolateCubehelixLong=y}); | |
| var canvasBack = document.getElementById("canvas-back"), | |
| canvasFront = document.getElementById("canvas-front"); | |
| var rainbow1 = color.interpolateCubehelixLong(color.cubehelix(-100, 0.75, 0.35), color.cubehelix(80, 1.50, 0.8)), | |
| rainbow2 = color.interpolateCubehelixLong(color.cubehelix(80, 1.50, 0.8), color.cubehelix(260, 0.75, 0.35)); | |
| var width = canvasBack.width, | |
| height = canvasBack.height, | |
| ringRadius = 30, | |
| ringSeparation = 1.1 * ringRadius, | |
| dotRadius = 12, | |
| n = (width + ringRadius) / ringSeparation, | |
| m = (height + ringRadius) / ringSeparation; | |
| var contextBack, | |
| contextFront, | |
| scale = window.devicePixelRatio; | |
| if (scale > 1) { | |
| canvasFront.style.width = canvasBack.style.width = width + "px"; | |
| canvasFront.style.height = canvasBack.style.height = height + "px"; | |
| canvasFront.width = canvasBack.width = width * scale; | |
| canvasFront.height = canvasBack.height = height * scale; | |
| contextBack = canvasBack.getContext("2d"); | |
| contextFront = canvasFront.getContext("2d"); | |
| contextBack.scale(scale, scale); | |
| contextFront.scale(scale, scale); | |
| } else { | |
| contextBack = canvasBack.getContext("2d"); | |
| contextFront = canvasFront.getContext("2d"); | |
| } | |
| d3_timer.timer(function(elapsed) { | |
| contextFront.clearRect(0, 0, width, height); | |
| for (var i = -1; i < n; ++i) { | |
| for (var j = -1; j < m; ++j) { | |
| var t = (elapsed / 5000) % 10; | |
| t < 0 ? t = 0 : t = t; | |
| contextFront.save(); | |
| contextFront.beginPath(); | |
| // contextFront.translate((i-Math.random()) * ringSeparation, (j-Math.random()) * ringSeparation); | |
| contextFront.translate(i * ringSeparation, j * ringSeparation); | |
| contextFront.rotate((i + j) / 6 + elapsed / (10000 - (t*3000))); | |
| contextFront.arc(ringRadius, 0, dotRadius, 0, 2 * Math.PI); | |
| contextFront.fill(); | |
| contextFront.restore(); | |
| contextFront.strokeStyle = t > 1 ? rainbow2(t - 1) : rainbow1(t); | |
| contextFront.stroke(); | |
| contextFront.fillStyle = t > 1 ? rainbow2(t - 1) : rainbow1(t); | |
| contextFront.fill(); | |
| } | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment