fbpx
<canvas id="nokey" width="800" height="800"><!-- [et_pb_line_break_holder] --> Your Browser Don't Support Canvas, Please Download Chrome ^_^``<!-- [et_pb_line_break_holder] --></canvas><!-- [et_pb_line_break_holder] -->
<script><!-- [et_pb_line_break_holder] -->var canvas = document.getElementById('nokey'),<!-- [et_pb_line_break_holder] -->//var canvas = document.getElementsByClassName("et_pb_slide_0")[0],<!-- [et_pb_line_break_holder] --> can_w = parseInt(canvas.getAttribute('width')),<!-- [et_pb_line_break_holder] --> can_h = parseInt(canvas.getAttribute('height')),<!-- [et_pb_line_break_holder] --> ctx = canvas.getContext('2d'),<!-- [et_pb_line_break_holder] --> min_balls = 30,<!-- [et_pb_line_break_holder] --> start_balls = 40;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// console.log(typeof can_w);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var ball = {<!-- [et_pb_line_break_holder] --> x: 0,<!-- [et_pb_line_break_holder] --> y: 0,<!-- [et_pb_line_break_holder] --> vx: 0,<!-- [et_pb_line_break_holder] --> vy: 0,<!-- [et_pb_line_break_holder] --> r: 0,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: 0<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> ball_color = {<!-- [et_pb_line_break_holder] --> r: 255,<!-- [et_pb_line_break_holder] --> g: 255,<!-- [et_pb_line_break_holder] --> b: 255<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> R = 2,<!-- [et_pb_line_break_holder] --> balls = [],<!-- [et_pb_line_break_holder] --> alpha_f = 0.03,<!-- [et_pb_line_break_holder] --> alpha_phase = 0,<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->// Line<!-- [et_pb_line_break_holder] --> link_line_width = 0.8,<!-- [et_pb_line_break_holder] --> dis_limit = 260,<!-- [et_pb_line_break_holder] --> add_mouse_point = true,<!-- [et_pb_line_break_holder] --> mouse_in = false,<!-- [et_pb_line_break_holder] --> mouse_ball = {<!-- [et_pb_line_break_holder] --> x: 0,<!-- [et_pb_line_break_holder] --> y: 0,<!-- [et_pb_line_break_holder] --> vx: 0,<!-- [et_pb_line_break_holder] --> vy: 0,<!-- [et_pb_line_break_holder] --> r: 0,<!-- [et_pb_line_break_holder] --> type: 'mouse'<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Random speed<!-- [et_pb_line_break_holder] -->function getRandomSpeed(pos){<!-- [et_pb_line_break_holder] --> var min = -1,<!-- [et_pb_line_break_holder] --> max = 1;<!-- [et_pb_line_break_holder] --> switch(pos){<!-- [et_pb_line_break_holder] --> case 'top':<!-- [et_pb_line_break_holder] --> return [randomNumFrom(min, max), randomNumFrom(0.1, max)];<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'right':<!-- [et_pb_line_break_holder] --> return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'bottom':<!-- [et_pb_line_break_holder] --> return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'left':<!-- [et_pb_line_break_holder] --> return [randomNumFrom(0.1, max), randomNumFrom(min, max)];<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> default:<!-- [et_pb_line_break_holder] --> return;<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->function randomArrayItem(arr){<!-- [et_pb_line_break_holder] --> return arr[Math.floor(Math.random() * arr.length)];<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->function randomNumFrom(min, max){<!-- [et_pb_line_break_holder] --> return Math.random()*(max - min) + min;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->console.log(randomNumFrom(0, 10));<!-- [et_pb_line_break_holder] -->// Random Ball<!-- [et_pb_line_break_holder] -->function getRandomBall(){<!-- [et_pb_line_break_holder] --> var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);<!-- [et_pb_line_break_holder] --> switch(pos){<!-- [et_pb_line_break_holder] --> case 'top':<!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> x: randomSidePos(can_w),<!-- [et_pb_line_break_holder] --> y: -R,<!-- [et_pb_line_break_holder] --> vx: getRandomSpeed('top')[0],<!-- [et_pb_line_break_holder] --> vy: getRandomSpeed('top')[1],<!-- [et_pb_line_break_holder] --> r: R,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: randomNumFrom(0, 10)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'right':<!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> x: can_w + R,<!-- [et_pb_line_break_holder] --> y: randomSidePos(can_h),<!-- [et_pb_line_break_holder] --> vx: getRandomSpeed('right')[0],<!-- [et_pb_line_break_holder] --> vy: getRandomSpeed('right')[1],<!-- [et_pb_line_break_holder] --> r: R,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: randomNumFrom(0, 10)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'bottom':<!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> x: randomSidePos(can_w),<!-- [et_pb_line_break_holder] --> y: can_h + R,<!-- [et_pb_line_break_holder] --> vx: getRandomSpeed('bottom')[0],<!-- [et_pb_line_break_holder] --> vy: getRandomSpeed('bottom')[1],<!-- [et_pb_line_break_holder] --> r: R,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: randomNumFrom(0, 10)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> case 'left':<!-- [et_pb_line_break_holder] --> return {<!-- [et_pb_line_break_holder] --> x: -R,<!-- [et_pb_line_break_holder] --> y: randomSidePos(can_h),<!-- [et_pb_line_break_holder] --> vx: getRandomSpeed('left')[0],<!-- [et_pb_line_break_holder] --> vy: getRandomSpeed('left')[1],<!-- [et_pb_line_break_holder] --> r: R,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: randomNumFrom(0, 10)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> break;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->function randomSidePos(length){<!-- [et_pb_line_break_holder] --> return Math.ceil(Math.random() * length);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Draw Ball<!-- [et_pb_line_break_holder] -->function renderBalls(){<!-- [et_pb_line_break_holder] --> Array.prototype.forEach.call(balls, function(b){<!-- [et_pb_line_break_holder] --> if(!b.hasOwnProperty('type')){<!-- [et_pb_line_break_holder] --> ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')';<!-- [et_pb_line_break_holder] --> ctx.beginPath();<!-- [et_pb_line_break_holder] --> ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);<!-- [et_pb_line_break_holder] --> ctx.closePath();<!-- [et_pb_line_break_holder] --> ctx.fill();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Update balls<!-- [et_pb_line_break_holder] -->function updateBalls(){<!-- [et_pb_line_break_holder] --> var new_balls = [];<!-- [et_pb_line_break_holder] --> Array.prototype.forEach.call(balls, function(b){<!-- [et_pb_line_break_holder] --> b.x += b.vx;<!-- [et_pb_line_break_holder] --> b.y += b.vy;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){<!-- [et_pb_line_break_holder] --> new_balls.push(b);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // alpha change<!-- [et_pb_line_break_holder] --> b.phase += alpha_f;<!-- [et_pb_line_break_holder] --> b.alpha = Math.abs(Math.cos(b.phase));<!-- [et_pb_line_break_holder] --> // console.log(b.alpha);<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> balls = new_balls.slice(0);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// loop alpha<!-- [et_pb_line_break_holder] -->function loopAlphaInf(){<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Draw lines<!-- [et_pb_line_break_holder] -->function renderLines(){<!-- [et_pb_line_break_holder] --> var fraction, alpha;<!-- [et_pb_line_break_holder] --> for (var i = 0; i < balls.length; i++) {<!-- [et_pb_line_break_holder] --> for (var j = i + 1; j < balls.length; j++) {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> fraction = getDisOf(balls[i], balls[j]) / dis_limit;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(fraction < 1){<!-- [et_pb_line_break_holder] --> alpha = (1 - fraction).toString();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')';<!-- [et_pb_line_break_holder] --> ctx.lineWidth = link_line_width;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> ctx.beginPath();<!-- [et_pb_line_break_holder] --> ctx.moveTo(balls[i].x, balls[i].y);<!-- [et_pb_line_break_holder] --> ctx.lineTo(balls[j].x, balls[j].y);<!-- [et_pb_line_break_holder] --> ctx.stroke();<!-- [et_pb_line_break_holder] --> ctx.closePath();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// calculate distance between two points<!-- [et_pb_line_break_holder] -->function getDisOf(b1, b2){<!-- [et_pb_line_break_holder] --> var delta_x = Math.abs(b1.x - b2.x),<!-- [et_pb_line_break_holder] --> delta_y = Math.abs(b1.y - b2.y);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> return Math.sqrt(delta_x*delta_x + delta_y*delta_y);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// add balls if there a little balls<!-- [et_pb_line_break_holder] -->function addBallIfy(){<!-- [et_pb_line_break_holder] --> if(balls.length < min_balls){<!-- [et_pb_line_break_holder] --> balls.push(getRandomBall());<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Render<!-- [et_pb_line_break_holder] -->function render(){<!-- [et_pb_line_break_holder] --> ctx.clearRect(0, 0, can_w, can_h);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> renderBalls();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> renderLines();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> updateBalls();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> addBallIfy();<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> window.requestAnimationFrame(render);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Init Balls<!-- [et_pb_line_break_holder] -->function initBalls(num){<!-- [et_pb_line_break_holder] --> for(var i = 1; i <= num; i++){<!-- [et_pb_line_break_holder] --> balls.push({<!-- [et_pb_line_break_holder] --> x: randomSidePos(can_w),<!-- [et_pb_line_break_holder] --> y: randomSidePos(can_h),<!-- [et_pb_line_break_holder] --> vx: getRandomSpeed('top')[0],<!-- [et_pb_line_break_holder] --> vy: getRandomSpeed('top')[1],<!-- [et_pb_line_break_holder] --> r: R,<!-- [et_pb_line_break_holder] --> alpha: 1,<!-- [et_pb_line_break_holder] --> phase: randomNumFrom(0, 10)<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->// Init Canvas<!-- [et_pb_line_break_holder] -->function initCanvas(){<!-- [et_pb_line_break_holder] --> canvas.setAttribute('width', window.innerWidth);<!-- [et_pb_line_break_holder] --> canvas.setAttribute('height', window.innerHeight);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> can_w = parseInt(canvas.getAttribute('width'));<!-- [et_pb_line_break_holder] --> can_h = parseInt(canvas.getAttribute('height'));<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->window.addEventListener('resize', function(e){<!-- [et_pb_line_break_holder] --> console.log('Window Resize...');<!-- [et_pb_line_break_holder] --> initCanvas();<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function goMovie(){<!-- [et_pb_line_break_holder] --> initCanvas();<!-- [et_pb_line_break_holder] --> initBalls(start_balls);<!-- [et_pb_line_break_holder] --> window.requestAnimationFrame(render);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->goMovie();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Mouse effect<!-- [et_pb_line_break_holder] -->canvas.addEventListener('mouseenter', function(){<!-- [et_pb_line_break_holder] --> console.log('mouseenter');<!-- [et_pb_line_break_holder] --> mouse_in = true;<!-- [et_pb_line_break_holder] --> balls.push(mouse_ball);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->canvas.addEventListener('mouseleave', function(){<!-- [et_pb_line_break_holder] --> console.log('mouseleave');<!-- [et_pb_line_break_holder] --> mouse_in = false;<!-- [et_pb_line_break_holder] --> var new_balls = [];<!-- [et_pb_line_break_holder] --> Array.prototype.forEach.call(balls, function(b){<!-- [et_pb_line_break_holder] --> if(!b.hasOwnProperty('type')){<!-- [et_pb_line_break_holder] --> new_balls.push(b);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> balls = new_balls.slice(0);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->canvas.addEventListener('mousemove', function(e){<!-- [et_pb_line_break_holder] --> var e = e <!-- [et_pb_line_break_holder] --> window.event;<!-- [et_pb_line_break_holder] --> mouse_ball.x = e.pageX;<!-- [et_pb_line_break_holder] --> mouse_ball.y = e.pageY;<!-- [et_pb_line_break_holder] --> // console.log(mouse_ball);<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>

Pin It on Pinterest

Share This
X