<canvas id="canvas" style="opacity: 0.05;"></canvas><!-- [et_pb_line_break_holder] --> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Canvas bg<!-- [et_pb_line_break_holder] --> * <!-- [et_pb_line_break_holder] --> * Deps: GreenSocks TweenLite<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Constructor<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function Animate(canvas, options) {<!-- [et_pb_line_break_holder] --> this.canvas = canvas;<!-- [et_pb_line_break_holder] --> this.options = defaults(options || {}, this.options);<!-- [et_pb_line_break_holder] --> this.init();<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Default options<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.options = {<!-- [et_pb_line_break_holder] --> density: 10, // Affects how many poitns are created<!-- [et_pb_line_break_holder] --> speed: 10, // Time in seconds to shift points<!-- [et_pb_line_break_holder] --> sync: false, // Should points move in sync<!-- [et_pb_line_break_holder] --> distance: 100, // Distance to move points<!-- [et_pb_line_break_holder] --> lineColor: "0, 0, 0,0.2",<!-- [et_pb_line_break_holder] --> circleColor: "0, 0, 0,0.2",<!-- [et_pb_line_break_holder] --> radius: 20,<!-- [et_pb_line_break_holder] --> lineWidth: 1,<!-- [et_pb_line_break_holder] --> lines: 3, // Number of closest lines to draw<!-- [et_pb_line_break_holder] --> updateClosest: false, // Update closet points each loop<!-- [et_pb_line_break_holder] --> mouse: true // Link to mouse or random<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Setup everything<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.init = function() {<!-- [et_pb_line_break_holder] --> this.width = window.innerWidth;<!-- [et_pb_line_break_holder] --> this.height = window.innerHeight;<!-- [et_pb_line_break_holder] --> this.target = {<!-- [et_pb_line_break_holder] --> position: {<!-- [et_pb_line_break_holder] --> x: this.width / 2,<!-- [et_pb_line_break_holder] --> y: this.height /2<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Setup canvas<!-- [et_pb_line_break_holder] --> this.canvas.width = this.width;<!-- [et_pb_line_break_holder] --> this.canvas.height = this.height;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.ctx = canvas.getContext("2d");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> window.addEventListener("resize", this.resize.bind(this));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (this.options.mouse === true && !("ontouchstart" in window)) {<!-- [et_pb_line_break_holder] --> window.addEventListener("mousemove", this.mousemove.bind(this));<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.points = [];<!-- [et_pb_line_break_holder] --> for (var x = 0; x < this.width; x = x + this.width / this.options.density) {<!-- [et_pb_line_break_holder] --> for (<!-- [et_pb_line_break_holder] --> var y = 0;<!-- [et_pb_line_break_holder] --> y < this.height;<!-- [et_pb_line_break_holder] --> y = y + this.height / this.options.density<!-- [et_pb_line_break_holder] --> ) {<!-- [et_pb_line_break_holder] --> var point = new Point(<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> x: x + Math.random() * this.width / this.options.density,<!-- [et_pb_line_break_holder] --> y: y + Math.random() * this.height / this.options.density<!-- [et_pb_line_break_holder] --> },<!-- [et_pb_line_break_holder] --> this.ctx,<!-- [et_pb_line_break_holder] --> this.points.length + 1,<!-- [et_pb_line_break_holder] --> this.options<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] --> this.points.push(point);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Setup Circles<!-- [et_pb_line_break_holder] --> for (var i in this.points) {<!-- [et_pb_line_break_holder] --> this.points[i].circle = new Circle(this.points[i], this.ctx, this.options);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.findClosest(); // Points<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.animate(); // Start the loop<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.shiftPoints(); // Start the tween loop<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> if (this.options.mouse === false) {<!-- [et_pb_line_break_holder] --> this.moveTarget(); // Start the random target loop<!-- [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] --> * Cycles through each Point and finds its neighbors<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.findClosest = function() {<!-- [et_pb_line_break_holder] --> for (var i = 0; i < this.points.length; i++) {<!-- [et_pb_line_break_holder] --> // Save the point<!-- [et_pb_line_break_holder] --> var point = this.points[i];<!-- [et_pb_line_break_holder] --> // Reset<!-- [et_pb_line_break_holder] --> point.closest = [];<!-- [et_pb_line_break_holder] --> // Cycle through the others<!-- [et_pb_line_break_holder] --> for (var j = 0; j < this.points.length; j++) {<!-- [et_pb_line_break_holder] --> // Point to test<!-- [et_pb_line_break_holder] --> var testPoint = this.points[j];<!-- [et_pb_line_break_holder] --> if (point.id !== testPoint.id) {<!-- [et_pb_line_break_holder] --> var placed = false,<!-- [et_pb_line_break_holder] --> k;<!-- [et_pb_line_break_holder] --> for (k = 0; k < this.options.lines; k++) {<!-- [et_pb_line_break_holder] --> if (!placed) {<!-- [et_pb_line_break_holder] --> if (typeof point.closest[k] === "undefined") {<!-- [et_pb_line_break_holder] --> point.closest[k] = testPoint;<!-- [et_pb_line_break_holder] --> placed = true;<!-- [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] --> for (k = 0; k < this.options.lines; k++) {<!-- [et_pb_line_break_holder] --> if (!placed) {<!-- [et_pb_line_break_holder] --> if (<!-- [et_pb_line_break_holder] --> point.distanceTo(testPoint) < point.distanceTo(point.closest[k])<!-- [et_pb_line_break_holder] --> ) {<!-- [et_pb_line_break_holder] --> point.closest[k] = testPoint;<!-- [et_pb_line_break_holder] --> placed = true;<!-- [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] --> * Animation Loop<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.animate = function() {<!-- [et_pb_line_break_holder] --> var i;<!-- [et_pb_line_break_holder] --> // Should we recalucate closest?<!-- [et_pb_line_break_holder] --> if (this.options.updateClosest) {<!-- [et_pb_line_break_holder] --> this.findClosest();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Calculate Opacity<!-- [et_pb_line_break_holder] --> for (i in this.points) {<!-- [et_pb_line_break_holder] --> if (this.points[i].distanceTo(this.target, true) < 5000) {<!-- [et_pb_line_break_holder] --> this.points[i].opacity = 0.4;<!-- [et_pb_line_break_holder] --> this.points[i].circle.opacity = 0.6;<!-- [et_pb_line_break_holder] --> } else if (this.points[i].distanceTo(this.target, true) < 10000) {<!-- [et_pb_line_break_holder] --> this.points[i].opacity = 0.2;<!-- [et_pb_line_break_holder] --> this.points[i].circle.opacity = 0.3;<!-- [et_pb_line_break_holder] --> } else if (this.points[i].distanceTo(this.target, true) < 30000) {<!-- [et_pb_line_break_holder] --> this.points[i].opacity = 0.1;<!-- [et_pb_line_break_holder] --> this.points[i].circle.opacity = 0.2;<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> this.points[i].opacity = 0.05;<!-- [et_pb_line_break_holder] --> this.points[i].circle.opacity = 0.05;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Clear<!-- [et_pb_line_break_holder] --> this.ctx.clearRect(0, 0, this.width, this.height);<!-- [et_pb_line_break_holder] --> for (i in this.points) {<!-- [et_pb_line_break_holder] --> this.points[i].drawLines();<!-- [et_pb_line_break_holder] --> this.points[i].circle.draw();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Loop<!-- [et_pb_line_break_holder] --> window.requestAnimationFrame(this.animate.bind(this));<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Starts each point in tween loop<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.shiftPoints = function() {<!-- [et_pb_line_break_holder] --> for (var i in this.points) {<!-- [et_pb_line_break_holder] --> this.points[i].shift();<!-- [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] --> * Make sure the canvas is the right size<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.resize = function() {<!-- [et_pb_line_break_holder] --> this.width = window.innerWidth;<!-- [et_pb_line_break_holder] --> this.height = window.innerHeight;<!-- [et_pb_line_break_holder] --> this.canvas.width = this.width;<!-- [et_pb_line_break_holder] --> this.canvas.height = this.height;<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Mouse Move Event - Moves the target with the mouse<!-- [et_pb_line_break_holder] --> * @param event {Object} Mouse event<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.mousemove = function(event) {<!-- [et_pb_line_break_holder] --> if (event.pageX || event.pageY) {<!-- [et_pb_line_break_holder] --> this.target.position.x = event.pageX;<!-- [et_pb_line_break_holder] --> this.target.position.y = event.pageY;<!-- [et_pb_line_break_holder] --> } else if (event.clientX || event.clientY) {<!-- [et_pb_line_break_holder] --> this.target.position.x =<!-- [et_pb_line_break_holder] --> e.clientX +<!-- [et_pb_line_break_holder] --> document.body.scrollLeft +<!-- [et_pb_line_break_holder] --> document.documentElement.scrollLeft;<!-- [et_pb_line_break_holder] --> this.target.position.y =<!-- [et_pb_line_break_holder] --> e.clientY + document.body.scrollTop + document.documentElement.scrollTop;<!-- [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] --> * Randomly move the target<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Animate.prototype.moveTarget = function() {<!-- [et_pb_line_break_holder] --> var _this = this;<!-- [et_pb_line_break_holder] --> TweenLite.to(this.target.position, 2, {<!-- [et_pb_line_break_holder] --> x: Math.random() * (this.width - 200) + 100,<!-- [et_pb_line_break_holder] --> y: Math.random() * (this.height - 200) + 100,<!-- [et_pb_line_break_holder] --> ease: Expo.easeInOut,<!-- [et_pb_line_break_holder] --> onComplete: function() {<!-- [et_pb_line_break_holder] --> _this.moveTarget();<!-- [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] --> * Point Constructor<!-- [et_pb_line_break_holder] --> * @param position {Object} set of x and u coords<!-- [et_pb_line_break_holder] --> * @param ctx {Object} Canvas context to draw on<!-- [et_pb_line_break_holder] --> * @param options {Object} options passed from main function<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function Point(position, ctx, id, options) {<!-- [et_pb_line_break_holder] --> this.options = options || {};<!-- [et_pb_line_break_holder] --> this.id = id;<!-- [et_pb_line_break_holder] --> this.ctx = ctx;<!-- [et_pb_line_break_holder] --> this.position = position || { x: 0, y: 0 };<!-- [et_pb_line_break_holder] --> this.origin = {<!-- [et_pb_line_break_holder] --> x: this.position.x,<!-- [et_pb_line_break_holder] --> y: this.position.y<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --> this.opacity = 0;<!-- [et_pb_line_break_holder] --> this.closest = [];<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Caluclates the distance to another point<!-- [et_pb_line_break_holder] --> * @param point {Object} Another Point<!-- [et_pb_line_break_holder] --> * @param abs {Boolean} Return the absolute value or not<!-- [et_pb_line_break_holder] --> * @returns {Number}<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Point.prototype.distanceTo = function(point, abs) {<!-- [et_pb_line_break_holder] --> abs = abs || false;<!-- [et_pb_line_break_holder] --> var distance =<!-- [et_pb_line_break_holder] --> Math.pow(this.position.x - point.position.x, 2) +<!-- [et_pb_line_break_holder] --> Math.pow(this.position.y - point.position.y, 2);<!-- [et_pb_line_break_holder] --> return abs ? Math.abs(distance) : distance;<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Draws lines to the closet points<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Point.prototype.drawLines = function() {<!-- [et_pb_line_break_holder] --> for (var i in this.closest) {<!-- [et_pb_line_break_holder] --> if (this.opacity > 0) {<!-- [et_pb_line_break_holder] --> this.ctx.beginPath();<!-- [et_pb_line_break_holder] --> this.ctx.moveTo(this.position.x, this.position.y);<!-- [et_pb_line_break_holder] --> var test = i + 1;<!-- [et_pb_line_break_holder] --> if (!this.closest[test]) {<!-- [et_pb_line_break_holder] --> test = 0;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> this.ctx.lineCap = "round";<!-- [et_pb_line_break_holder] --> this.ctx.strokeStyle =<!-- [et_pb_line_break_holder] --> "rgba(" + this.options.lineColor + ", " + this.opacity + ")";<!-- [et_pb_line_break_holder] --> this.ctx.lineWidth = this.options.lineWidth;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.ctx.lineTo(this.closest[i].position.x, this.closest[i].position.y);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> this.ctx.stroke();<!-- [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] --> * Tween loop to move each point around it's origin<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Point.prototype.shift = function() {<!-- [et_pb_line_break_holder] --> var _this = this,<!-- [et_pb_line_break_holder] --> speed = this.options.speed;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Random the time a little<!-- [et_pb_line_break_holder] --> if (this.options.sync !== true) {<!-- [et_pb_line_break_holder] --> speed -= this.options.speed * Math.random();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> TweenLite.to(this.position, speed, {<!-- [et_pb_line_break_holder] --> x:<!-- [et_pb_line_break_holder] --> this.origin.x -<!-- [et_pb_line_break_holder] --> this.options.distance / 2 +<!-- [et_pb_line_break_holder] --> Math.random() * this.options.distance,<!-- [et_pb_line_break_holder] --> y:<!-- [et_pb_line_break_holder] --> this.origin.y -<!-- [et_pb_line_break_holder] --> this.options.distance / 2 +<!-- [et_pb_line_break_holder] --> Math.random() * this.options.distance,<!-- [et_pb_line_break_holder] --> ease: Expo.easeInOut,<!-- [et_pb_line_break_holder] --> onComplete: function() {<!-- [et_pb_line_break_holder] --> _this.shift();<!-- [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] --> * Circle Constructor<!-- [et_pb_line_break_holder] --> * @param point {Object} Point object<!-- [et_pb_line_break_holder] --> * @param ctx {Object} Context to draw on<!-- [et_pb_line_break_holder] --> * @param options {Object} options passed from main function<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function Circle(point, ctx, options) {<!-- [et_pb_line_break_holder] --> this.options = options || {};<!-- [et_pb_line_break_holder] --> this.point = point || null;<!-- [et_pb_line_break_holder] --> this.radius = this.options.radius || null;<!-- [et_pb_line_break_holder] --> this.color = this.options.color || null;<!-- [et_pb_line_break_holder] --> this.opacity = 0;<!-- [et_pb_line_break_holder] --> this.ctx = ctx;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Draws Circle to context<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->Circle.prototype.draw = function() {<!-- [et_pb_line_break_holder] --> if (this.opacity > 0) {<!-- [et_pb_line_break_holder] --> this.ctx.beginPath();<!-- [et_pb_line_break_holder] --> this.ctx.arc(<!-- [et_pb_line_break_holder] --> this.point.position.x,<!-- [et_pb_line_break_holder] --> this.point.position.y,<!-- [et_pb_line_break_holder] --> this.options.radius,<!-- [et_pb_line_break_holder] --> 0,<!-- [et_pb_line_break_holder] --> 2 * Math.PI,<!-- [et_pb_line_break_holder] --> false<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] --> this.ctx.fillStyle =<!-- [et_pb_line_break_holder] --> "rgba(" + this.options.circleColor + ", " + this.opacity + ")";<!-- [et_pb_line_break_holder] --> this.ctx.fill();<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Get the balls rolling<!-- [et_pb_line_break_holder] -->new Animate(document.getElementById("canvas"));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/**<!-- [et_pb_line_break_holder] --> * Utility Function to set default options<!-- [et_pb_line_break_holder] --> * @param object {object}<!-- [et_pb_line_break_holder] --> * @param src {object}<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] -->function defaults(object, src) {<!-- [et_pb_line_break_holder] --> for (var i in src) {<!-- [et_pb_line_break_holder] --> if (typeof object[i] === "undefined") {<!-- [et_pb_line_break_holder] --> object[i] = src[i];<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> return object;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>