ban.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. try{
  2. if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  3. }else{
  4. $(function(){
  5. var canvas = document.querySelector('canvas'),
  6. ctx = canvas.getContext('2d')
  7. canvas.width = $(window).width();
  8. canvas.height = $(window).height();
  9. ctx.lineWidth = .3;
  10. ctx.strokeStyle = (new Color(150)).style;
  11. var mousePosition = {
  12. x: 30 * canvas.width / 100,
  13. y: 30 * canvas.height / 100
  14. };
  15. var dots = {
  16. nb: 250,
  17. distance: 100,
  18. d_radius: 150,
  19. array: []
  20. };
  21. function colorValue(min) {
  22. return Math.floor(Math.random() * 255 + min);
  23. }
  24. function createColorStyle(r,g,b) {
  25. return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
  26. }
  27. function mixComponents(comp1, weight1, comp2, weight2) {
  28. return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
  29. }
  30. function averageColorStyles(dot1, dot2) {
  31. var color1 = dot1.color,
  32. color2 = dot2.color;
  33. var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
  34. g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
  35. b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
  36. return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
  37. }
  38. function Color(min) {
  39. min = min || 0;
  40. this.r = colorValue(min);
  41. this.g = colorValue(min);
  42. this.b = colorValue(min);
  43. this.style = createColorStyle(this.r, this.g, this.b);
  44. }
  45. function Dot(){
  46. this.x = Math.random() * canvas.width;
  47. this.y = Math.random() * canvas.height;
  48. this.vx = -.5 + Math.random();
  49. this.vy = -.5 + Math.random();
  50. this.radius = Math.random() * 2;
  51. this.color = new Color();
  52. }
  53. Dot.prototype = {
  54. draw: function(){
  55. ctx.beginPath();
  56. ctx.fillStyle = this.color.style;
  57. ctx.arc(this.x, this.y, this.radius, 0, Math.PI, false);
  58. ctx.fill();
  59. }
  60. };
  61. function createDots(){
  62. for(i = 0; i < dots.nb; i++){
  63. dots.array.push(new Dot());
  64. }
  65. }
  66. function moveDots() {
  67. for(i = 0; i < dots.nb; i++){
  68. var dot = dots.array[i];
  69. if(dot.y < 0 || dot.y > canvas.height){
  70. dot.vx = dot.vx;
  71. dot.vy = - dot.vy;
  72. }
  73. else if(dot.x < 0 || dot.x > canvas.width){
  74. dot.vx = - dot.vx;
  75. dot.vy = dot.vy;
  76. }
  77. dot.x += dot.vx;
  78. dot.y += dot.vy;
  79. }
  80. }
  81. function connectDots() {
  82. for(i = 0; i < dots.nb; i++){
  83. for(j = 0; j < dots.nb; j++){
  84. i_dot = dots.array[i];
  85. j_dot = dots.array[j];
  86. if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
  87. if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
  88. ctx.beginPath();
  89. ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
  90. ctx.moveTo(i_dot.x, i_dot.y);
  91. ctx.lineTo(j_dot.x, j_dot.y);
  92. ctx.stroke();
  93. ctx.closePath();
  94. }
  95. }
  96. }
  97. }
  98. }
  99. function drawDots() {
  100. for(i = 0; i < dots.nb; i++){
  101. var dot = dots.array[i];
  102. dot.draw();
  103. }
  104. }
  105. function animateDots() {
  106. ctx.clearRect(0, 0, canvas.width, canvas.height);
  107. moveDots();
  108. connectDots();
  109. drawDots();
  110. requestAnimationFrame(animateDots);
  111. }
  112. $('canvas').on('mousemove', function(e){
  113. mousePosition.x = e.pageX;
  114. mousePosition.y = e.pageY;
  115. });
  116. $('canvas').on('mouseleave', function(e){
  117. mousePosition.x = canvas.width / 2;
  118. mousePosition.y = canvas.height / 2;
  119. });
  120. createDots();
  121. requestAnimationFrame(animateDots);
  122. });
  123. }
  124. }catch(e){}