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
Movimiento interactivo de vectores
Para terminar esta sección, vamos a probar algo un poco más complejo y mucho más útil. Vamos a calcular de manera dinámica la aceleración de un objeto según una regla declarada en el algoritmo #3: el objeto se acelera hacia el ratón.
Cada vez que queramos calcular un vector con base en una regla o una fórmula, tenemos que calcular dos cosas: magnitud y dirección. Comencemos con la dirección. Sabemos que el vector de aceleración debe apuntar desde la posición del objeto hacia la posición del ratón. Digamos que el objeto está ubicado en el punto
(x, y) y el ratón en (mouseX, mouseY).En ese diagrama, vemos que podemos obtener un vector
(dx, dy) al restar la posición del objeto de la posición del ratón:dx = mouseX - xdy = mouseY - y
Vamos a volver a escribir lo anterior usando la sintaxis de
PVector. Suponiendo que estamos en la definición del objeto Mover, y por lo tanto tenemos acceso a la posción del objeto PVector, entonces tenemos:var mouse = new PVector(mouseX, mouseY);
// ¡Mira! Estamos usando el sub() estático porque queremos un nuevo PVector completamente nuevo
var dir = PVector.sub(mouse, position);Ahora tenemos un
PVector que apunta desde la posición del mover hasta el ratón. Si el objeto en realidad fuera a acelerarse usando ese vector, aparecería instantáneamente en la posición del ratón. Esto no sirve para hacer una buena animación, por supuesto, y lo que queremos hacer ahora es decidir qué tan rápido debe acelerarse ese objeto hacia el ratón.Para establecer la magnitud (cualquiera que sea) de nuestro PVector de aceleración, primero debemos ___ ese vector de dirección. Es correcto, tú lo has dicho. Normalizar. Si podemos encoger el vector hasta su vector unitario (de longitud uno) entonces tenemos un vector que nos indica la dirección y puede ser fácilmente escalado a cualquier valor. Uno multiplicado por algo equivale a algo.
var anything = ??;
dir.normalize();
dir.mult(anything);Para resumir, tomamos los siguientes pasos:
- Calcular un vector que apunta desde el objeto a la posición objetivo (ratón)
- Normalizar ese vector (al reducir su longitud a 1)
- Escalar ese vector a un valor adecuado (al multiplicarlo por algún valor)
- Asignar ese vector a la aceleración
Aquí está cómo se ve el programa, con esos pasos completamente implementados:
Puedes estarte preguntando por qué el círculo no se detiene cuando alcanza el objetivo. Es importante tener en cuenta que el objeto en movimiento no tiene conocimiento acerca de tratar de detenerse en su destino; solo sabe dónde está el destino y trata de ir hacia allá lo más rápido posible. Ir tan rápido como sea posible significa que inevitablemente va a excederse de la posición y tendrá que dar la vuelta, de nuevo yendo tan rápido como sea posible al destino, excediéndose de nuevo, y así sucesivamente. Permanece atento; en secciones posteriores aprenderemos cómo programar un objeto para que llegue a una posición (frenándose al acercarse).
Este ejemplo es extraordinariamente cercano al concepto de atracción gravitacional (en el cual el objeto es atraído a la posición del ratón). La atracción gravitacional se cubrirá con más detalle en la siguiente sección. Sin embargo, una cosa que falta aquí es que la fuerza de la gravedad (la magnitud de la aceleración) sea inversamente proporcional a la distancia. Esto significa que mientras más cerca esté el objeto del ratón, más rápido se acelera.
Vamos a ver cómo se vería este ejemplo con un arreglo de Movers (en vez de solo uno).
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?
No se ve ninguno de los programas en esta lección y las anteriores. Esperemos lo resuelvan pronto.(1 voto)
Me podrían ayudar en el desafío: perseguidor del ratón?, no lo entiendo en nada.(1 voto)
En el "Desafío: perseguidor del cursor", hay alguien que me pueda ayudar, porque estoy atascado con ese desafio y no he podido pasar de la primera etapa.(1 voto)- Mirad yo he añadido esto y por lo menos la primera parte la acepta:
var maxDir= new PVector(width,height);
var maxMag=maxDir.mag()
dentro del prototype.update, así creas un vector máximo y luego calculas su magnitud
/******/
Mover.prototype.update = function() {
var mouse = new PVector(mouseX, mouseY);
var dir = PVector.sub(mouse, this.position);
var maxDir= new PVector(width,height);
var maxMag=maxDir.mag();
var closeness=(maxMag-dir.mag())/maxMag;
dir.normalize();
dir.mult(closeness);
this.acceleration = dir;
this.velocity.add(this.acceleration);
this.velocity.limit(5);
this.position.add(this.velocity);
};(3 votos)