Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 5
Lección 4: Vectores- Introducción a vectores
- Desafío: caminante vectorial
- Más matemáticas vectoriales
- Desafío: sable de luz
- Magnitud de un vector y normalización
- Desafío: visualizador de magnitud
- Movimiento de vectores
- Desafío: automóvil que frena
- Funciones estáticas contra métodos de instancia
- Desafío: funciones estáticas
- Movimiento interactivo de vectores
- Desafío: perseguidor del ratón
- Proyecto: criaturas computacionales
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Funciones estáticas contra métodos de instancia
Antes de llegar al Algoritmo #3 (acelerar hacia el ratón), necesitamos cubrir un aspecto muy importante sobre trabajar con vectores y el objeto
PVector
: la diferencia entre usar funciones estáticas e instancias de métodos.Olvidándonos acerca de los vectores por un momento, echa un vistazo al siguiente código:
var x = 0;
var y = 5;
x = x + y;
Muy sencillo, ¿verdad?
x
tiene el valor de 0, le sumamos y
, y ahora x
es igual a 5. Podríamos escribir el código correspondiente muy fácilmente con base en lo que hemos aprendido sobre PVector
.var v = new PVector(0,0);
var u = new PVector(4,5);
v.add(u);
El vector v tiene el valor de (0,0), le sumamos u y ahora v es igual a (4,5). Fácil, ¿verdad?
Echemos un vistazo a otro ejemplo de algunas matemáticas sencillas:
var x = 0;
var y = 5;
var z = x + y;
x
tiene el valor de 0, le sumamos y
y almacenamos el resultado en una nueva variable z
. El valor de x
no cambia en este ejemplo, ¡y tampoco el de y! Esto puede parecer como un punto trivial, y uno que es muy intuitivo cuando se trata de operaciones matemáticas con números. Sin embargo, no es tan obvio con operaciones matemáticas en PVector
. Vamos a intentar escribir el código con base en lo que sabemos hasta ahora.var v = new PVector(0,0);
var u = new PVector(4,5);
var w = v.add(u); // ¡Que no te engañen; ¡¡¡esto es incorrecto!!!
Lo anterior podría parecer una buena suposición, pero simplemente no es la forma en que el objeto
PVector
funciona. Si nos fijamos en la definición de add()
...PVector.prototype.add = function(v) {
this.x = this.x + v.x;
this.y = this.y + v.y;
};
...vemos que este código no logra nuestro objetivo. En primer lugar, no regresa un nuevo
PVector
(no hay ninguna declaración return
) y en segundo lugar, cambia el valor del PVector
sobre el cual es llamado. Para poder sumar dos objetos PVector
y regresar el resultado como un nuevo PVector
, debemos usar la función "estática" add()
.Una función "estática" es una función que está definida sobre un objeto, pero no cambia las propiedades del objeto. Entonces ¿por qué definirla sobre el objeto? Por lo general, tiene algo que ver con el objeto, así que es lógico asociarla a él. Trata al objeto más como un espacio de nombres (namespace). Por ejemplo, todas las funciones estáticas en
PVector
realizan algún tipo de manipulación en objetos PVector
que se le pasan y siempre regresan algún valor. También podríamos definir esas funciones globalmente, pero de esta manera, evitamos funciones globales y tenemos mejores formas de agrupar funcionalidad relacionada.Vamos a contrastar. Aquí está cómo utilizamos la instancia del método
add()
:v.add(u);
Esa línea de código modificaría a
v
, así que no necesitaríamos guardar un valor de regreso. Por el contrario, aquí está cómo usamos la función estática add()
:var w = PVector.add(v, u);
Si no guardáramos el resultado de esa función en una variable, esa línea de código sería inútil, porque la versión estática no cambia a los propios objetos. Las funciones estáticas de
PVector
nos permiten realizar operaciones matemáticas genéricas sobre objetos PVector
sin tener que ajustar el valor de uno de los PVectors
de entrada.Aquí está cómo escribiríamos la versión estática de
add()
:PVector.add = function(v1, v2) {
var v3 = new PVector(v1.x + v2.x, v1.y + v2.y);
return v3;
};
Hay varias diferencias aquí:
- Definimos la función directamente en el objeto, no en su prototipo
- Nunca accedemos a la palabra clave
this
dentro de la función - Regresamos un valor de la función
El objeto PVector tiene versiones estáticas de
add()
, sub()
, mult()
y div()
. También tiene otras funciones estáticas adicionales que no existen como instancias de métodos, como angleBetween()
, dot()
y cross()
. Nos encontraremos utilizando estas funciones a medida que continuemos haciendo programas con PVector
.Este curso de "Simulaciones Naturales" es un derivado de "La Naturaleza del Código" por Daniel Shiffman, usado bajo una Licencia Creative Commons Reconocimiento-NoComercial 3.0 Unported.
¿Quieres unirte a la conversación?
- como se hace esto no entendi(5 votos)
- Desafío Automóvil que Frena:
var Car = function() {
this.position = new PVector(width/2, height/2);
this.velocity = new PVector(0, 0);
this.acceleration = new PVector(0, 0);
};
Car.prototype.update = function() {
if(this.velocity < 0){
this.velocity.add(this.acceleration);
} else {
this.velocity.add(this.acceleration);
this.velocity.limit(10);
this.position.add(this.velocity);
println(this.velocity);
}
};
Car.prototype.display = function() {
stroke(0);
strokeWeight(2);
fill(255, 0, 0);
rect(this.position.x-52, this.position.y-59, 60, 60);
rect(this.position.x-74, this.position.y-30, 100, 31);
fill(92, 92, 92);
ellipse(this.position.x, this.position.y, 30, 26);
ellipse(this.position.x-50, this.position.y, 30, 30);
};
Car.prototype.checkEdges = function() {
if (this.position.x > width) {
this.position.x = 0;
}
else if (this.position.x < 0) {
this.position.x = width;
}
};
var car = new Car();
draw = function() {
background(255, 255, 255);
if (keyIsPressed && keyCode === RIGHT){
car.acceleration.set(0.02, 0);
} else if(keyIsPressed && keyCode === LEFT){
car.acceleration.set(-0.2, 0);
} else {
car.acceleration.set(0, 0);
}
car.update();
car.checkEdges();
car.display();
};(3 votos)