SHARE
TWEET

Untitled

a guest Feb 16th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var canvas = document.getElementById('nokey'),
  2.    can_w = parseInt(canvas.getAttribute('width')),
  3.    can_h = parseInt(canvas.getAttribute('height')),
  4.    ctx = canvas.getContext('2d');
  5.  
  6. // console.log(typeof can_w);
  7.  
  8. var ball = {
  9.       x: 0,
  10.       y: 0,
  11.       vx: 0,
  12.       vy: 0,
  13.       r: 0,
  14.       alpha: 1,
  15.       phase: 0
  16.    },
  17.    ball_color = {
  18.        r: 255,
  19.        g: 255,
  20.        b: 255
  21.    },
  22.    R = 1,
  23.    balls = [],
  24.    alpha_f = 1,
  25.    alpha_phase = 30,
  26.    
  27. // Line
  28.    link_line_width = 0.4,
  29.    dis_limit = 210,
  30.    add_mouse_point = true,
  31.    mouse_in = false,
  32.    mouse_ball = {
  33.       x: 0,
  34.       y: 0,
  35.       vx: 0,
  36.       vy: 0,
  37.       r: 0,
  38.       type: 'mouse'
  39.    };
  40.  
  41. // Random speed
  42. function getRandomSpeed(pos){
  43.     var  min = -1,
  44.        max = 1;
  45.     switch(pos){
  46.         case 'top':
  47.             return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
  48.             break;
  49.         case 'right':
  50.             return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
  51.             break;
  52.         case 'bottom':
  53.             return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
  54.             break;
  55.         case 'left':
  56.             return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
  57.             break;
  58.         default:
  59.             return;
  60.             break;
  61.     }
  62. }
  63. function randomArrayItem(arr){
  64.     return arr[Math.floor(Math.random() * arr.length)];
  65. }
  66. function randomNumFrom(min, max){
  67.     return Math.random()*(max - min) + min;
  68. }
  69. console.log(randomNumFrom(0, 10));
  70. // Random Ball
  71. function getRandomBall(){
  72.     var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
  73.     switch(pos){
  74.         case 'top':
  75.             return {
  76.                 x: randomSidePos(can_w),
  77.                 y: -R,
  78.                 vx: getRandomSpeed('top')[0],
  79.                 vy: getRandomSpeed('top')[1],
  80.                 r: R,
  81.                 alpha: 1,
  82.                 phase: randomNumFrom(0, 10)
  83.             }
  84.             break;
  85.         case 'right':
  86.             return {
  87.                 x: can_w + R,
  88.                 y: randomSidePos(can_h),
  89.                 vx: getRandomSpeed('right')[0],
  90.                 vy: getRandomSpeed('right')[1],
  91.                 r: R,
  92.                 alpha: 1,
  93.                 phase: randomNumFrom(0, 10)
  94.             }
  95.             break;
  96.         case 'bottom':
  97.             return {
  98.                 x: randomSidePos(can_w),
  99.                 y: can_h + R,
  100.                 vx: getRandomSpeed('bottom')[0],
  101.                 vy: getRandomSpeed('bottom')[1],
  102.                 r: R,
  103.                 alpha: 1,
  104.                 phase: randomNumFrom(0, 10)
  105.             }
  106.             break;
  107.         case 'left':
  108.             return {
  109.                 x: -R,
  110.                 y: randomSidePos(can_h),
  111.                 vx: getRandomSpeed('left')[0],
  112.                 vy: getRandomSpeed('left')[1],
  113.                 r: R,
  114.                 alpha: 1,
  115.                 phase: randomNumFrom(0, 10)
  116.             }
  117.             break;
  118.     }
  119. }
  120. function randomSidePos(length){
  121.     return Math.ceil(Math.random() * length);
  122. }
  123.  
  124. // Draw Ball
  125. function renderBalls(){
  126.     Array.prototype.forEach.call(balls, function(b){
  127.        if(!b.hasOwnProperty('type')){
  128.            ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';
  129.            ctx.beginPath();
  130.            ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
  131.            ctx.closePath();
  132.            ctx.fill();
  133.        }
  134.     });
  135. }
  136.  
  137. // Update balls
  138. function updateBalls(){
  139.     var new_balls = [];
  140.     Array.prototype.forEach.call(balls, function(b){
  141.         b.x += b.vx;
  142.         b.y += b.vy;
  143.        
  144.         if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
  145.            new_balls.push(b);
  146.         }
  147.        
  148.         // alpha change
  149.         b.phase += alpha_f;
  150.         b.alpha = Math.abs(Math.cos(b.phase));
  151.         // console.log(b.alpha);
  152.     });
  153.    
  154.     balls = new_balls.slice();
  155. }
  156.  
  157. // loop alpha
  158. function loopAlphaInf(){
  159.    
  160. }
  161.  
  162. // Draw lines
  163. function renderLines(){
  164.     var fraction, alpha;
  165.     for (var i = 0; i < balls.length; i++) {
  166.         for (var j = i + 1; j < balls.length; j++) {
  167.            
  168.            fraction = getDisOf(balls[i], balls[j]) / dis_limit;
  169.            
  170.            if(fraction < 1){
  171.                alpha = (1 - fraction).toString();
  172.  
  173.                ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';
  174.                ctx.lineWidth = link_line_width;
  175.                
  176.                ctx.beginPath();
  177.                ctx.moveTo(balls[i].x, balls[i].y);
  178.                ctx.lineTo(balls[j].x, balls[j].y);
  179.                ctx.stroke();
  180.                ctx.closePath();
  181.            }
  182.         }
  183.     }
  184. }
  185.  
  186. // calculate distance between two points
  187. function getDisOf(b1, b2){
  188.     var  delta_x = Math.abs(b1.x - b2.x),
  189.        delta_y = Math.abs(b1.y - b2.y);
  190.    
  191.     return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
  192. }
  193.  
  194. // add balls if there a little balls
  195. function addBallIfy(){
  196.     if(balls.length < 90){
  197.         balls.push(getRandomBall());
  198.     }
  199. }
  200.  
  201. // Render
  202. function render(){
  203.     ctx.clearRect(0, 0, can_w, can_h);
  204.    
  205.     renderBalls();
  206.    
  207.     renderLines();
  208.    
  209.     updateBalls();
  210.    
  211.     addBallIfy();
  212.    
  213.     window.requestAnimationFrame(render);
  214. }
  215.  
  216. // Init Balls
  217. function initBalls(num){
  218.     for(var i = 1; i <= num; i++){
  219.         balls.push({
  220.             x: randomSidePos(can_w),
  221.             y: randomSidePos(can_h),
  222.             vx: getRandomSpeed('top')[0],
  223.             vy: getRandomSpeed('top')[1],
  224.             r: R,
  225.             alpha: 1,
  226.             phase: randomNumFrom(0, 10)
  227.         });
  228.     }
  229. }
  230. // Init Canvas
  231. function initCanvas(){
  232.     canvas.setAttribute('width', window.innerWidth);
  233.     canvas.setAttribute('height', window.innerHeight);
  234.    
  235.     can_w = parseInt(canvas.getAttribute('width'));
  236.     can_h = parseInt(canvas.getAttribute('height'));
  237. }
  238. window.addEventListener('resize', function(e){
  239.     console.log('Window Resize...');
  240.     initCanvas();
  241. });
  242.  
  243. function goMovie(){
  244.     initCanvas();
  245.     initBalls(20);
  246.     window.requestAnimationFrame(render);
  247. }
  248. goMovie();
  249.  
  250. // Mouse effect
  251. canvas.addEventListener('mouseenter', function(){
  252.     console.log('mouseenter');
  253.     mouse_in = true;
  254.     balls.push(mouse_ball);
  255. });
  256. canvas.addEventListener('mouseleave', function(){
  257.     console.log('mouseleave');
  258.     mouse_in = false;
  259.     var new_balls = [];
  260.     Array.prototype.forEach.call(balls, function(b){
  261.         if(!b.hasOwnProperty('type')){
  262.             new_balls.push(b);
  263.         }
  264.     });
  265.     balls = new_balls.slice(0);
  266. });
  267. canvas.addEventListener('mousemove', function(e){
  268.     var e = e || window.event;
  269.     mouse_ball.x = e.pageX;
  270.     mouse_ball.y = e.pageY;
  271.     // console.log(mouse_ball);
  272. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top