Contenido principal
Escenas animadas
Vimos cómo hacer varias escenas sencillas (pero nuestras escenas fueron lo que llamamos "estáticas"): no estaban animadas, ni tienen respuesta a la interacción con el usuario. Como veremos, se requiere un poco más de finura para manejar escenas más elegantes. Pero hey, ¡vamos a ponernos elegantes!
Hablemos primero acerca de la animación. ¿Qué pasa si quisiéramos mostrar a Winston en su fase de estrella de rock, tocando fuerte los tambores al llevar el ritmo? Normalmente haríamos eso al definir la función
draw para incluir código que dibuje figuras que mueven ligeramente su posición en cada cuadro. Aquí hay un ejemplo, donde la posición de las manos del baterista se basa en el valor actual de millis(), el número de milisegundos que han transcurrido:¿Qué pasa si agregamos eso como la escena 4 en nuestro ejemplo anterior? Vamos a mover el código dentro de una función
drawScene4() y a modificar nuestra lógica de mouseClicked.var drawScene4 = function() {
currentScene = 4;
background(194, 255, 222);
var x = cos(millis()*1);
var y = cos(millis()+98);
...
};
mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene1();
}
};Pruébalo a continuación. Haz clic algunas veces:
¿Observaste algo? Funcionó, pero no del todo. Pudimos ver a Winston con su batería, pero sus baquetas no se movían. ¡Qué triste! Es difícil hacer música cuando estás congelado en el tiempo. Tal vez ya encontraste el problema: no estamos llamando al código que dibuja las baquetas desde
draw(), así que solamente se llama una vez (no repetidamente) y por lo tanto solo dibuja las baquetas en el momento en que se llamó por primera vez. Tal vez también ya hayas adivinado la solución: definir una función draw() y llamar a drawScene4() cuando sea apropiado.draw = function() {
if (currentScene === 4) {
drawScene4();
}
};Pensemos en eso un poco: cuando definimos una función
draw() en nuestro código, entonces se llamará repetidamente (por omisión a 60 FPS), y en cada llamada, cuando la escena actual sea 4, entonces llamará a la función para dibujar la escena 4. Con cualquier otro valor, no intentará dibujar nada en absoluto, dejará lo que ya estaba en la pantalla. Todavía necesitamos hacer el dibujo de la escena inicial en mouseClicked, esta lógica solo se encarga de animar cada cuadro subsecuente.Algunos pueden pensar ¿por qué no tenemos simplemente una lógica que llama a cada función de dibujo dentro de
draw()? Bueno, ciertamente podrías, y eso significaría que si agregaras animación a las otras escenas, entonces funcionarían inmediatamente. Pero suponiendo que no animas tus otras escenas, eso significa que estás haciendo que la computadora redibuje esas escenas repetidamente sin ningún motivo. Desde una perspectiva de desempeño, eso no es bueno. Si sabemos que fácilmente podemos ahorrarle trabajo innecesario a la computadora, deberíamos hacerlo. Eso hará nuestros programas más rápidos y a los usuarios más felices.Muy bien, ahora que ya discutimos todo eso, he aquí la historia en su gloria animada y clicable. ¡Casi puedes oír el ritmo que sale de la escena 4!
¿Quieres unirte a la conversación?
Alguien me puede explicar esta parte, sé que la función cos saca el coseno y millis los milisegundos transcurridos, pero no entiendo para sirve esto en el movimiento en el eje X y Y de el cuerpo de Winston:var x = cos(millis()*1);
var y = cos(millis()+98);(8 votos)
En el minicurso aca en KhanAcademy no explican el mo==etodo millis ();
les dejo el link para que lo entiendan: https://www.khanacademy.org/computer-programming/millis-processingjs/5970545493409792(5 votos)- Pregunto, esto es una nueva forma de emplear la función draw(). Es dificil, por lo menos para mí , entender como puede funcionar la función draw en el lugar que se colocó. Se entiende lo que hace siguiendo la explicación de los dos últimos párrafos. Perfecto pero es extraño.
Veo que el código funciona igual ya sea si draw() se coloca antes o después de mouseClicked y no funciona bien si coloco el draw dentro del condicional que tiene la escena 4(4 votos)
Hola William debes considerar tres temas en particular:
1) La función draw() es una función especial que se ejecuta de forma concurrente para que sea mas facil la creación de efectos de animación.
2) La función drawScene4 tambien es una función, pero la misma ejecuta su código interno una sola vez.
3) Una función puede llamar a otra función, pero debido a que draw() es una función que se ejecuta automáticamente (muchas veces a parte que es especial) ésta puede llamar a otras funciones como drawScene4 pero no a la inversa, porque esta última solo puede ejecutarse una sola vez.
Nota 1: Es algo asi como las máquinas de peliculas que usan cintas, draw es el proyector y la cinta es drawScene4.
Nota 2: Debemos considerar que estamos hablando de animaciones, porque para que un código se ejecute varias veces tambien es posible usar bucles como for o while o loop, pero estas estructuras de control tienen otros fines.
Espero haber despejado tus dudas, saludos =)(21 votos)
excelente,me encanta,me gusta mas programar en javascript que etiquetar en HTML.Siento como mi cerebro trabaja.(4 votos)
alguien más tiene un problema para mostrar el contenido?
desde el principio del curso de jv no me permite ver contenidos que no sean de los desafios y tampoco se visualizan los derivados de otras personas. Me aparece el siguiente mensaje:
"Este contenido está bloqueado. Comunícate con el propietario del sitio para solucionar el problema."(2 votos)
Fíjate que sea la versión en español de Khan Academy que comienza como - es.khanacademy.org -. Si comienza en otras siglas como us, in, ar, etc. Probablemente, esa versión de Khan Academy, no es compatible con tu país, por lo que, se boquea el contenido.(1 voto)
no se si hay caray esta aquí porque vi su avatar jajajaja😂🤣😅🤣😂(2 votos)- ¿Por qué escriben las funciones como una expresión y no como una declaración?
var foo = fun () {};
en vez de
function foo () {};(1 voto) - Cuales son las aplicaciones que se deben usar para hacer todo eso(1 voto)
- Debes tener instalado en tu PC, un servidor apache, como XAMPP.
En la carpeta donde se guardan los archivos de tu proyecto en el XAMPP, debes tener instalada la carpeta de progressing (http://processingjs.org/download/)
Allí mismo debes crear un archivo index.html, y en otro archivo aparte un archivo.js con el código que estás trabajando en estos talleres de Khanacademy. Debes tener una etiqueta CANVAS en el index.html. Para vincular los archivos entre si, mira por favor algunos de los tutoriales que existen en la web.(2 votos)