Difference between revisions of "Msc1G2:Test1"

From uf
Jump to: navigation, search
 
(12 intermediate revisions by one user not shown)
Line 1: Line 1:
−
var canvas = document.getElementById('nokey'),
+
__NOTITLE__ __NOTOC__
−
  can_w = parseInt(canvas.getAttribute('width')),
+
−
  can_h = parseInt(canvas.getAttribute('height')),
+
−
  ctx = canvas.getContext('2d');
+
  
−
// console.log(typeof can_w);
+
<html>
−
 
+
<style>
−
var ball = {
+
.header-background{background-image: url("http://gsm.hyperbody.nl/images/5/50/20160701_Group3_background-wiki.jpg");background-color: #cccccc;width:850px;height:300px;background-size: 100% auto; background-repeat: no-repeat;}
−
      x: 0,
+
.header-content{position:relative;bottom:50px;left:0px;}
−
      y: 0,
+
.button-container{width:150px;height:50px;float:left;color:white;text-align:center;float:right;}
−
      vx: 0,
+
.bottom-container{position:relative;width:850px;height:10px;float:left;background-color: rgba(255, 128, 0, 0.7);bottom:10px;}
−
      vy: 0,
+
.button{width:140px; height:30px; bottom:10px;background-color: rgba(50, 50, 50, 0.23);padding-top:10px;}
−
      r: 0,
+
a.nav-link:link,a.nav-link:visited{text-decoration:none;font-weight:bold;color:white}
−
      alpha: 1,
+
a.nav-link:hover,a.nav-link:active{text-decoration:none;font-weight:bold;color:#FF8000;}
−
      phase: 0
+
a.nav-link-active:hover,a.nav-link-active:active{text-decoration:none;font-weight:bold;color:#000;}
−
  },
+
.left-filler{width:230px;height:40px;float:left;}
−
  ball_color = {
+
.hidden{visibility:hidden;}
−
      r: 207,
+
.tab-active{background-color:rgba(255, 128, 0, 0.7);}
−
      g: 255,
+
</style>
−
      b: 4
+
−
  },
+
−
  R = 2,
+
−
  balls = [],
+
−
  alpha_f = 0.03,
+
−
  alpha_phase = 0,
+
−
   
+
−
// Line
+
−
  link_line_width = 0.8,
+
−
  dis_limit = 260,
+
−
  add_mouse_point = true,
+
−
  mouse_in = false,
+
−
  mouse_ball = {
+
−
      x: 0,
+
−
      y: 0,
+
−
      vx: 0,
+
−
      vy: 0,
+
−
      r: 0,
+
−
      type: 'mouse'
+
−
  };
+
−
 
+
−
// Random speed
+
−
function getRandomSpeed(pos){
+
−
    var  min = -1,
+
−
      max = 1;
+
−
    switch(pos){
+
−
        case 'top':
+
−
            return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
+
−
            break;
+
−
        case 'right':
+
−
            return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
+
−
            break;
+
−
        case 'bottom':
+
−
            return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
+
−
            break;
+
−
        case 'left':
+
−
            return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
+
−
            break;
+
−
        default:
+
−
            return;
+
−
            break;
+
−
    }
+
−
}
+
−
function randomArrayItem(arr){
+
−
    return arr[Math.floor(Math.random() * arr.length)];
+
−
}
+
−
function randomNumFrom(min, max){
+
−
    return Math.random()*(max - min) + min;
+
−
}
+
−
console.log(randomNumFrom(0, 10));
+
−
// Random Ball
+
−
function getRandomBall(){
+
−
    var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
+
−
    switch(pos){
+
−
        case 'top':
+
−
            return {
+
−
                x: randomSidePos(can_w),
+
−
                y: -R,
+
−
                vx: getRandomSpeed('top')[0],
+
−
                vy: getRandomSpeed('top')[1],
+
−
                r: R,
+
−
                alpha: 1,
+
−
                phase: randomNumFrom(0, 10)
+
−
            }
+
−
            break;
+
−
        case 'right':
+
−
            return {
+
−
                x: can_w + R,
+
−
                y: randomSidePos(can_h),
+
−
                vx: getRandomSpeed('right')[0],
+
−
                vy: getRandomSpeed('right')[1],
+
−
                r: R,
+
−
                alpha: 1,
+
−
                phase: randomNumFrom(0, 10)
+
−
            }
+
−
            break;
+
−
        case 'bottom':
+
−
            return {
+
−
                x: randomSidePos(can_w),
+
−
                y: can_h + R,
+
−
                vx: getRandomSpeed('bottom')[0],
+
−
                vy: getRandomSpeed('bottom')[1],
+
−
                r: R,
+
−
                alpha: 1,
+
−
                phase: randomNumFrom(0, 10)
+
−
            }
+
−
            break;
+
−
        case 'left':
+
−
            return {
+
−
                x: -R,
+
−
                y: randomSidePos(can_h),
+
−
                vx: getRandomSpeed('left')[0],
+
−
                vy: getRandomSpeed('left')[1],
+
−
                r: R,
+
−
                alpha: 1,
+
−
                phase: randomNumFrom(0, 10)
+
−
            }
+
−
            break;
+
−
    }
+
−
}
+
−
function randomSidePos(length){
+
−
    return Math.ceil(Math.random() * length);
+
−
}
+
−
 
+
−
// Draw Ball
+
−
function renderBalls(){
+
−
    Array.prototype.forEach.call(balls, function(b){
+
−
      if(!b.hasOwnProperty('type')){
+
−
          ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';
+
−
          ctx.beginPath();
+
−
          ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
+
−
          ctx.closePath();
+
−
          ctx.fill();
+
−
      }
+
−
    });
+
−
}
+
−
 
+
−
// Update balls
+
−
function updateBalls(){
+
−
    var new_balls = [];
+
−
    Array.prototype.forEach.call(balls, function(b){
+
−
        b.x += b.vx;
+
−
        b.y += b.vy;
+
−
       
+
−
        if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
+
−
          new_balls.push(b);
+
−
        }
+
−
       
+
−
        // alpha change
+
−
        b.phase += alpha_f;
+
−
        b.alpha = Math.abs(Math.cos(b.phase));
+
−
        // console.log(b.alpha);
+
−
    });
+
−
   
+
−
    balls = new_balls.slice(0);
+
−
}
+
−
 
+
−
// loop alpha
+
−
function loopAlphaInf(){
+
−
   
+
−
}
+
−
 
+
−
// Draw lines
+
−
function renderLines(){
+
−
    var fraction, alpha;
+
−
    for (var i = 0; i < balls.length; i++) {
+
−
        for (var j = i + 1; j < balls.length; j++) {
+
−
         
+
−
          fraction = getDisOf(balls[i], balls[j]) / dis_limit;
+
−
           
+
−
          if(fraction < 1){
+
−
              alpha = (1 - fraction).toString();
+
−
 
+
−
              ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';
+
−
              ctx.lineWidth = link_line_width;
+
−
             
+
−
              ctx.beginPath();
+
−
              ctx.moveTo(balls[i].x, balls[i].y);
+
−
              ctx.lineTo(balls[j].x, balls[j].y);
+
−
              ctx.stroke();
+
−
              ctx.closePath();
+
−
          }
+
−
        }
+
−
    }
+
−
}
+
−
 
+
−
// calculate distance between two points
+
−
function getDisOf(b1, b2){
+
−
    var  delta_x = Math.abs(b1.x - b2.x),
+
−
      delta_y = Math.abs(b1.y - b2.y);
+
−
   
+
−
    return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
+
−
}
+
−
 
+
−
// add balls if there a little balls
+
−
function addBallIfy(){
+
−
    if(balls.length < 20){
+
−
        balls.push(getRandomBall());
+
−
    }
+
−
}
+
−
 
+
−
// Render
+
−
function render(){
+
−
    ctx.clearRect(0, 0, can_w, can_h);
+
−
   
+
−
    renderBalls();
+
−
   
+
−
    renderLines();
+
−
   
+
−
    updateBalls();
+
−
   
+
−
    addBallIfy();
+
−
   
+
−
    window.requestAnimationFrame(render);
+
−
}
+
−
 
+
−
// Init Balls
+
−
function initBalls(num){
+
−
    for(var i = 1; i <= num; i++){
+
−
        balls.push({
+
−
            x: randomSidePos(can_w),
+
−
            y: randomSidePos(can_h),
+
−
            vx: getRandomSpeed('top')[0],
+
−
            vy: getRandomSpeed('top')[1],
+
−
            r: R,
+
−
            alpha: 1,
+
−
            phase: randomNumFrom(0, 10)
+
−
        });
+
−
    }
+
−
}
+
−
// Init Canvas
+
−
function initCanvas(){
+
−
    canvas.setAttribute('width', window.innerWidth);
+
−
    canvas.setAttribute('height', window.innerHeight);
+
−
   
+
−
    can_w = parseInt(canvas.getAttribute('width'));
+
−
    can_h = parseInt(canvas.getAttribute('height'));
+
−
}
+
−
window.addEventListener('resize', function(e){
+
−
    console.log('Window Resize...');
+
−
    initCanvas();
+
−
});
+
−
 
+
−
function goMovie(){
+
−
    initCanvas();
+
−
    initBalls(20);
+
−
    window.requestAnimationFrame(render);
+
−
}
+
−
goMovie();
+
−
 
+
−
// Mouse effect
+
−
canvas.addEventListener('mouseenter', function(){
+
−
    console.log('mouseenter');
+
−
    mouse_in = true;
+
−
    balls.push(mouse_ball);
+
−
});
+
−
canvas.addEventListener('mouseleave', function(){
+
−
    console.log('mouseleave');
+
−
    mouse_in = false;
+
−
    var new_balls = [];
+
−
    Array.prototype.forEach.call(balls, function(b){
+
−
        if(!b.hasOwnProperty('type')){
+
−
            new_balls.push(b);
+
−
        }
+
−
    });
+
−
    balls = new_balls.slice(0);
+
−
});
+
−
canvas.addEventListener('mousemove', function(e){
+
−
    var e = e || window.event;
+
−
    mouse_ball.x = e.pageX;
+
−
    mouse_ball.y = e.pageY;
+
−
    // console.log(mouse_ball);
+
−
});
+

Latest revision as of 01:37, 2 February 2018


Retrieved from "http://uf.roboticbuilding.eu/index.php?title=Msc1G2:Test1&oldid=5011"