Inspirado en este ejemplo de uso de d3js , le desafío a crear un lienzo (o su idioma de elección equivalente) en el que se mostrarán los rastros del puntero del mouse , con el siguiente giro:
El giro
Usted no debe mostrar los senderos de donde el puntero del ratón era , pero los "rastros" de donde va (podría) ser en el futuro.
Puedes hacerlo usando:
Una máquina del tiempo, o
Estimaciones probabilísticas basadas en movimientos previos del mouse
Supuestos
En caso de que no haya elegido la implementación de la máquina del tiempo, cuando el mouse no se mueve por más de un umbral de milisegundos, no puede mostrar ninguno de los senderos. (El valor del umbral depende de usted para elegir).
La imagen del cursor depende de usted y no tiene que ser la misma que la del cursor del sistema operativo (incluso puede dibujar círculos o puntos pequeños).
No se probará ninguna entrada malvada: puede asumir que los movimientos son suaves. La definición 'suave' para este caso es: si los movimientos del mouse fueran una función sobre los ejes xey del lienzo, sería una función continua.
Victorioso
La respuesta válida con la menor cantidad de caracteres en el código ganará. En caso de empate, ganará el que se publicó primero.
EDITAR: Ganará la respuesta válida con más votos a favor. En caso de empate, ganará el que se publicó primero. Puede ser creativo en la implementación o ser preciso con la predicción. Ya no soy el juez, todos lo somos :)
- Una respuesta válida debe incluir una forma de jugar (¡prueba! Me refería a la prueba), ya sea en una herramienta en línea o en un compilador / intérprete / runtime / etc de descarga gratuita.
fuente
Respuestas:
Javascript
Mi programa predice la dirección del puntero usando el promedio del cambio angular en la dirección de los últimos 20 movimientos del mouse. También utiliza la variación del cambio angular para crear una "nube" de posibles ubicaciones y direcciones del puntero. Se supone que el color de cada puntero en la "nube" representa la probabilidad de que sea la nueva posición del puntero del mouse, donde los colores más oscuros representan una mayor probabilidad. La distancia de la nube de puntero delante del mouse se calcula utilizando la velocidad del movimiento del mouse. No hace las mejores predicciones, pero se ve bien.
Aquí hay un violín: http://jsfiddle.net/5hs64t7w/4/
Es interesante ver el aumento del tamaño de la nube de puntero. Se puede configurar cambiando la
cloudSize
variable en la primera línea del programa. Aquí hay un violín con un tamaño de nube de 10: http://jsfiddle.net/5hs64t7w/5/Utilicé estas fuentes para obtener fórmulas para la media circular y la varianza:
Media circular: http://en.wikipedia.org/wiki/Circular_mean
Variación circular: http://www.ebi.ac.uk/thornton-srv/software/ PROCHECK / nmr_manual / man_cv.html
Aquí está el código si alguien está interesado:
fuente
Java
Decidí adoptar el enfoque de máquina del tiempo. Resulta que el ingrediente clave de una máquina del tiempo es java.awt.Robot. Mi programa te permite mover el mouse durante 10 segundos. Después de los 10 segundos, retrocede en el tiempo y recrea el movimiento del mouse, mientras lo predice perfectamente.
Aquí está el código:
fuente
Javascript vainilla
Solo para comenzar, aquí hay una predicción simple basada en dos valores. Las últimas
n
posiciones del mouse se memorizan y se mantienen en una cola, la predicción es una simple extrapolación lineal del primer y último elemento de la cola.Este es solo el código de predicción, el código completo que incluye la demostración se puede ver en this fiddle:
La demostración contiene un comentario en la predicción que le permite utilizar los dos últimos elementos en la cola para la predicción. Hace que el resultado sea más "en tiempo real", pero también menos "fluido".
Si alguien quiere usar el boilerplate workpara implementar un algoritmo de predicción diferente, siéntase libre. No es mucho trabajo de todos modos.
fuente
Javascript
El pasado es la mejor predicción para el futuro : yo y probablemente también alguien más
Mi solución es muy simple. Primero, aquí está el >>> Fiddle! <<<
Todo lo que hace es cambiar el camino pasado, para que parezca el camino futuro. Básicamente no hay matemáticas involucradas (lo sé, bastante aburrido). Puede ver fácilmente los errores, especialmente al mover el cursor en círculos. Es por eso que hice el camino tan corto;)
El código:
fuente