https://github.com/yanguadotdev/canvas-sketch-vite
🧠 Code-driven visuals 🕹️ Interactive grids & animations ⚙️ tweakpane-powered controls
https://github.com/yanguadotdev/canvas-sketch-vite
Last synced: 11 months ago
JSON representation
🧠 Code-driven visuals 🕹️ Interactive grids & animations ⚙️ tweakpane-powered controls
- Host: GitHub
- URL: https://github.com/yanguadotdev/canvas-sketch-vite
- Owner: yanguadotdev
- Created: 2025-07-19T16:13:14.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-19T20:25:42.000Z (11 months ago)
- Last Synced: 2025-07-19T23:01:36.219Z (11 months ago)
- Language: JavaScript
- Size: 44.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Siempre me llamó la atención la posibilidad de crear arte gráfico mediante la programación. Resulta que combinando código con matemáticas —específicamente trigonometría— se crean cosas _wao_ ✨.
Investigando encontré un curso en Domestika de [Bruno Imbrizi](https://www.domestika.org/es/courses/2729-codificacion-creativa-crea-piezas-visuales-con-javascript), que da una perfecta introducción a estas áreas del desarrollo web.
En este repo muestro todo lo que aprendí y pude crear a raíz de ese conocimiento. Las matemáticas son hermosas cuando las mezclas con código 🚀.
---
## 🔬 Proyectos incluidos
### ✨ 1. Orbital Glow
Simula una esfera rotatoria de puntos que reaccionan al mouse. Cada punto tiene una lógica de repulsión y rotación 3D. La interacción crea un efecto visual futurista y orgánico.
### 🌀 2. Oscilline
Una cuadrícula de líneas animadas que oscilan usando ruido Perlin. Las líneas cambian de rotación y grosor en base a parámetros como frecuencia, amplitud y velocidad. Ideal para estudiar animaciones paramétricas con `noise3D`.
### ✨ reactive-grid
Una grilla centrada con puntos que reaccionan al mouse. Al acercarte, se repelen; cuando te alejas, vuelven suavemente a su posición original usando interpolación. Lo más divertido es que puedes cambiar la forma de los puntos (círculos, rectángulos o ambos), su tamaño y hasta pintarlos por cuadrante o con banderas de diferentes países. ¡Tiene montones de controles para jugar! 🚀
### 🔍 4. GlyphCode
Convierte letras en una composición de glifos personalizados. Cada letra se rasteriza y se traduce en una grilla de caracteres como “+”, “/” o “=”, dependiendo del brillo de los píxeles. Una fusión entre arte ASCII y tipografía generativa.
---
## ⚖️ Tecnologías utilizadas
- [canvas-sketch](https://github.com/mattdesl/canvas-sketch) — framework principal para sketches generativos
- [canvas-sketch-util](https://github.com/mattdesl/canvas-sketch-util) — utilidades matemáticas y de ruido
- [Tweakpane](https://cocopon.github.io/tweakpane/) — para controlar parámetros en tiempo real
---
## 🌟 Reflexión
Este proyecto fue un antes y un después para mí como desarrollador frontend y creativo. Aprendí que código no sólo es lógica y estructura, también puede ser color, forma y emoción. ✨
> "La codificación creativa no es solo para artistas visuales. Es para cualquiera que quiera explorar el poder expresivo del código."
---
Gracias por leer ❤️