1. Andres Vargas
  2. bolitas

Commits

Andres Vargas  committed 10b3407

revision carlos

  • Participants
  • Parent commits d5b545c
  • Branches default

Comments (0)

Files changed (4)

File js/images.js

View file
 
 	var canvas = Raphael("canvas", width, heigth);
 	// dibuja background
-	back = canvas.rect(0, 0, width, heigth, 10);
-	back.attr({fill:"black"});
-	back.toBack();
 
 	new Space(canvas, width, heigth);
 	
 	
 	esperm = new  Esperm(canvas);
+	ovule = new Ovulo(canvas);
+		
+	ovule.update([width/2,heigth/2]);
+	ovule.draw();
 	window.onclick = function ( event ) {
 		console.log(event);
 		pos = [event.x, event.y];
 		esperm.update(pos);
 		esperm.draw();
 	}
-	/*	
-	window.onmousemove = function ( e ) {
-		pos_ = [e.x,e.y];
-		esperm.rotate(pos_);
-	}
-	*/
 }
 

File js/ovulo.js

View file
+
+
+
+var Ovulo = function (canvas) {
+	var e = this;
+	e.timerId = null;
+	e.old_pos = null;
+	e.old_angle = 360;
+	e.is_lock = false;
+	var PATH = 4;
+	var IMG_PATH ="/images/ovule_loop/ovule_loop_000";
+	e.HEIGHT = 167;
+	e.WIDTH = 135;
+	var TIMER = 50;
+	
+	this._get_ovule_image = function (position, canvas) {
+		var img = canvas.image( e._get_image(position), 0,0, e.WIDTH,e.HEIGHT)
+		img.toFront();
+		img.hide();
+		return img;
+	
+	}	
+	this._get_image = function ( sequence ) {
+		if( sequence < 10 ) {
+		   sequence = '0' + sequence;
+		}
+		var tmp =  IMG_PATH + sequence + ".png"
+		return tmp;
+	}
+
+	this._distancia = function ( pos1, pos2) {
+		t = Math.pow(pos2[x]-pos1[x],2) + Math.pow(pos2[y]-pos1[y],2);
+		return  Math.sqrt(t);	
+	}
+	this.get_ovule = function ( pos ) {
+		var tmp_e  =  e._array_images[pos];
+		e._array_images.hide();
+		tmp_e.show();
+		return tmp_e;
+	}
+	this._timer = function () {
+		var i = 0;
+		if( e.ovule == undefined ) {
+			e._array_images.translate(e.pos[x], e.pos[y]);
+			e.ovule = e.get_ovule(i);
+			i++;
+			e.is_lock = false;
+		}
+		e.timerId = setInterval(function (){
+				if( e.is_lock  == false ) {
+					if( i > 14 ) {
+						i= 0;
+					}	
+					e.ovule = e.get_ovule(i);	
+					i++;
+				}
+			}, TIMER);
+
+	}
+	this.update = function (pos) {
+		e.pos = pos;
+		e.pos[y] = e.pos[y] - (e.HEIGHT/2);
+		e.pos[x] = e.pos[x] - (e.WIDTH/2);
+		clearInterval(e.timerId);
+		if( e.old_pos == null ) {
+			e.old_pos = pos;
+		}
+		e._timer();
+	}
+	this.draw = function () {	
+		pos = e.pos;
+		old_pos = e.old_pos;
+		if( e.ovule == undefined ) return 
+		angle = e._rotate( pos );
+
+		e._array_images.animate({rotation:angle},1000, function  () {
+			e._array_images.animate({x:pos[x], y:pos[y]},2000, function() {
+					});
+		});
+		e.old_pos = pos;
+	}
+	this._rotate = function ( pos ) {
+
+		var 	pos_inicial = e.old_pos;
+		var	pos_mouse = pos;
+		// show angle
+		//new Line(canvas, pos_inicial, pos_mouse,"green");
+		var angle = Raphael.angle( 
+					  pos_inicial[x], pos_inicial[y],
+					  pos_mouse[x], pos_mouse[y]
+					 // pos_terc[x], pos_terc[y]
+					 );
+		e.angle = angle;
+		e.old_angle = angle;
+		return angle;
+	}
+
+	// Init Object
+	e._array_images = canvas.set();
+	for(var i=0; i< 15; i++) {
+		e._array_images.push( e._get_ovule_image(i, canvas) );
+	}
+	e._array_images.hide();
+
+}
+	
+
+

File js/space.js

View file
 		this.opacity = Math.random() * 0.8 + 0.1;
 		color = "white";
 		bolita =  context.circle(this.x, this.y, this.radio * this.z  ).attr({fill:color, opacity: this.opacity});
-		bolita.animate({cx:width}, Math.floor(Math.random()* this.vel, function () { this.remove()}));
+		me.bolita = bolita;
+		bolita.animate({cx:width +30 }, Math.floor(Math.random()*this.vel), function () { 
+			me.bolita.remove()
+		});
 	}
 
 	for( i = 0; i< 100; i++) {

File main.html

View file
 <script src="js/raphael/raphael.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 <script src="js/utils.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 <script src="js/esperm.js" type="text/javascript" language="javascript" charset="utf-8"></script>
+<script src="js/ovulo.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 <script src="js/space.js" type="text/javascript" language="javascript" charset="utf-8"></script>
 <script src="js/images.js" type="text/javascript" language="javascript" charset="utf-8"></script>
+<style>
+body {
+	background-color:black;
+	
+}
+
+</style>
 </head>
 <body id="" >
 <div id="canvas">