bugs life

just a bug roaming around

by anagnam

HTML

<script src="http://relumastudio.com/download/TweenMax.min.js"></script>
<script src="http://relumastudio.com/download/BezierPlugin.min.js"></script>
<script src="http://relumastudio.com/download/EasePack.min.js"></script>
<script src="http://relumastudio.com/download/jquery-1.9.1.min.js"></script>
<body>
<section id="wrap">
    <h3>Please wait for atleast 10 seconds to see the animation<h3>
    <section id="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </section>
</section>
</body>

CSS

*{
	margin: 0;
	padding: 0;
}

.box1, .box2, .box3{
width: 33px;
height: 33px;
background: url(http://relumastudio.com/download/bug.png) no-repeat;
position: relative;
top:0;
left:0;
overflow: hidden;
}

#wrap{
	width: 600px;
	height: 600px;
	margin: 0 auto;
	border: 1px solid red;
}

JavaScript

// targeting the div element
var box1 = $(".box1");
var box2 = $(".box2");
var box3 = $(".box3");
var box4 = $(".box4");
var box5 = $(".box5");
var box6 = $(".box6");


//helper function to get random position
function getRanPos(min, max) {
  return Math.random() * (max - min) + min;
}

//this is the insect object blueprint
var Insect = function(target){
	this.target = target;
	this.getTarget = function(){
		return this.target;
	};
};

Insect.prototype.wander = function(d,t){
	setInterval(function() {
		var posX1 = Math.floor(getRanPos(1, 600));
		var posY1 = Math.floor(getRanPos(1, 600));
		var posX2 = Math.floor(getRanPos(1, 600));
		var posY2 = Math.floor(getRanPos(1, 600));
		var posX3 = Math.floor(getRanPos(1, 600));
		var posY3 = Math.floor(getRanPos(1, 600));
		var posX4 = Math.floor(getRanPos(1, 500));
		var posY4 = Math.floor(getRanPos(1, 500));
		var posX5 = Math.floor(getRanPos(1, 500));
		var posY5 = Math.floor(getRanPos(1, 500));
		var posX6 = Math.floor(getRanPos(1, 500));
		var posY6 = Math.floor(getRanPos(1, 500));
		var s = getRanPos(50, 100); // interval between tween
		var delay = getRanPos(1, 10); // delay
		var c = getRanPos(0, 1); // curviness
		var setInVal = Math.floor(getRanPos(1000, 5000)); // set interval

		var moveto = new TweenMax(d, s, {css:{bezier:{type:"soft", 
		values:[
		{x:posX1, y:posY1}, 
		{x:posX2, y:posY2}, 
		{x:posX3, y:posY3}, 
		{x:posX4, y:posY4},
		{x:posX5, y:posY5},
		{x:posX6, y:posY6}
		], 
		autoRotate:true}}, ease:SlowMo.ease}, "+="+delay+"\"");
}, t);
};

//creating new insect object
var b1 = new Insect();
b1.wander(box1, 7500);
var b2 = new Insect();
b2.wander(box2, 8000);
var b3 = new Insect();
b2.wander(box3, 8500);