Una serie de tutoriales (sin orden específico) para programación creativa. Cada una de las carpetas tiene como nombre la categoría general donde se ubica el tema del tutorial. Para tener una guía de estudio, a continuación tenemos una lista de temas importantes y algunos recursos externos para complementar los tutoriales.
Cada programador creativo tiende a desarrollar intereses específicos sobre algunas de estas áreas dependiendo de sus preguntas e intenciones creativas. Esto quiere decir que no deben volverse expertos en cada uno de estos temas, pero si es importante reconocerlos y en algún momento tocarlos para cuando se vuelvan necesarios en sus proyectos.
Como referencia, esta es una lista que va sumando niveles de complejidad.
Conceptos básicos
Infraestructura básica de la web
Tipos de datos
Objetos
Manipulación del DOM
Nivel intermedio
Clases
Canvas
Animación
API
Compiladores Es de nivel intermedio pero fundamental para el trabajo que hacemos acá
Avanzado
Manipulación de pixeles
Algoritmos
El elemento de HTML5 donde podemos crear todo tipo de aplicaciones complejas como dibujo generativo, videojuegos, procesamiento de imagen, etc. Entender el <canvas> es fundamental para todos, les recomiendo investigarlo a fondo.
API:
- http://www.html5canvastutorials.com/
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- WebGL: https://webglfundamentals.org
Ejemplos
- requestAnimationFrame (RAF): https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
- Video tutorial básico de RAF: https://www.youtube.com/watch?v=rNsC1VI9388
- Tutorial requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
- Concepto general: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
- Como crear filtros: https://www.html5rocks.com/en/tutorials/canvas/imagefilters/
- Explicación de kernels: https://setosa.io/ev/image-kernels/
- Easing: https://easings.net/
- Flocks (El articulo de Craig Raynolds): http://www.cs.toronto.edu/~dt/siggraph97-course/cwr87/
- Flocks simplificado: https://gamedevelopment.tutsplus.com/tutorials/3-simple-rules-of-flocking-behaviors-alignment-cohesion-and-separation--gamedev-3444
- Boids en pseudocódigo: http://www.kfish.org/boids/pseudocode.html
- Lista de ejemplos sencillos con algoritmos para dibujo generativo: http://www.generative-gestaltung.de/2/#sketches
- Explicaciones y ejemplos de arte generativo: https://inconvergent.net/generative/
- Ejemplos de sistemas complejos: https://www.complexity-explorables.org/
- Nature of code: https://natureofcode.com/book/introduction/
- Algoritmos en JS: https://github.com/trekhleb/javascript-algorithms
- Libro, "Eloquent JavaScript": https://eloquentjavascript.net/
- Lista de recursos "Awseome Creative Coding": https://github.com/terkelg/awesome-creative-coding