Interactive Letters 🌈✨ by @matbutom
¡Bienvenidos al mágico mundo de Interactive Letters! Este proyecto es una colección de tres obras interactivas diseñadas especialmente para despertar la curiosidad de los niños por las letras, mostrándoles que son mucho más que simples herramientas para escribir: ¡son formas llenas de color, movimiento y diversión!
A través del tacto y la cámara web, los pequeños exploradores podrán jugar con las letras de maneras sorprendentes, fomentando su creatividad y su aprecio por el alfabeto.
Este cofre de maravillas contiene tres experiencias únicas:
* Sumérgete en un lienzo donde las letras cobran vida al tocarlas. Cada toque las hace saltar, girar y bailar, creando un espectáculo visual lleno de energía. ¡Ideal para que los niños exploren la forma de las letras de una manera táctil y juguetona!
camera.letters.effects.mov
* ¡Prepárate para verte rodeado de un mágico espejo de letras! Al moverte frente a la cámara web, tus movimientos se transforman en un dinámico patrón de letras que imitan tus gestos. ¡Una forma divertida de conectar su propia imagen con el mundo de las letras!
hand.pushing.letters.mov
* ¡Usa tus manos como imanes de letras! Al interactuar con la cámara web, las letras se sentirán atraídas por tus manos, orbitando a su alrededor como pequeñas lunas. ¡Una experiencia intuitiva que permite a los niños sentir la fuerza y la forma de las letras con sus propios movimientos!
crazy.gravity.letters.mov
Este proyecto ha sido creado utilizando las siguientes herramientas y bibliotecas:
- Mechanic: El corazón creativo para el diseño generativo interactivo.
- p5.js: Una librería de JavaScript que hace que la creación de gráficos interactivos sea accesible y divertida.
- Handtrack.js: Un modelo de detección de manos para las interacciones mágicas con la cámara.
- Matter.js: Un motor de física 2D para dar vida a las letras con movimientos realistas.
- JavaScript, HTML y CSS: Los lenguajes web fundamentales para dar forma a esta experiencia interactiva.
Si eres curioso y quieres ver cómo se hizo la magia, ¡el código está abierto para ti! Clona este repositorio y sumérgete en el corazón de Interactive Letters:
Si quieres experimentar localmente (¡y quizás crear tus propias maravillas!):
```javascript
// clona el repositorio desde tu terminal!
gh repo clone matbutom/interactive-letters
// dirigete al proyecto
cd interactive-letters
// instala las dependencias de npm
npm install
// corre el proyecto localmente en tu máquina :)
npm run dev
```