bg1.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. export function bgStart(){
  2. /*
  3. (Book REF) HTML5 Canvas Ch. 5: Math, Physics, and Animation ::: Uniform Circular Motion
  4. By Steve Fulton and Jeff Fulton
  5. */
  6. window.requestAnimFrame = (function() {
  7. return window.requestAnimationFrame ||
  8. window.webkitRequestAnimationFrame ||
  9. window.mozRequestAnimationFrame ||
  10. window.oRequestAnimationFrame ||
  11. window.msRequestAnimationFrame ||
  12. function(callback) {
  13. window.setTimeout(callback, 1000 / 60);
  14. };
  15. })();
  16. var c,
  17. $,
  18. w,
  19. h,
  20. msX,
  21. msY,
  22. midX,
  23. midY,
  24. num = 650,
  25. parts = [],
  26. begin = 50,
  27. repeat = 20,
  28. end = Math.PI * 2,
  29. flow,
  30. force = null,
  31. msdn = false;
  32. function start() {
  33. c = document.getElementById('canvas');
  34. $ = c.getContext('2d');
  35. w = c.width = window.innerWidth;
  36. h = c.height = window.innerHeight;
  37. midX = w / 2;
  38. midY = h / 2;
  39. force = Math.max(w, h) * 0.09;
  40. flow = begin;
  41. window.requestAnimFrame(create);
  42. run();
  43. }
  44. function run() {
  45. window.requestAnimFrame(run);
  46. go();
  47. }
  48. function Part() {
  49. this.deg = 0;
  50. this.rad = 0;
  51. this.x = 0;
  52. this.y = 0;
  53. this.distX = 0;
  54. this.distY = 0;
  55. this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';
  56. this.size;
  57. }
  58. function create() {
  59. var n = num;
  60. while (n--) {
  61. var p = new Part();
  62. p.deg = Math.floor(Math.random() * 360);
  63. p.rad = Math.floor(Math.random() * w * 0.5);
  64. p.x = p.distX = Math.floor(Math.random() * w);
  65. p.y = p.distY = Math.floor(Math.random() * h);
  66. p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));
  67. parts[n] = p;
  68. }
  69. c.onmousemove = msmv;
  70. c.onmousedown = msdn;
  71. c.onmouseup = msup;
  72. var int = setInterval(function() {
  73. flow--;
  74. if (flow === repeat) clearInterval(int);
  75. }, 20);
  76. }
  77. function go() {
  78. $.globalCompositeOperation = 'source-over';
  79. $.fillStyle = 'hsla(242, 30%, 5%, .55)';
  80. $.fillRect(0, 0, w, h);
  81. $.globalCompositeOperation = 'lighter';
  82. var mx = msX;
  83. var my = msY;
  84. var bounds = force;
  85. if (msdn) {
  86. bounds = force * 2;
  87. }
  88. var n = num;
  89. while (n--) {
  90. var p = parts[n];
  91. var radi = Math.PI / 180 * p.deg;
  92. p.distX = midX + p.rad * Math.cos(radi);
  93. p.distY = midY + p.rad * Math.sin(radi) * 0.4;
  94. if (mx && my) {
  95. var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));
  96. if (p.distX - mx > 0 &&
  97. p.distX - mx < bounds &&
  98. p.distY - my > 0 &&
  99. p.distY - my < bounds) {
  100. p.distX += react;
  101. p.distY += react;
  102. } else if (p.distX - mx > 0 &&
  103. p.distX - mx < bounds &&
  104. p.distY - my < 0 &&
  105. p.distY - my > -bounds) {
  106. p.distX += react;
  107. p.distY -= react;
  108. } else if (p.distX - mx < 0 &&
  109. p.distX - mx > -bounds &&
  110. p.distY - my > 0 &&
  111. p.distY - my < bounds) {
  112. p.distX -= react;
  113. p.distY += react;
  114. } else if (p.distX - mx < 0 &&
  115. p.distX - mx > -bounds &&
  116. p.distY - my < 0 &&
  117. p.distY - my > -bounds) {
  118. p.distY -= react;
  119. p.distY -= react;
  120. }
  121. }
  122. p.x += ((p.distX - p.x) / flow);
  123. p.y += ((p.distY - p.y) / flow);
  124. var x = p.x;
  125. var y = p.y;
  126. var s = p.size * (p.y * 1.5 / h);
  127. if (s < 0.1) {
  128. s = 0;
  129. }
  130. $.beginPath();
  131. $.fillStyle = p.color;
  132. $.arc(x, y, s, 0, end, true);
  133. $.fill();
  134. $.closePath();
  135. var vary;
  136. if (p.size < 2) {
  137. vary = 4;
  138. } else if (p.size < 3) {
  139. vary = 3;
  140. } else if (p.size < 4) {
  141. vary = 2;
  142. } else {
  143. vary = 1;
  144. }
  145. vary *= (p.y / (h * 0.9));
  146. p.deg += vary;
  147. p.deg = p.deg % 360;
  148. }
  149. }
  150. function msmv(e) {
  151. var p = getPos(e.target);
  152. var sX = window.pageXOffset;
  153. var sY = window.pageYOffset;
  154. msX = e.clientX - p.x + sX;
  155. msY = e.clientY - p.y + sY;
  156. }
  157. function msdn(e) {
  158. msdn = true;
  159. }
  160. function msup(e) {
  161. msdn = false;
  162. }
  163. function getPos(el) {
  164. var cosmo = {};
  165. cosmo.x = el.offsetLeft;
  166. cosmo.y = el.offsetTop;
  167. while (el.offsetParent) {
  168. el = el.offsetParent;
  169. cosmo.x += el.offsetLeft;
  170. cosmo.y += el.offsetTop;
  171. }
  172. return cosmo;
  173. }
  174. start()
  175. }