Msc1G2:Test1
var canvas = document.getElementById('nokey'),
can_w = parseInt(canvas.getAttribute('width')), can_h = parseInt(canvas.getAttribute('height')), ctx = canvas.getContext('2d');
// console.log(typeof can_w);
var ball = {
x: 0, y: 0, vx: 0, vy: 0, r: 0, alpha: 1, phase: 0 }, ball_color = { r: 207, g: 255, 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);
});