If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

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.
Diagrama del vector de aceleración del 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).
Diagrama de dx, dy
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 - x
  • dy = 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:
  1. Calcular un vector que apunta desde el objeto a la posición objetivo (ratón)
  2. Normalizar ese vector (al reducir su longitud a 1)
  3. Escalar ese vector a un valor adecuado (al multiplicarlo por algún valor)
  4. 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?

  • Avatar male robot johnny style para el usuario G. Raymundo Se Sant Cast
    No se ve ninguno de los programas en esta lección y las anteriores. Esperemos lo resuelvan pronto.
    (1 voto)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar hopper cool style para el usuario Alexander Lenin Quispe Arana
    Me podrían ayudar en el desafío: perseguidor del ratón?, no lo entiendo en nada.
    (1 voto)
    Avatar Default Khan Academy avatar para el usuario
  • Avatar male robot hal style para el usuario Sergio Yañez
    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)
    Avatar Default Khan Academy avatar para el usuario
    • Avatar male robot hal style para el usuario Rubén Jiménez
      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)
¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.