La STEMFest – Arduinos, AR y educación

Hace dos semanas atrás se realizaba en Tauranga (New Zealand) un evento significativo.

La STEMFest atrajo a más de 3000 personas. Padres y niños pasearon por cuatro manzanas de la ciudad repletas de tecnología.

Universidades mostrando sus laboratorios de ciencias. Una compañía eléctrica con una réplica de una planta hidroeléctrica. Autos eléctricos. Simulaciones de terremotos. Todo listo para que los visitantes puedan interactuar, tocar, jugar.

Por mi lado, y junto a integrantes del grupo Junior Dev Tauranga, con el que organizamos meetups para fomentar el desarrollo de software, me tocó armar diferentes proyectos para que los niños pudieran interactuar, armar y desarmar, jugar con tecnología y, sobre todo, interesarse en ella para tenerla en cuenta como carrera en un futuro no muy lejano.

Para esto armé cuatro proyectos diferentes. Tres de ellos usando Arduinos: Un medidor de humedad en suelo; un medidor de temperatura; y un piano hecho con frutas.

Los dos primeros se presentaban desarmados y, mediante una guía, los asistentes podían armar el modelo. Probar diferentes posibilidades y descubrir el motivo de porqué funcionaba como lo hacía.

En el caso del piano hecho con frutas. Debido a que era algo más complejo. Yo hacía de presentador explicando la mecánica del dispositivo y luego, los asistentes, podían experimentar con este de diferentes formas.

Desde tocar un simple tono, pasando por crear una melodía, y hasta aprender sobre conductividad eléctrica agarrándose de las manos en grupo mientras el primero tomaba el cable de tierra y el último ejecutaba los sonidos.

El último proyecto, basado en realidad aumentada, se usó para incentivar a todos los asistentes a recorrer toda la feria. Este proyecto era una búsqueda del tesoro en el que, mediante el celular se accedía a una página Web que activaba la cámara del dispositivo y, mediante unos marcadores colocados en las cuatro manzanas del evento, los asistentes iban escaneando, viendo diferentes modelos 3D con los que podían interactuar y, una vez que los recolectaban a todos, volver a “base” para recoger su premio.

Todo este desarrollo tomó tiempo, pero claramente valió cada hora invertida.

El código fuente de cada proyecto se puede encontrar en un repo que armé para este caso: https://github.com/MatiasIac/STEMFestTauranga2019

También, cree dos videos, en mi canal de YouTube, explicando cómo armé el piano de frutas y el proyecto de realidad aumentada.

Espero les guste! 🙂

Realidad Aumentada en el navegador – Parte II

Hace una semana les contaba que había estado experimentando con un par de frameworks y herramientas de realidad aumentada para el navegador.

Todo esto se debe a un evento en el que estoy participando donde estaremos enseñando a niños y adolescentes sobre programación, lógica y demás (StemFest), y para divertir un poco a los participantes (Que parece que serán 3000… sí, una locura :S) me puse a crear una aplicación que simule el juego de la búsqueda del tesoro.

Teniendo en cuenta las características del proyecto: Web + JavaScript. Este puede ser ejecutado por cualquier navegador en cualquier dispositvo (Celular o escritorio) y con esto, no tener la necesidad de crear una aplicación nativa para cada plataforma.

En fin, y manteniendo mi palabra, en vez de explicar el código paso a paso, paso a dejar el repositorio de código con todo el proyecto funcionando.

https://github.com/MatiasIac/STEMFestTauranga2019

(El proyecto irá variando en esta semana, pero el core seguirá siendo el mismo 🙂 )

Creando realidad aumentada en el navegador

Image

Hace muchos años atrás (Como 10) hablaba en un evento público sobre el futuro de algunas tecnologías. Que ya había empresas que estaba apostando a ellas y que las herramientas eran cada vez más accesibles y, por lo tanto, más fáciles de usar e implementar.

Hoy, cuando se habla de realidad aumentada siempre pensamos en celulares y aplicaciones al estilo PokemonGO. Aplicaciones construidas con Unity3D, ARKit y otros. Pero nos olvidamos de los principios de la realidad aumentada y las posibilidades que nos brindaba con equipos de casi costo nulo (Nulo en el sentido de que cualquier computadora o dispositivo con cámara podía ejecutarlas).

En fin… este tipo de tecnología nunca murió y, por el contrario, con mayor poder de cómputo en los dispositivos volvió con más fuerza.

Hoy (Hace unos días, pero es el momento en el que escribo el post en contraposición de cuando será publicado :)), me crucé con AR.js, una herramienta que, en conjunto con otras como Three.js y AFrame, nos permite llevar el mundo de la realidad aumentada a la Web. Y cuando digo “Web” me refiero a HTML + JavaScript puro y duro.

Por esto decidí hacer un pequeño ejemplo (Foto que acompaña el post) y paso a dejarlo por acá:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs>
            <a-assets>
                <a-asset-item id="avo" src="avo/Avocado.gltf"></a-asset-item>
            </a-assets>
            <a-marker-camera preset='hiro'>
                <a-entity gltf-model="#avo" scale="0.3 0.3 0.3"></a-entity>
            </a-marker-camera>
        </a-scene>
    </body>
</html>