You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

292 lines
7.1 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>建党百年</title>
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
  10. <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
  11. <script src="js/comment.js" type="text/javascript" charset="utf-8"></script>
  12. <link rel="stylesheet" type="text/css" href="css/style.css"/>
  13. <link rel="stylesheet" type="text/css" href="css/begin.css" />
  14. </head>
  15. <style type="text/css">
  16. </style>
  17. <body>
  18. <div id="wrap">
  19. <div class="mask"></div>
  20. <div class="imgs">
  21. <img src="img/5.jpg" />
  22. </div>
  23. <!--旋涡-->
  24. <div id="container" touch-action="none" ></div>
  25. </div>
  26. </body>
  27. <!--$("#header").load("header.html");
  28. $("#footer").load("footer.html");-->
  29. <script type="text/javascript">
  30. var height = document.documentElement.clientWidth,
  31. width = document.documentElement.clientHeight;
  32. $('.imgs').css({
  33. 'width': width,
  34. 'height': height
  35. })
  36. $('.mask').css({
  37. 'width': width,
  38. 'height': height
  39. })
  40. var $this = $('.imgs img');
  41. $this.css({
  42. position: 'absolute',
  43. top: $this.position().top,
  44. left: $this.position().left
  45. })
  46. .animate({
  47. 'width': $this.width() * 2,
  48. 'height': $this.height() * 2,
  49. 'top': $this.position().top - $this.height() ,
  50. 'left': $this.position().left - $this.width()
  51. }, 3000)
  52. // setTimeout(function() {
  53. // $('#container').css('display','block')
  54. // }, 3000)
  55. setTimeout(function() {
  56. $('.mask').fadeIn(2000)
  57. }, 4500)
  58. setTimeout(function() {
  59. window.location.href="index.html"
  60. }, 7000)
  61. </script>
  62. </html>
  63. <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
  64. <script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
  65. <script id="vertexShader" type="x-shader/x-vertex">
  66. void main() {
  67. gl_Position = vec4( position, 1.0 );
  68. }
  69. </script>
  70. <script src="js/index.js"></script>
  71. <script id="fragmentShader" type="x-shader/x-fragment">
  72. uniform vec2 u_resolution;
  73. uniform vec2 u_mouse;
  74. uniform float u_time;
  75. uniform sampler2D u_noise;
  76. #define PI 3.141592653589793
  77. #define TAU 6.283185307179586
  78. const int octaves = 2;
  79. const float seed = 43758.5453123;
  80. const float seed2 = 73156.8473192;
  81. //旋转度数
  82. // float r1 = 0.1 + ((u_mouse.y + 0.5) * .1);
  83. // float r2 = 0.4 + (u_mouse.x * .2);
  84. float r1 = 0.2;
  85. float r2 = 0.9;
  86. // These awesome complex Math functions curtesy of
  87. // https://github.com/mkovacs/reim/blob/master/reim.glsl
  88. vec2 cCis(float r);
  89. vec2 cLog(vec2 c); // principal value
  90. vec2 cInv(vec2 c);
  91. float cArg(vec2 c);
  92. float cAbs(vec2 c);
  93. vec2 cMul(vec2 a, vec2 b);
  94. vec2 cDiv(vec2 a, vec2 b);
  95. vec2 cCis(float r)
  96. {
  97. return vec2( cos(r), sin(r) );
  98. }
  99. vec2 cExp(vec2 c)
  100. {
  101. return exp(c.x) * cCis(c.y);
  102. }
  103. vec2 cConj(vec2 c)
  104. {
  105. return vec2(c.x, -c.y);
  106. }
  107. vec2 cInv(vec2 c)
  108. {
  109. return cConj(c) / dot(c, c);
  110. }
  111. vec2 cLog(vec2 c)
  112. {
  113. return vec2( log( cAbs(c) ), cArg(c) );
  114. }
  115. float cArg(vec2 c)
  116. {
  117. return atan(c.y, c.x);
  118. }
  119. float cAbs(vec2 c)
  120. {
  121. return length(c);
  122. }
  123. vec2 cMul(vec2 a, vec2 b)
  124. {
  125. return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
  126. }
  127. vec2 cDiv(vec2 a, vec2 b)
  128. {
  129. return cMul(a, cInv(b));
  130. }
  131. float hash(float p)
  132. {
  133. vec2 o = texture2D( u_noise, vec2((p+0.5)/256.0), -100.0 ).xy;
  134. return o.x;
  135. }
  136. vec2 hash(vec2 p)
  137. {
  138. vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
  139. return o - .5;
  140. }
  141. vec3 hash3(vec2 p)
  142. {
  143. vec3 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xyz;
  144. return o;
  145. }
  146. vec4 hash4(vec2 p)
  147. {
  148. vec4 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 );
  149. return o;
  150. }
  151. // LUT Noise by Inigo Quilez - iq/2013
  152. // https://www.shadertoy.com/view/4sfGzS
  153. float noiseLUT( in vec3 x )
  154. {
  155. vec3 p = floor(x);
  156. vec3 f = fract(x);
  157. f = f*f*(3.0-2.0*f);
  158. vec2 uv = (p.xy+vec2(37.0,17.0)*p.z) + f.xy;
  159. vec2 rg = texture2D(u_noise, (uv+0.5)/256.0).yx - .5;
  160. return mix( rg.x, rg.y, f.z );
  161. }
  162. float fbm1(in vec2 _st, float seed) {
  163. float v = 0.0;
  164. float a = 0.5;
  165. vec2 shift = vec2(100.0);
  166. // Rotate to reduce axial bias
  167. mat2 rot = mat2(cos(0.5), sin(0.5),
  168. -sin(0.5), cos(0.50));
  169. for (int i = 0; i < octaves; ++i) {
  170. v += a * noiseLUT(vec3(_st, 1.));
  171. // v += a * noise(_st, seed);
  172. _st = rot * _st * 2.0 + shift;
  173. a *= 0.4;
  174. }
  175. return v;
  176. }
  177. float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {
  178. q = vec2( fbm1( uv + vec2(0.0,0.0), seed ),
  179. fbm1( uv + vec2(5.2,1.3), seed ) );
  180. r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ),
  181. fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );
  182. return fbm1( uv + 4.0*r, seed );
  183. }
  184. vec2 hash2(vec2 p)
  185. {
  186. vec2 o = texture2D( u_noise, (p+0.5)/256.0, -100.0 ).xy;
  187. return o;
  188. }
  189. vec3 hsb2rgb( in vec3 c ){
  190. vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
  191. 6.0)-3.0)-1.0,
  192. 0.0,
  193. 1.0 );
  194. rgb = rgb*rgb*(3.0-2.0*rgb);
  195. return c.z * mix( vec3(1.0), rgb, c.y);
  196. }
  197. vec3 domain(vec2 z){
  198. return vec3(hsb2rgb(vec3(atan(z.y,z.x)/TAU,1.,1.)));
  199. }
  200. vec3 colour(vec2 z) {
  201. return domain(z);
  202. }
  203. vec2 Droste(vec2 uv) {
  204. // 5. Take the tiled strips back to ordinary space.
  205. uv = cLog(uv);
  206. // 4. Scale and rotate the strips
  207. float scale = log(r2/r1);
  208. float angle = atan(scale/(2.0*PI));
  209. uv = cDiv(uv, cExp(vec2(0,angle))*cos(angle));
  210. // 3. this simulates zooming in the tile
  211. uv -= u_time * .2;
  212. // 2. Tile the strips
  213. uv.x = mod(uv.x,log(r2/r1));
  214. // 1. Take the annulus to a strip
  215. uv = cExp(uv)*r1;
  216. return uv;
  217. }
  218. void main() {
  219. vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
  220. uv *= 2.;
  221. vec2 _uv = uv;
  222. vec2 polar = vec2(length(_uv), atan(uv.y, uv.x));
  223. uv = Droste(uv);
  224. float rInv = 1./length(uv);
  225. uv = uv * rInv - vec2(rInv, 1.);
  226. vec2 p;
  227. vec2 q;
  228. float pat = pattern(uv * 5., seed, u_time * 5., p, q);
  229. vec3 fragcolour = mix(
  230. mix(
  231. vec3(0.1, 0.8, 1.0),
  232. vec3(0.1, 0.8, 1.0),
  233. abs(q.x*p.y)*20.),
  234. vec3(.1, .3, 0.5),
  235. pat
  236. );
  237. fragcolour -= smoothstep(-.1, .9, p.x) * .1;
  238. fragcolour += smoothstep(-.1, .5, p.y) * .1;
  239. fragcolour += (1. - length(_uv * 2.)) *.5 ;
  240. float lcol = clamp(length((_uv) * 4.) - .2, 0., 1.);
  241. float raynoise = fbm1(polar*10.-u_time*2., seed);
  242. fragcolour = mix(
  243. fragcolour,
  244. vec3(sin(p.y * 10.), cos(q.y * 10.), pat * 2.) * .5 + 1.5,
  245. clamp(
  246. abs(
  247. sin(polar.y * 50.)
  248. ) * 1. / length(_uv * _uv * 3.) * raynoise - .2,
  249. 0.,
  250. 1.) * .2);
  251. fragcolour = mix(vec3(1.), fragcolour, lcol);
  252. gl_FragColor = vec4(fragcolour,1.0);
  253. }
  254. </script>