Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 4
Lección 8: Herramientas avanzadas de desarrolloUsar ProcessingJS fuera de Khan Academy
Aquí tenemos un ambiente de edición bastante bueno: se actualiza en tiempo real y te da información útil sobre los errores y proporciona los arrastra-números y los selectores de color. Nuestro ambiente está diseñado con nuevos programadores en mente: tenemos miles cada día, y queremos hacer que aprender JavaScript sea más fácil para ellos.
Una vez que te familiarices con JavaScript y empieces a desarrollar programas más largos y complejos, podrás encontrar que quieres características diferentes en tu ambiente de codificación. Tal vez no quieras actualizaciones en tiempo real o quieras poner tu código en diferentes archivos o quieras integrar tu código con un sistema de control de versiones. O quizá solo quieras ser capaz de integrar tus programas de ProcessingJS en tu sitio web.
En ese caso, quizá quieras empezar a escribir tus programas de ProcessingJS fuera de Khan Academy. No puedes simplemente copiar y pegar tu código en un archivo en tu computadora de escritorio y ver que funcione el programa. ¿Por qué no?
ProcessingJS es una biblioteca construida sobre tecnologías web. Cuando programas con ella en Khan Academy, en realidad creamos una página web (archivo HTML) detrás de las cámaras, le pegamos una etiqueta
<canvas>, cargamos la biblioteca de ProcessingJS de JavaScript y luego ejecutamos el código de tu programa. Eso significa que si quieres trabajar en tu programa fuera de Khan Academy, necesitas crear un archivo HTML que también haga eso.
Aquí está un ejemplo que puedes usar para empezar:
Este ejemplo está construido usando nuestro ambiente de páginas web. Puedes copiarlo y pegarlo en un archivo HTML en cualquier otro ambiente de edición.
Si copiaste y pegaste el código de tu programa en esa plantilla, puedes encontrar que todo funciona perfectamente, ¡y puedes saltar de alegría! (O saltar y agarrar palos, si eres un castor).
Si las cosas no están funcionando de manera correcta, podría ser que la plantilla no esté usando exactamente la misma versión de ProcessingJS que usamos en Khan Academy. Nuestra versión está específicamente diseñada para ser usada dentro de KA, así que recomendamos usar la biblioteca oficial de ProcessingJS library cuando estés desarrollando fuera de KA.
Hay algunas diferencias notables entre nuestra versión de ProcessingJS y la oficial:
- KA usa
mouseIsPresseden lugar demousePressedpara la variable booleana global. Del mismo modo, KA usakeyIsPresseden lugar dekeyPressed. Eso significa que tienes que cambiarmouseIsPressedykeyIsPressedcuando copies y pegues tu código en la plantilla. - KA usa grados como unidad predeterminada para todos los parámetros de los ángulos en lugar de radianes. Si estás usando grados para los ángulos en tu programa, puedes convertirlos usando
radians(). - KA usa
getImage()ygetSound()para imágenes y sonidos, las cuales no existen en la versión oficial. Puedes usarPImagepara las imágenes y tendrás que crear etiquetas de<audio>para reproducir sonidos.
La versión oficial también tiene una gama de funcionalidad más amplia, como manipulación de imágenes y más capacidades 3D. Puedes explorar todo eso en su documentación.
Por supuesto, nos encantaría ver los programas que hagas fuera de Khan Academy, así que espero que los compartas una vez que hayas terminado, ya sea al convertirlos de regreso a nuestra versión de ProcessingJS o al compartirlos en nuestro ambiente de páginas web.
A continuación, voy a hablar mas sobre los editores de escritorio y las herramientas de depuración.
¿Quieres unirte a la conversación?
Hola, cuando paso mi código a un editor y creo una página web, las animaciones no funcionan, sólo aparece el dibujo estático. ¿Por qué sucede eso y cómo puedo resolverlo?(8 votos)- Aqui esta el problema, como se afirma arriba en la lección: en KA se usa getImage() y getSound() para imágenes y sonidos, las cuales no existen en la versión oficial. Para usar imágenes o sonido fuera de KA utiliza: PImage para las imágenes y tendrás que crear etiquetas de <audio> para reproducir sonidos. //creo que eso resolverá problemas futuros. -YO también me encontré con problemas en las imagenes. Probarè con PImage.(2 votos)