Difference between revisions of "Msc1G2:Test1"
(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | 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); | ||
+ | }); |
Revision as of 19:05, 1 February 2018
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);
});