try{ if (/android|webos|iphone|ipod|blackberry/i.test(navigator.useragent)) { }else{ $(function(){ var canvas = document.queryselector('canvas'), ctx = canvas.getcontext('2d') canvas.width = window.innerwidth; canvas.height = window.innerheight; ctx.linewidth = .3; ctx.strokestyle = (new color(150)).style; var mouseposition = { x: 30 * canvas.width / 100, y: 30 * canvas.height / 100 }; var dots = { nb: 250, distance: 100, d_radius: 150, array: [] }; function colorvalue(min) { return math.floor(math.random() * 255 + min); } function createcolorstyle(r,g,b) { return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)'; } function mixcomponents(comp1, weight1, comp2, weight2) { return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2); } function averagecolorstyles(dot1, dot2) { var color1 = dot1.color, color2 = dot2.color; var r = mixcomponents(color1.r, dot1.radius, color2.r, dot2.radius), g = mixcomponents(color1.g, dot1.radius, color2.g, dot2.radius), b = mixcomponents(color1.b, dot1.radius, color2.b, dot2.radius); return createcolorstyle(math.floor(r), math.floor(g), math.floor(b)); } function color(min) { min = min || 0; this.r = colorvalue(min); this.g = colorvalue(min); this.b = colorvalue(min); this.style = createcolorstyle(this.r, this.g, this.b); } function dot(){ this.x = math.random() * canvas.width; this.y = math.random() * canvas.height; this.vx = -.5 + math.random(); this.vy = -.5 + math.random(); this.radius = math.random() * 2; this.color = new color(); console.log(this); } dot.prototype = { draw: function(){ ctx.beginpath(); ctx.fillstyle = this.color.style; ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, false); ctx.fill(); } }; function createdots(){ for(i = 0; i < dots.nb; i++){ dots.array.push(new dot()); } } function movedots() { for(i = 0; i < dots.nb; i++){ var dot = dots.array[i]; if(dot.y < 0 || dot.y > canvas.height){ dot.vx = dot.vx; dot.vy = - dot.vy; } else if(dot.x < 0 || dot.x > canvas.width){ dot.vx = - dot.vx; dot.vy = dot.vy; } dot.x += dot.vx; dot.y += dot.vy; } } function connectdots() { for(i = 0; i < dots.nb; i++){ for(j = 0; j < dots.nb; j++){ i_dot = dots.array[i]; j_dot = dots.array[j]; if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){ if((i_dot.x - mouseposition.x) < dots.d_radius && (i_dot.y - mouseposition.y) < dots.d_radius && (i_dot.x - mouseposition.x) > - dots.d_radius && (i_dot.y - mouseposition.y) > - dots.d_radius){ ctx.beginpath(); ctx.strokestyle = averagecolorstyles(i_dot, j_dot); ctx.moveto(i_dot.x, i_dot.y); ctx.lineto(j_dot.x, j_dot.y); ctx.stroke(); ctx.closepath(); } } } } } function drawdots() { for(i = 0; i < dots.nb; i++){ var dot = dots.array[i]; dot.draw(); } } function animatedots() { ctx.clearrect(0, 0, canvas.width, canvas.height); movedots(); connectdots(); drawdots(); requestanimationframe(animatedots); } $('canvas').on('mousemove', function(e){ mouseposition.x = e.pagex; mouseposition.y = e.pagey; }); $('canvas').on('mouseleave', function(e){ mouseposition.x = canvas.width / 2; mouseposition.y = canvas.height / 2; }); createdots(); requestanimationframe(animatedots); }); } }catch(e){}