creación del repo

author: sejo <sejo@texto-plano.xyz> 2021-05-24 17:31:42 -0500
committer: sejo <sejo@texto-plano.xyz> 2021-05-24 17:31:42 -0500
commit: a68ba2d63cc3abcd73c728c48eb14f34a2a7fb98 (patch)
tree: e159d5f35d9b1500a8d4c48c8cd303ecd908f9ac
download: jardinbit-a68ba2d63cc3abcd73c728c48eb14f34a2a7fb98.tar.gz
198 files changed, 9033 insertions, 0 deletions
diff --git a/README.txt b/README.txt
new file mode 100644
index 0000000..29f1da5
--- /dev/null
+++ b/README.txt
@@ -0,0 +1 @@
+archivos fuente y script generador del sitio jardinbit.neocities.org
diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..7bdec56
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+# genera sitio:
+# ./build.sh
+# re-genera sitio:
+# ./build.sh all 
+
+dir="agenda"
+titulo="🍃 jardínBit"
+for f in $(find src/ -iname "*md")
+do
+	nombrehtml=$(basename $f md)html
+	d=$(dirname $f)
+	if [ $d = "src" ] # archivos root
+	then
+		pathhtml="site/${nombrehtml}"
+		if [ $nombrehtml = "index.html" ]
+		then
+			echo "convirtiendo ${f} a ${pathhtml}..."
+			pandoc -H "src/estilo.html" -B "${d}/nav.html" -A "${d}/footer.html" -f markdown -t html5 -s --toc --toc-depth=2 -o $pathhtml $f
+			continue
+		fi
+	else
+		dir=${d#src/} # quita prefijo src/
+		pathhtml="site/${dir}/${nombrehtml}"
+	fi
+
+	if [[ $1 = "all" || $f -nt $pathhtml ]]
+	then
+		echo "convirtiendo ${f} a ${pathhtml}..."
+		if [[ $dir == "agenda" ]]
+		then
+			pandoc -H "src/estilo.html" -H "${d}/head.html" -T "$titulo" -B "${d}/nav.html" -A "${d}/footer.html" -f markdown -t html5 -s --toc --toc-depth=2 -o $pathhtml $f
+		else
+			pandoc -H "src/estilo.html" -H "${d}/head.html" -T "$titulo" -B "${d}/nav.html" -A "${d}/footer.html" -f markdown -t html5 -s --toc --toc-depth=3 --number-sections -o $pathhtml $f
+		fi
+
+	fi
+done
+
+echo "actualizando imágenes..."
+rsync -az src/img/ site/img/
+
+echo "ya quedó!"
diff --git a/colores.txt b/colores.txt
new file mode 100644
index 0000000..666f5ab
--- /dev/null
+++ b/colores.txt
@@ -0,0 +1,5 @@
+verde oscuro #B3CC57
+verde claro  #ECF081
+naranja      #FFBE40
+rosa         #EF746F
+moradito	#AB3E5B
+\ No newline at end of file
diff --git a/estrella.txt b/estrella.txt
new file mode 100644
index 0000000..6273cac
--- /dev/null
+++ b/estrella.txt
@@ -0,0 +1 @@
+🌟 U+1F31F
diff --git a/src/actividades/c2-composicion-color.md b/src/actividades/c2-composicion-color.md
new file mode 100644
index 0000000..8d73f83
--- /dev/null
+++ b/src/actividades/c2-composicion-color.md
@@ -0,0 +1,77 @@
+---
+title: "Composición a color"
+---
+
+Esta actividad consta de dos partes que realizaremos en las sesiones 3 y 4.
+
+# Indicaciones
+
+## Primera parte (Sesión 3)
+
+El objetivo de la actividad es utilizar las funciones de color, líneas, y figuras para realizar una composición visual de tu agrado.
+
+Además, la idea es incorporar variables como parámetros que puedas modificar después.
+
+Te recomiendo partir de alguna referencia visual e intentar replicarla en su totalidad o algún aspecto de ella.
+
+Antes de escribir código, realiza un boceto para ubicarte en el espacio numérico del lienzo.
+
+### Entrega 
+
+En el foro correspondiente en Brightspace, crea una nueva cadena con el título de tu composición, y realiza lo siguiente:
+
+* Comparte tu(s) **referencia(s) visuales**
+* Comparte los **bocetos** que hayas realizado
+* Copia el **código** que escribiste en Processing (¡agrégale **comentarios**!)
+* Comparte la **imagen** que resulta de ejecutar el código en Processing
+* Comenta cómo te sentiste al dibujar de esta manera, qué ventajas y desventajas le encuentras, qué te deja la experiencia, y cualquier otra reflexión que tengas al respecto.
+
+### Notas relevantes
+
+* [[Color]](/notas/color.html) 
+* [[Dibujo con figuras]](/notas/figuras.html)
+* [[Variables: Fundamentos]](/notas/variables.html)
+* [[Operadores aritméticos]](/notas/aritmetica.html)
+
+---
+
+## Segunda parte (Sesión 4)
+
+El objetivo aquí es explorar las posibilidades de agregar *un poco de caos* a lo que ya estructuraste en la sesión anterior.
+
+Lo ideal sería que encuentres **variaciones de tu composición original**, que estén basadas en **parámetros aleatorios**, y que te llamen la atención como resultado estético.
+
+Si gustas agregar elementos a tu composición original, o modificarla completamente, también se vale.
+
+La actividad consiste en lo siguiente:
+
+* Agrega **parámetros aleatorios** a tu composición pasada. Por ejemplo, haz que alguno(s) de los siguientes aspectos tengan un origen aleatorio:
+	- Posición (en `x` y/o en `y`, de uno o más elementos)
+	- Dimensiones
+	- Grosor(es) de línea
+	- Colores
+* Experimenta con **diferentes rangos numéricos** en estos parámetros aleatorios.
+* Documenta al menos **tres resultados** que llamen tu atención
+
+### Entrega 
+
+En el foro:
+
+* Describe el **proceso** que seguiste para parametrizar y aleatorizar tu composición
+* Comparte los **resultados** que obtuviste y llamaron tu atención
+* Comenta cómo te sentiste al agregar aleatoriedad a tu composición, qué te deja la experiencia, y cualquier otra reflexión que tengas al respecto.
+
+
+### Notas relevantes
+
+* [[Números pseudo-aleatorios]](/notas/random.html)
+
+---
+
+# Posibles referencias
+
+* Anni Albers, Gunta Stölzl, Benita Koch-Otte, Otti Berger en [The Women of the Bauhaus School](https://www.artsy.net/article/artsy-editorial-women-bauhaus-school)
+* [Wassily Kandinsky - 50 Most popular paintings](https://www.wassilykandinsky.net/painting1896-1944.php)
+* [Culturas Populares - Geometrías de la Imaginación](https://www.culturaspopulareseindigenas.gob.mx/index.php/proyectos/616-geometr%C3%ADas-de-la-imaginaci%C3%B3n)
+
+(¡se aceptan sugerencias para agregar aquí!)
diff --git a/src/actividades/c2-composicion-interactiva.md b/src/actividades/c2-composicion-interactiva.md
new file mode 100644
index 0000000..6fae1c5
--- /dev/null
+++ b/src/actividades/c2-composicion-interactiva.md
@@ -0,0 +1,105 @@
+---
+title: "PROYECTO FINAL: Composición Interactiva"
+---
+
+# Generalidades
+
+El proyecto consiste en que utilices Processing para desarrollar una **composición visual que cambie su aspecto a través de interacción de mouse y/o teclado**.
+
+Opcionalmente puedes incorporar **cambios que sucedan de manera autónoma** (animación).
+
+Sugerencias de aspectos visuales que puedes volver interactivos y/o animados:
+
+* Posiciones
+* Dimensiones
+* Distancias / Separaciones
+* Colores
+* Grosores
+* Cantidad de repeticiones
+* Rangos de repeticiones
+* Etc...
+
+La idea es que además presentes un **contexto** en el cual visualices que esta composición interactiva podría existir.
+
+Algunas sugerencias de contextos/formatos posibles para el proyecto:
+
+* **Arte/Diseño interactivo**, en el que la audiencia es quien interactúa como parte de la obra
+* **Simulación de inputs/outputs físicos**, en el que prototipas con interacciones de mouse y/o teclado a entradas de datos como sensores.
+* **Herramienta interactiva**, que permite que alguien más o tú experimente y genere resultados visuales
+* **Visuales en vivo / VJ**, en el que tú interactúas como *performer* con tu programa
+
+# Aspectos técnicos
+
+El código de tu proyecto ha de contener lo siguiente:
+
+* Dibujo con líneas, figuras básicas, y/o polígonos
+* Uso de colores o tonos de escala de grises
+* Variables que funcionen como parámetros de dibujo
+* Al menos un aspecto repetitivo expresado con ciclo `while` o `for`
+* Uso del ciclo de animación con las funciones `setup()` y `draw()`
+
+Además, ha de incorporar **al menos un** aspecto de interactividad que modifique algún parámetro de la composición:
+
+* Posición del *mouse* en alguno de los ejes (`mouseX`, `mouseY`)
+* Estado del *mouse* (`mousePressed`)
+* Estado del teclado y teclas (`keyPressed`, `key`)
+
+Opcionalmente, incorpora:
+
+* Animación basada en acumuladores
+* Aleatoriedad
+* Repeticiones alternadas, ciclos anidados, etc.
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Final tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión de trabajo.
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la última sesión del curso.
+
+Utiliza entre 5 y 8 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y/o videos resultantes, demostración de interacciones 
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento/diapositivas en PDF a entregar a más tardar al finalizar la última sesión del curso, en la sección correspondiente de Actividades.
+
+Incluye en este documento/diapositivas:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a videos que demuestren la interacción
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen y/o video** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+* [[Ciclo de animación]](/notas/draw.html)
+* [[Interactividad con mouse y teclado]](/notas/interactividad.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
diff --git a/src/actividades/c2-graficos-interactivos.md b/src/actividades/c2-graficos-interactivos.md
new file mode 100644
index 0000000..07fd0c8
--- /dev/null
+++ b/src/actividades/c2-graficos-interactivos.md
@@ -0,0 +1,160 @@
+---
+title: "PROYECTO PARCIAL: Gráficos Interactivos"
+---
+
+# Generalidades
+
+Realiza una composición visual en Processing que use expresiones condicionales (`if...else`) para alternar entre dos o más estados.
+
+Ejemplos de composiciones que podrías realizar:
+
+* Escena en dos estados 
+* Setup de VJ
+* Herramienta de dibujo
+* Personaje en mundo 2D
+
+Abajo se detallan más posibilidades de cada una.
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Parcial tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión (8, 9 y 10).
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la sesión 11.
+
+Utiliza entre 5 y 8 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y videos resultantes, demostración de interacciones en vivo o pregrabadas
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento PDF a entregar a más tardar al finalizar la sesión 11, en la sección correspondiente de Actividades.
+
+Incluye en este documento:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a video(s) que lo muestren en funcionamiento.
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Cronograma de trabajo propuesto:
+
+La idea es realizar el proyecto en su totalidad **durante las sesiones en vivo**. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.
+
+* **Sesión 8**: Planeación y concepto, prototipos, definición del alcance del proyecto y obstáculos a superar. 
+* **Sesión 9**: Desarrollo general del proyecto
+* **Sesión 10**: Resolución de dudas, finalización del proyecto, captura de resultados visuales, preparación de documentación y presentación.
+* **Sesión 11**: Presentaciones y entrega
+
+*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 8 y 9*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+
+# Descripción de ejemplos
+
+Estas son posibles sugerencias en las cuales basarte para tu proyecto.
+
+## 1) Escena en dos estados
+
+Una escena que se muestra de cierta manera, y al recibir interacción (como un click o una tecla) se muestra de otra forma.
+
+Posibles ejemplos:
+
+* Interior con / sin iluminación
+* Paisaje de día / de noche
+* Mundo con / sin basura (?)
+* etc
+
+A considerar:
+
+* ¿Hay partes del dibujo que se muestren siempre?
+* ¿Lo que cambia entre cada estado es el color o también figuras?
+* Puedes hacer todo el dibujo dentro del `if`, copiarlo al `else`, y ahí hacer las modificaciones.
+
+Posibilidades extra a implementar:
+
+* ¿Y si agregas animaciones sencillas en cada estado?
+* ¿Y si la interacción con el mouse sucede solo en cierta área del canvas? (e.g. la luz se enciende al dar click en una pared)
+
+
+## 2) Setup de VJ
+
+Un sketch que muestre diferentes visuales / animaciones según la tecla que se presione.
+
+Posibles ejemplos:
+
+* Pantalla de diferente color
+* Diseños con diferentes figuras (líneas, rectángulos, elipses)
+* Animaciones sencillas en una u otra dirección
+* Animaciones de cambio de brillo o color
+
+Posibilidades extra a implementar:
+
+* ¿Y si usas teclas para modificar parámetros de las animaciones, como la velocidad de movimiento?
+* ¿Y si agregas animaciones que dependan de alguna forma del movimiento del mouse?
+
+## 3) Herramienta de dibujo
+
+Un sketch que te permita dibujar con alguna figura sobre el canvas.
+
+Posibles ejemplos:
+
+* Deja marca con el mouse cuando lo presiones (y si no, no)
+* Deja marca con un puntero que se controla con el teclado 
+
+Posibilidades extra: 
+
+* ¿Y si usas teclas para cambiar la figura, tamaño y/o color con los que dibujas?
+* ¿Y si agregas alguna acción para "borrar" el dibujo?
+* ¿Y si el color con el que dibujas cambia solo?
+* ¿Y si agregas alguna acción para "guardar" el dibujo?
+
+## 4) Personaje en mundo 2D
+
+Un sketch que muestre a una fracción de un mundo 2D que puedas recorrer con un personaje controlado por el mouse o teclado.
+
+Posibles ejemplos:
+
+* Laberinto
+* Isla pequeña
+* Espacio exterior
+
+Posibilidades extra:
+
+* ¿Y si componentes del mundo 2D están animados?
+* ¿Y si juegas con el orden de dibujo para que tu personaje pueda estar detrás o adelante de objetos?
+* ¿Y si cambias el aspecto del personaje mientras se mueve?
+* ¿Y si cambias el aspecto del personaje según a dónde se mueva?
+
+Por el momento no te preocupes por lo que se llama "detección de colisiones"
+
+# Notas relevantes
+
+* [[Ciclo de animación]](/notas/draw.html)
+* [[Interactividad con mouse y teclado]](/notas/interactividad.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
diff --git a/src/actividades/c2-instrucciones-de-dibujo.md b/src/actividades/c2-instrucciones-de-dibujo.md
new file mode 100644
index 0000000..82dfc07
--- /dev/null
+++ b/src/actividades/c2-instrucciones-de-dibujo.md
@@ -0,0 +1,22 @@
+---
+title: "ACTIVIDAD: Instrucciones de dibujo"
+---
+
+## Descripción
+
+Una persona recibe una imagen construida a partir de líneas.
+
+Su tarea es comunicar a las demás las instrucciones necesarias para poderla replicar.
+
+### Modalidades
+
+* Dibujo a voz a dibujo: Las instrucciones se dicen, se pueden hacer preguntas.
+* Dibujo a texto a dibujo: Las instrucciones se escriben primero y se siguen después tal cual están escritas. 
+
+## Para discutir
+
+* ¿Hasta qué punto fue posible replicar la imagen?
+* ¿Qué dificultades hubo de parte de quien daba las instrucciones?
+* ¿Qué dificultades hubo de parte de quien seguía las instrucciones?
+* ¿Qué forma tenían las instrucciones que eran más precisas? ¿Qué forma tenían las instrucciones que dejaban mucho espacio a la interpretación?
+* ¿Qué mejorarías en el modo de definir o indicar instrucciones?
diff --git a/src/actividades/c2-patrones-lineas.md b/src/actividades/c2-patrones-lineas.md
new file mode 100644
index 0000000..db87a93
--- /dev/null
+++ b/src/actividades/c2-patrones-lineas.md
@@ -0,0 +1,37 @@
+---
+title: "Patrones con líneas"
+---
+
+Ejercitaremos nuestras habilidades para dibujar con líneas en Processing, a la vez que nos acercamos al *pensamiento abstracto* que conviene desarrollar para aprovechar al máximo las posibilidades de la programación.
+
+# Dibujos
+
+Los siguientes son dibujos realizados con líneas. Todos incluyen algún aspecto repetitivo, y algunos son más complejos que otros:
+
+![](/img/c2-patrones-lineas.png)
+
+# Instrucciones
+
+Elige uno de los dibujos, y realiza y responde las siguientes indicaciones:
+
+* Realiza un **sketch** a mano indicando los puntos clave del dibujo, incluyendo sus coordenadas.
+* Responde: 
+	* ¿Qué **diferencía** a una línea de otra? 
+	* ¿Existe algo que se **repita**? ¿Existe algo que se mantenga **constante**?
+	* ¿Cómo describirías el **patrón** que existe?
+* Escribe un **programa en Processing** que replique el dibujo
+	* *Opcional*: Utiliza las variables `width` y `height` para generalizarlo
+* Guarda la **imagen** que resulte de ejecutar tu programa
+* Responde: ¿Qué tendrías que cambiar de tus instrucciones si quisieras... 
+	* que tu dibujo tuviera el **doble de líneas** en el mismo espacio? 
+	* que tu dibujo se viera igual pero ocupara el **doble de espacio**?
+
+# Entrega
+
+Sube tus respuestas en el foro correspondiente en Brightspace.
+
+# Notas
+
+[[Dibujo con puntos y líneas]](/notas/lineas.html)
+
+[Tutorial: Patrones con líneas](/tutoriales/c2-patrones-lineas.html)
diff --git a/src/actividades/c2-proyecto-exploraciones.md b/src/actividades/c2-proyecto-exploraciones.md
new file mode 100644
index 0000000..ba39c15
--- /dev/null
+++ b/src/actividades/c2-proyecto-exploraciones.md
@@ -0,0 +1,68 @@
+---
+title: "PROYECTO FINAL: Exploraciones cíclicas"
+---
+
+# Generalidades
+
+Este proyecto consiste en continuar la práctica con estructuras de repetición y arreglos.
+
+La idea es que realices **alguna** de las siguientes opciones sugeridas:
+
+1. Adapta algún ejemplo o ejercicio de dibujo con ciclos `while` o `for`
+2. Adapta algún ejemplo o ejercicio de uso de arreglos
+3. Incorpora ciclos `while` o `for` y/o arreglos a tu proyecto parcial.
+
+# Entrega
+
+La entrega del proyecto consistirá en dos partes:
+
+* Presentación en vivo
+* Dossier en PDF
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la última sesión del curso.
+
+Utiliza entre 5 y 10 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y videos resultantes
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento/diapositivas en PDF a entregar a más tardar al finalizar la última sesión del curso, en la sección correspondiente de Actividades.
+
+Incluye en este documento/diapositivas:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a videos resultantes
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen y/o video** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+## Arreglos
+
+* [[Arreglos: Fundamentos]](/notas/arreglos.html)
+
+## Ciclos
+
+* [[Ciclos while y for]](/notas/ciclos.html)
+* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
+
+## Animación
+
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
diff --git a/src/actividades/c2-ritmo-visual.md b/src/actividades/c2-ritmo-visual.md
new file mode 100644
index 0000000..4566412
--- /dev/null
+++ b/src/actividades/c2-ritmo-visual.md
@@ -0,0 +1,99 @@
+---
+title: "PROYECTO PARCIAL: Ritmo Visual"
+---
+
+# Generalidades
+
+El proyecto consiste en que utilices Processing para desarrollar una **composición visual basada en repetición**, con al menos **tres variaciones significativas**.
+
+La idea es que además presentes un **contexto** en el cual visualices que esa composición podría existir.
+
+# Aspectos técnicos
+
+El código de tu proyecto ha de contener lo siguiente:
+
+* Dibujo con líneas, figuras básicas, y/o polígonos
+* Uso de colores o tonos de escala de grises
+* Variables que funcionen como parámetros
+* Al menos un aspecto repetitivo expresado con un ciclo `while` o `for`
+
+Lo ideal sería que obtuvieras las tres variaciones significativas de tu composición modificando únicamente *valores numéricos*.
+
+Opcionalmente considera incorporar alguna de las siguientes:
+
+* Parámetros aleatorios
+* Expresiones condicionales
+* Repeticiones más complejas:
+	- Repeticiones alternadas
+	- Repeticiones en dos dimensiones
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Parcial tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión (8, 9 y 10).
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la sesión 11.
+
+Utiliza entre 5 y 8 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, *opcionalmente* demostradas en contexto
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento PDF a entregar a más tardar al finalizar la sesión 11, en la sección correspondiente de Actividades.
+
+Incluye en este documento:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, *opcionalmente* demostradas en contexto. 
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Cronograma de trabajo propuesto:
+
+La idea es realizar el proyecto en su totalidad **durante las sesiones en vivo**. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.
+
+* **Sesión 8**: Planeación, concepto, referencias visuales, prototipos (en papel y/o Processing), definición del alcance del proyecto y obstáculos a superar
+* **Sesión 9**: Desarrollo general del proyecto.
+* **Sesión 10**: Corrección de detalles, captura de resultados visuales, preparación de documentación y presentación.
+* **Sesión 11**: Presentaciones y entrega
+
+*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 8, 9 y 10*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+* [[Ciclos while y for]](/notas/ciclos.html)
+* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
+
+* [[Dibujo con puntos y líneas]](/notas/lineas.html)
+* [[Dibujo con figuras]](/notas/figuras.html)
+* [[Color]](/notas/color.html)
+* [[Dibujo de polígonos]](/notas/poligonos.html)
+* [[Expresiones condicionales]](/notas/condicionales.html)
+
diff --git a/src/actividades/c3-copos.md b/src/actividades/c3-copos.md
new file mode 100644
index 0000000..6b830d4
--- /dev/null
+++ b/src/actividades/c3-copos.md
@@ -0,0 +1,69 @@
+---
+title: "ACTIVIDAD: Copos de nieve, flores, y más"
+---
+
+# Generalidades
+
+Usaremos esta actividad para practicar la parametrización, creación de funciones propias, y transformaciones.
+
+El objetivo es realizar una composición visual basada en una *función propia con parámetros* que construya una flor/copo de nieve/etc a partir de la rotación de pétalos construidos con otra *función propia*.
+
+# Procedimiento
+
+El procedimiento que sugiero para realizar la actividad es el siguiente:
+
+1. **Bosqueja** un elemento "pétalo" con su base en 0,0 y en posición vertical u horizontal. 
+	* Diséñalo pensando en utilizar líneas, polígonos propios, y/o figuras básicas de Processing. ¡Puede ser tan complejo o simple como desees!
+	* Encuentra y marca las coordenadas y parámetros clave para poder escribir el dibujo en Processing.
+	* *Opcional*: Considera parametrizar alguna de sus características, como su *longitud*, *ancho*, *número de ramas*, etc.
+2. **Traduce** tu dibujo a una **función** del tipo `petalo( )` en Processing
+	* *Opcional*: Si agregaste más parámetros, inclúyelos también como argumentos de tu función, por ejemplo `petalo( longitud, ancho )`
+3. Encuentra la combinación de **transformaciones** para que, combinadas con un ciclo `for`, puedas dibujar varios *pétalos* alrededor de un punto `x,y` que tú decidas.
+	* *Opcional*: Si tienes pétalos parametrizados, prueba modificar sus parámetros dentro del ciclo, o agrega copias con parámetros distintos. Por ejemplo, los pétalos pueden ir decreciendo, o puedes tener pétalos grandes detrás y pétalos pequeños adelante.
+	* *También opcional*: Adapta tu función de pétalo, construye y utiliza más de un tipo de función de pétalo, y/o complementa el dibujo de la flor con otras figuras.
+4. **Agrupa** ese nuevo código en una **función** de la forma `flor( x, y )` con el nombre que prefieras.
+	* *Opcional*: Agrega más parámetros a tu función, como *número de pétalos*, *ángulo de rotación*, *diámetro*, *colores* etc.
+5. **Dibuja** utilizando esa función. Algunas posibilidades:
+	* Repite las flores en algún patrón
+	* Realiza una composición ordenando las flores de acuerdo a algún parámetro.
+	* Dibuja varias flores en posiciones aleatorias. (Y si tienes más parámetros, también prueba aleatorizarlos)
+	* Usa una flor como "pincel" centrada en la posición del *mouse*
+	* Pon a las flores en movimiento.
+
+En el siguiente tutorial se ejemplifican los diferentes pasos:
+
+* [Tutorial: Copos y flores (Funciones y transformaciones)](/tutoriales/c3-copos-flores.html)
+
+# Entrega
+
+Utilizaremos dos sesiones para trabajar en esta actividad.
+
+## Primera entrega: Proceso
+
+Al final de la primera sesión, comparte en el foro correspondiente lo siguiente:
+
+* Avances: referencias visuales, bocetos, código, resultados visuales parciales
+* Comentario: qué buscas lograr, qué obstáculos encuentras, qué dudas tienes, qué te gustaría hacer que no sabes cómo, etc.
+
+## Segunda entrega: Resultados
+
+Al final de la segunda sesión, entrega en la sección de Actividades un *dossier* en PDF con lo siguiente:
+
+* Título y nombre
+* Imagen o imágenes resultantes
+* Notas e imágenes sobre tu proceso
+* Código fuente con comentarios
+* Reflexiones, hallazgos, obstáculos, conclusiones
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+* [[Dibujo de polígonos]](/notas/poligonos.html)
+* [[Transformaciones]](/notas/transformaciones.html)
+* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
+* [[Ciclos while y for]](/notas/ciclos.html)
diff --git a/src/actividades/c3-espacios-vivos.md b/src/actividades/c3-espacios-vivos.md
new file mode 100644
index 0000000..5ffd630
--- /dev/null
+++ b/src/actividades/c3-espacios-vivos.md
@@ -0,0 +1,151 @@
+---
+title: "PROYECTO FINAL: Espacios Vivos"
+---
+
+# Generalidades
+
+Utiliza Processing para desarrollar un *prototipo* de **composición visual basada en múltiples elementos animados**.
+
+La idea es considerar que esta composición visual exista como **parte de un espacio físico**, ya sea través de proyecciones, *video walls*, u otro tipo de *displays*.
+
+Presentarás tu prototipo como video, y un *mockup* estático de cómo se vería en el espacio que elijas o diseñes.
+
+Puedes trabajar **individualmente** o **en pareja**.
+
+## Inspiración
+
+Algunos ejemplos de *displays* creativos, *video walls* y proyecciones que pueden darte ideas de cómo contextualizar tu composición.
+
+* [Harcourt Wall x Sosolimited](https://www.sosolimited.com/work/harcourt-wall/)
+* [Patterned by Nature x Sosolimited](https://www.sosolimited.com/work/patterned-by-nature/)
+* [IAC Video Wall](https://www.youtube.com/watch?v=VhsDZM_4euc)
+* [Centro de Cultura Digital](https://www.youtube.com/watch?v=Am4Y6IMO5us)
+* [Epson PowerLite L Laser Projectors | Projection Mapping at Temple House](https://www.youtube.com/watch?v=K4MZ-K_VA3Q)
+
+# Aspectos técnicos del código
+
+El tamaño de lienzo de tu composición ha de tener **al menos 1200px de ancho**.
+
+La composición visual ha de consistir primordialmente de **múltiples instancias animadas** de algún **elemento que diseñes**.
+
+El código ha de estar desarrollado utilizando las siguientes herramientas:
+
+* **Arreglos** numéricos
+* **Ciclos** `while` o `for`
+* **Función propia** de dibujo con **parámetros**
+* **Animación**
+
+Queda a tu consideración elegir qué parámetros de dibujo animarás, cuáles dejarás fijos pero serán diferentes entre cada instancia, y cuáles serán constantes en todas las instancias. Por ejemplo:
+
+* Posiciones
+* Dimensiones
+* Colores
+* Rotaciones
+* Etc.
+
+**Opcionalmente**, si lo deseas incorpora algún aspecto de **interactividad con mouse o teclado**, que sirva para *simular* alguna interacción que podría suceder en el espacio físico. Por ejemplo: la composición cambia cuando alguien está cerca, la composición sigue la posición horizontal de una persona, etc.
+
+# Procedimiento sugerido
+
+Los siguientes pasos son una aproximación a un proceso creativo que parte de una idea general y va construyendo cada elemento desde la base.
+
+1. Realiza **boceto(s)** de la composición visual que quieres desarrollar.
+	* Identifica cuál sería el **elemento base** que se repite
+	* Identifica qué **parámetros** de ese elemento serían **distintos** en cada instancia, y cuál(es) estarían animados (y de qué manera)
+2. Realiza **boceto(s)** del **elemento base** que repetirás en la composición
+	* Toma en cuenta los **parámetros** que decidiste
+3. Construye una **función de dibujo con parámetros** que dibuje a una instancia de ese elemento de acuerdo a parámetros dados.
+	* Recuerda los ejemplos que hemos realizado utilizando con `pushMatrix();`, `translate(x,y);` y `popMatrix();` dentro de la función de dibujo para poder colocar al dibujo en cualquier posición del lienzo.
+4. **Prueba** tu función de dibujo llamándola desde un *sketch* de Processing, asegurándote de que los parámetros cambien lo que diseñaste.
+	* Por ejemplo, si la función tiene parámetros `x,y` para dibujar el elemento en una posición específica, prueba llamarla con diferentes valores numéricos para asegurarte de que sea así.
+5. Declara y crea **un arreglo por cada parámetro que quieres que sea distinto** entre elementos, de acuerdo a lo que identificaste previamente.
+6. **Inicializa** los arreglos en `setup()` como consideres adecuado según tu diseño: manualmente, elementos iguales, aleatorios, siguiendo algún patrón.
+7. Utiliza un ciclo para **leer**  (y **modificar**, si están animados) los valores de los arreglos dentro de `draw()`, usándolos como parámetros de tu función de dibujo.
+8. Ajusta lo que consideres necesario:
+	* La función de dibujo
+	* Los arreglos a utilizar
+	* Las técnicas de animación
+	* etc
+9. Captura tu resultado y utilízalo para realizar un *mockup*
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Final tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión de trabajo.
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la última sesión del curso.
+
+Utiliza entre 5 y 10 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y videos resultantes, *mockups*
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento/diapositivas en PDF a entregar a más tardar al finalizar la última sesión del curso, en la sección correspondiente de Actividades.
+
+Incluye en este documento/diapositivas:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a videos resultantes, *mockups*
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Cronograma de trabajo propuesto:
+
+La idea es realizar el proyecto en su totalidad **durante las sesiones en vivo**. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.
+
+* **Sesión 14**: Planeación, concepto, referencias visuales, bocetos en papel y primeras pruebas en Processing
+* **Sesión 15**: Desarrollo general del proyecto.
+* **Sesión 16**: Presentaciones y entrega
+
+*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 14 y 15*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen y/o video** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+## Arreglos
+
+* [[Arreglos: Fundamentos]](/notas/arreglos.html)
+
+## Ciclos
+
+* [[Ciclos while y for]](/notas/ciclos.html)
+* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
+
+## Animación
+
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+
+## Dibujo
+
+* [[Dibujo de polígonos]](/notas/poligonos.html)
+* [[Transformaciones]](/notas/transformaciones.html)
+* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
+* [[Coordenadas polares]](/notas/coordenadas-polares.html)
+* [Tutorial: Copos y flores (Funciones y transformaciones)](/tutoriales/c3-copos-flores.html)
diff --git a/src/actividades/c3-estudio-poligonal.md b/src/actividades/c3-estudio-poligonal.md
new file mode 100644
index 0000000..66a8526
--- /dev/null
+++ b/src/actividades/c3-estudio-poligonal.md
@@ -0,0 +1,84 @@
+---
+title: "Estudio poligonal"
+---
+
+Exploración gráfica a partir de polígonos propios.
+
+# Proceso
+
+## Parte 1 - Polígono (Sesión 3)
+
+Dibuja uno o más polígonos que llamen tu atención como elementos gráficos.
+
+Por el momento te recomiendo no utilizar polígonos regulares porque más adelante veremos cómo construirlos.
+
+### Indicaciones
+
+* Define un **punto de referencia para las coordenadas 0,0** (por ejemplo el *centro*, o la *esquina superior izquierda*)
+* Realiza un boceto a mano donde **marques y aproximes las coordenadas de cada vértice** en relación al punto de referencia.
+* Traduce estos vértices a un polígono en Processing.
+* Ajusta las coordenadas de ser necesario.
+
+### Registra
+
+* Boceto original
+* Código del polígono
+* Imagen del polígono dibujado por Processing
+
+## Parte 2 - Función (Sesión 4)
+
+### Indicaciones
+
+* Convierte el código de tu polígono (**dibujado respecto a un punto 0,0**) a una función de dibujo sin argumentos.
+* Usa esta función de dibujo para experimentar con transformaciones combinadas
+
+### Registra
+
+* Función de dibujo sin argumentos
+* Código de tu programa completo
+* Imágenes resultantes de tus experimentos
+
+## Parte 3 - Parámetros (Sesión 5)
+
+Construye una función de dibujo con argumentos, y experimenta con ella.
+
+### Indicaciones
+
+* Convierte tu función de dibujo a una que tenga argumentos:
+	- Posición x,y
+	- *Opcional*: otros parámetros como dimensiones, distancias, etc
+* Experimenta a nivel gráfico con esta función:
+	- Prueba utilizar variaciones de los parámetros que definiste
+	- Utiliza combinaciones de transformaciones
+	- Utiliza ciclos `for` para repetir y transformar el dibujo de tu función
+
+### Registra
+
+* Función de dibujo con argumentos
+* Código de tu programa completo
+* Imágenes resultantes de tus experimentos
+* Notas sobre tu proceso en la semana: qué querías lograr, qué obstáculos encontraste, qué hallazgos tuviste, qué ventajas y desventajas le encuentras a esta manera de diseñar, cómo te sentiste, etc.
+
+# Entrega
+
+## Sesión 3:
+
+* Comparte en el foro tus avances (Parte 1 y Parte 2)
+* Observa el trabajo de las demás; toma nota y comenta hallazgos que te parezcan interesantes  
+
+## Sesión 4:
+
+* Comparte en el foro tus avances (Parte 2)
+* Observa el trabajo de las demás; toma nota y comenta hallazgos que te parezcan interesantes  
+
+## Sesión 5:
+
+* Complementa tu publicación en el foro con tu trabajo en la Parte 3
+* Comenta en publicaciones de las demás: ¿hasta qué punto lograron lo que buscaban? ¿qué puedes aprender de lo que hicieron? ¿qué posibilidades encuentras?
+
+# Notas relevantes
+
+* [[Dibujo de polígonos]](/notas/poligonos.html)
+* [[Transformaciones]](/notas/transformaciones.html)
+* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
+
diff --git a/src/actividades/c3-filtro-interactivo.md b/src/actividades/c3-filtro-interactivo.md
new file mode 100644
index 0000000..6e93a54
--- /dev/null
+++ b/src/actividades/c3-filtro-interactivo.md
@@ -0,0 +1,106 @@
+---
+title: "PROYECTO FINAL: Filtro Interactivo"
+---
+
+# Generalidades
+
+El proyecto consiste en que desarolles un *filtro interactivo* en Processing, utilizando herramientas de manipulación programática de imágenes que hemos revisado en clase.
+ 
+Este filtro puede existir como **cualquiera de las siguientes opciones**:
+
+* Filtro de imagen estática (`PImage`)
+* Filtro de video pregrabado (`Movie`)
+* Filtro de video en vivo (`Capture`)
+
+Algunas sugerencias de contextos posibles para el proyecto:
+
+* **Arte interactivo**, en el que la audiencia es quien interactúa como parte de la obra
+* **Herramienta interactiva**, que permite que alguien más o tú experimente y genere resultados visuales
+* **Visuales en vivo / VJ**, en el que tú interactúas como *performer* con tu programa
+
+
+# Aspectos técnicos
+
+El código del filtro ha de basarse en manipulación de imágenes de mapa de bits, utilizando además **al menos dos** de las siguientes técnicas:
+
+* Arreglo de pixeles ( `.pixels` )
+* Recortes rectangulares (`.get(x, y, w, h)`)
+* *Blend modes* (`blendMode( )`)
+* Tintas (`tint( )`)
+* Muestreo de color (`.get(x, y)`)
+* Máscaras (`.mask( )`)
+* Capas con `PGraphics`
+
+Además, ha de incorporar **al menos un** aspecto de interactividad que modifique algún parámetro de la manipulación:
+
+* Posición del *mouse* en alguno de los ejes (`mouseX`, `mouseY`)
+* Estado del *mouse* (`mousePressed`)
+* Estado del teclado y teclas (`keyPressed`, `key`)
+
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Final tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión de trabajo (12 y 13).
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la sesión 14.
+
+Utiliza entre 5 y 10 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y/o videos resultantes, demostración de interacciones 
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento PDF a entregar a más tardar al finalizar la sesión 14, en la sección correspondiente de Actividades.
+
+Incluye en este documento:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a videos que demuestren la interacción
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+* Imágenes fuente con referencias
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Cronograma de trabajo propuesto:
+
+La idea es realizar el proyecto en su totalidad **durante las sesiones en vivo**. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.
+
+* **Sesión 12**: Planeación, concepto, referencias visuales, prototipos (en papel y/o Processing), definición del alcance del proyecto y obstáculos a superar
+* **Sesión 13**: Desarrollo general del proyecto.
+* **Sesión 14**: Presentaciones y entrega
+
+*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 12 y 13*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+* [[Interactividad con mouse y teclado]](/notas/interactividad.html)
+* [[Video: Estructuras básicas]](/notas/video.html)
+* [[Arreglo de pixeles]](/notas/pixeles.html)
+* [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+* [[Imágenes: Colores, filtros]](/notas/imagenes-colores.html)
+* [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
diff --git a/src/actividades/c3-patrones-lineas.md b/src/actividades/c3-patrones-lineas.md
new file mode 100644
index 0000000..369c932
--- /dev/null
+++ b/src/actividades/c3-patrones-lineas.md
@@ -0,0 +1,53 @@
+---
+title: "Patrones con líneas"
+---
+
+Usaremos esta actividad para repasar y diagnosticar nuestras habilidades y conocimientos para dibujar con Processing.
+
+Aprovecharemos para (re)acercarnos al *pensamiento abstracto* que conviene desarrollar para aprovechar al máximo las posibilidades de la programación.
+
+# Dibujos
+
+Los siguientes son dibujos realizados con líneas. Todos incluyen algún aspecto repetitivo, y algunos son más complejos que otros:
+
+![](/img/c2-patrones-lineas.png)
+
+# Instrucciones
+
+Elige uno de los dibujos, y realiza y responde las siguientes indicaciones:
+
+* Realiza un **sketch** a mano indicando los puntos clave del dibujo, incluyendo sus coordenadas.
+* Responde: 
+	* ¿Qué **diferencía** a una línea de otra? 
+	* ¿Existe algo que se **repita**? ¿Existe algo que se mantenga **constante**?
+	* ¿Cómo describirías el **patrón** que existe?
+* Escribe un **programa en Processing** que replique el dibujo
+	* *Opcional*: Utiliza las variables `width` y `height` para generalizarlo
+* Guarda la **imagen** que resulte de ejecutar tu programa
+
+## Versión manual:
+
+* Responde: ¿Qué tendrías que cambiar de tus instrucciones si quisieras... 
+	* que tu dibujo tuviera el **doble de líneas** en el mismo espacio? 
+	* que tu dibujo se viera igual pero ocupara el **doble de espacio**?
+
+## Versión con ciclos:
+
+* Realiza y documenta al menos dos variaciones distintas que surjan de modificar valores numéricos en las expresiones basadas en repetición que hayas utilizado. Por ejemplo:
+	- Cambia la cantidad de repeticiones
+	- Cambia las dimensiones de los dibujos
+* *Opcional*: Experimenta alterando otras propiedades dentro de tus repeticiones, como el grosor de línea y/o el color.
+
+# Entrega
+
+Sube tus respuestas en el foro correspondiente en Brightspace.
+
+# Notas
+
+* [[Canvas y sistema de coordenadas]](/notas/canvas-y-coordenadas.html)
+* [[Dibujo con puntos y líneas]](/notas/lineas.html)
+* [[Ciclos while y for]](/notas/ciclos.html)
+
+# Extra
+
+[Más patrones basados en repetición](/img/tabla-patrones.png)
diff --git a/src/actividades/c3-primer-collage.md b/src/actividades/c3-primer-collage.md
new file mode 100644
index 0000000..e845b08
--- /dev/null
+++ b/src/actividades/c3-primer-collage.md
@@ -0,0 +1,26 @@
+---
+title: "ACTIVIDAD: Primer collage"
+---
+
+# Premisas
+
+Realiza en Processing un *collage* a partir de imágenes estáticas.
+
+Explora *cambios de dimensiones*, *cambios de posición*, *recortes* y/o *muestreos de color*.
+
+Tu resultado puede ser estático o en movimiento.
+
+# Entrega
+
+Comparte en el foro lo siguiente:
+
+* Referencias visuales
+* Descripción de tu(s) objetivo(s) de exploración
+* Imágenes fuente
+* Código fuente, con comentarios
+* Imagen, imágenes o video resultantes
+* Comentario sobre tu proceso: qué hallazgos tuviste, qué obstáculos encontraste, qué ventajas y desventajas le encuentras a esta manera de crear, cómo te sentiste, etc.
+
+# Notas relevantes
+
+[[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
diff --git a/src/actividades/c3-triptico-collage.md b/src/actividades/c3-triptico-collage.md
new file mode 100644
index 0000000..206f8e2
--- /dev/null
+++ b/src/actividades/c3-triptico-collage.md
@@ -0,0 +1,103 @@
+---
+title: "PROYECTO PARCIAL: Tríptico"
+---
+
+# Generalidades
+
+Un tríptico es *una obra de arte que se divide en tres secciones*.
+
+El proyecto consiste en que desarrolles un *tríptico visual* en Processing, utilizando herramientas de manipulación programática de imágenes que hemos revisado en clase.
+
+Las tres secciones del tríptico pueden consistir en una o más de las siguientes:
+ 
+* variaciones de tu programa
+* variaciones de tus imágenes fuente
+* progresiones temporales, espaciales y/o narrativas
+* distintos tipos de interacción y/o animación
+* etc. 
+
+Estas tres secciones pueden ser imágenes estáticas, o pueden tener algún tipo de animación, interactiva o no. Si lo consideras pertinente, puedes acompañarlas con sonido.
+
+Toma en cuenta que el tríptico ha de tener sentido como un todo.
+
+# Aspectos técnicos
+
+El código del tríptico ha de basarse en carga y dibujo de imágenes de mapa de bits, utilizando además **al menos dos** de las siguientes técnicas:
+
+* Recortes rectangulares (`.get(x, y, w, h)`)
+* *Blend modes* (`blendMode( )`)
+* Tintas (`tint( )`)
+* Muestreo de color (`.get(x, y)`)
+* Máscaras (`.mask( )`)
+* Capas con `PGraphics`
+
+Opcionalmente considera incorporar alguna de las siguientes:
+
+* Ciclos `for` para dibujo repetitivo
+* Animación algorítmica
+* Interactividad con mouse y/o teclado
+
+# Entrega
+
+La entrega del proyecto consistirá en tres partes:
+
+* Avances del proceso
+* Presentación en vivo
+* Dossier en PDF
+
+## Avances del proceso
+
+Publica en el foro del Proyecto Parcial tus referencias, avances, bocetos, código, resultados, dudas, comentarios, etc. al final de cada sesión (6, 7 y 8).
+
+Hacerlo te permitirá tener retroalimentación oportuna y te facilitará tener registrado tu proceso creativo para los otros dos puntos.
+
+Si gustas publicar más seguido, ¡adelante!
+
+## Presentación en vivo
+
+Presentarás tu proyecto al grupo en la sesión 9.
+
+Utiliza entre 5 y 10 minutos para compartirnos:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes y/o videos resultantes, demostración de interacciones de ser el caso
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+
+## Dossier en PDF
+
+Complementa tu presentación con un documento PDF a entregar a más tardar al finalizar la sesión 9, en la sección correspondiente de Actividades.
+
+Incluye en este documento:
+
+* Descripción general de tu proyecto: título, descripción, contexto
+* Demostración del proyecto: imágenes resultantes, enlaces a videos en el caso de que haya animación y/o interacción
+* Documentación del proceso creativo: referencias, sketches, prototipos, hallazgos, obstáculos
+* Conclusiones: lecciones, posible trabajo a futuro
+* Código fuente completo y documentado con comentarios
+* Imágenes fuente con referencias
+
+*Puedes utilizar este dossier como apoyo visual para tu presentación en vivo*
+
+# Cronograma de trabajo propuesto:
+
+La idea es realizar el proyecto en su totalidad **durante las sesiones en vivo**. Es tiempo suficiente siempre y cuando definamos bien el alcance del proyecto.
+
+* **Sesión 6**: Planeación, concepto, referencias visuales, prototipos (en papel y/o Processing), definición del alcance del proyecto y obstáculos a superar
+* **Sesión 7**: Desarrollo general del proyecto.
+* **Sesión 8**: Corrección de detalles, captura de resultados visuales, preparación de documentación y presentación.
+* **Sesión 9**: Presentaciones y entrega
+
+*Recuerda: publica en el foro tus avances durante los últimos minutos de las sesiones 6, 7 y 8*
+
+# Recomendaciones
+
+**Documenta frecuentemente** tu proceso: Te recomiendo guardar **versiones distintas** del código cada vez que hagas cambios significativos, y hacer **capturas de imagen** en todas las etapas.
+
+Estaré presente en las sesiones para asesoría y resolución de dudas a nivel individual y grupal. ¡No dudes en **compartir tus preguntas**!
+
+# Notas relevantes
+
+* [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+* [[Imágenes: Colores, filtros]](/notas/imagenes-colores.html)
+* [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
diff --git a/src/actividades/footer.html b/src/actividades/footer.html
new file mode 100644
index 0000000..eb9f94b
--- /dev/null
+++ b/src/actividades/footer.html
@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>
diff --git a/src/actividades/head.html b/src/actividades/head.html
new file mode 100644
index 0000000..f5105bd
--- /dev/null
+++ b/src/actividades/head.html
@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />
diff --git a/src/actividades/nav.html b/src/actividades/nav.html
new file mode 100644
index 0000000..eb9f94b
--- /dev/null
+++ b/src/actividades/nav.html
@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>
diff --git a/src/estilo.html b/src/estilo.html
new file mode 100644
index 0000000..a90e88f
--- /dev/null
+++ b/src/estilo.html
@@ -0,0 +1,19 @@
+<style>
+body{
+max-width:42em;
+font-family:sans-serif;
+}
+code,pre{
+background-color:#fee;
+font-weight:bold;
+}
+a:link{
+color:#40a070;
+}
+a:visited{
+color:#a04070;
+}
+a:hover{
+color:#60a0b0;
+}
+</style>
diff --git a/src/footer.html b/src/footer.html
new file mode 100644
index 0000000..49bbd9a
--- /dev/null
+++ b/src/footer.html
@@ -0,0 +1,5 @@
+<nav>
+<a href="/">🍃 jardínBit</a> | J.Vega 2021 | 
+<img src="/img/cc0_small.png" alt="CC0 Public Domain"/>
+<a href="https://kopimi.com/kopimi"><img src="/img/kopimi_square.png" alt="kopimi" height="20"/></a>
+</nav>
diff --git a/src/head.html b/src/head.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/head.html
diff --git a/src/img/ambientLight.png b/src/img/ambientLight.png
new file mode 100644
index 0000000..2311a83
--- /dev/null
+++ b/src/img/ambientLight.png
diff --git a/src/img/blendMode-add-circulos.png b/src/img/blendMode-add-circulos.png
new file mode 100644
index 0000000..048d3fb
--- /dev/null
+++ b/src/img/blendMode-add-circulos.png
diff --git a/src/img/blendMode-multiply-circulos.png b/src/img/blendMode-multiply-circulos.png
new file mode 100644
index 0000000..71b83d0
--- /dev/null
+++ b/src/img/blendMode-multiply-circulos.png
diff --git a/src/img/blendMode-multiply-mascara.jpg b/src/img/blendMode-multiply-mascara.jpg
new file mode 100644
index 0000000..7149316
--- /dev/null
+++ b/src/img/blendMode-multiply-mascara.jpg
diff --git a/src/img/blendMode-subtract-circulos.png b/src/img/blendMode-subtract-circulos.png
new file mode 100644
index 0000000..ae2a4a4
--- /dev/null
+++ b/src/img/blendMode-subtract-circulos.png
diff --git a/src/img/boceto-malla-con-vertices-y-caras.png b/src/img/boceto-malla-con-vertices-y-caras.png
new file mode 100644
index 0000000..d783f4c
--- /dev/null
+++ b/src/img/boceto-malla-con-vertices-y-caras.png
diff --git a/src/img/boceto-malla-con-vertices.png b/src/img/boceto-malla-con-vertices.png
new file mode 100644
index 0000000..403cd71
--- /dev/null
+++ b/src/img/boceto-malla-con-vertices.png
diff --git a/src/img/boceto-malla.png b/src/img/boceto-malla.png
new file mode 100644
index 0000000..a6a6045
--- /dev/null
+++ b/src/img/boceto-malla.png
diff --git a/src/img/boceto-piramide.png b/src/img/boceto-piramide.png
new file mode 100644
index 0000000..9068b79
--- /dev/null
+++ b/src/img/boceto-piramide.png
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo01.gif b/src/img/c2-instrucciones-de-dibujo/dibujo01.gif
new file mode 100644
index 0000000..fe893cc
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo01.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo02.gif b/src/img/c2-instrucciones-de-dibujo/dibujo02.gif
new file mode 100644
index 0000000..8271398
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo02.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo03.gif b/src/img/c2-instrucciones-de-dibujo/dibujo03.gif
new file mode 100644
index 0000000..0e8f97f
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo03.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo04.gif b/src/img/c2-instrucciones-de-dibujo/dibujo04.gif
new file mode 100644
index 0000000..da3c64e
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo04.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo05.gif b/src/img/c2-instrucciones-de-dibujo/dibujo05.gif
new file mode 100644
index 0000000..6e9e716
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo05.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo06.gif b/src/img/c2-instrucciones-de-dibujo/dibujo06.gif
new file mode 100644
index 0000000..29e4a43
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo06.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo07.gif b/src/img/c2-instrucciones-de-dibujo/dibujo07.gif
new file mode 100644
index 0000000..0e22be8
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo07.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo08.gif b/src/img/c2-instrucciones-de-dibujo/dibujo08.gif
new file mode 100644
index 0000000..14c6279
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo08.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo09.gif b/src/img/c2-instrucciones-de-dibujo/dibujo09.gif
new file mode 100644
index 0000000..3a4499b
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo09.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo10.gif b/src/img/c2-instrucciones-de-dibujo/dibujo10.gif
new file mode 100644
index 0000000..3a389b6
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo10.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo11.gif b/src/img/c2-instrucciones-de-dibujo/dibujo11.gif
new file mode 100644
index 0000000..fa68394
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo11.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo12.gif b/src/img/c2-instrucciones-de-dibujo/dibujo12.gif
new file mode 100644
index 0000000..382e90f
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo12.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo13.gif b/src/img/c2-instrucciones-de-dibujo/dibujo13.gif
new file mode 100644
index 0000000..626a1bc
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo13.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo14.gif b/src/img/c2-instrucciones-de-dibujo/dibujo14.gif
new file mode 100644
index 0000000..114b60b
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo14.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo15.gif b/src/img/c2-instrucciones-de-dibujo/dibujo15.gif
new file mode 100644
index 0000000..55fbf34
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo15.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo16.gif b/src/img/c2-instrucciones-de-dibujo/dibujo16.gif
new file mode 100644
index 0000000..f4e9020
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo16.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo17.gif b/src/img/c2-instrucciones-de-dibujo/dibujo17.gif
new file mode 100644
index 0000000..ba7171a
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo17.gif
diff --git a/src/img/c2-instrucciones-de-dibujo/dibujo18.gif b/src/img/c2-instrucciones-de-dibujo/dibujo18.gif
new file mode 100644
index 0000000..7c075ed
--- /dev/null
+++ b/src/img/c2-instrucciones-de-dibujo/dibujo18.gif
diff --git a/src/img/c2-patrones-lineas.png b/src/img/c2-patrones-lineas.png
new file mode 100644
index 0000000..664e8b5
--- /dev/null
+++ b/src/img/c2-patrones-lineas.png
diff --git a/src/img/c2-patrones-lineas/01boceto.png b/src/img/c2-patrones-lineas/01boceto.png
new file mode 100644
index 0000000..26080c8
--- /dev/null
+++ b/src/img/c2-patrones-lineas/01boceto.png
diff --git a/src/img/c2-patrones-lineas/02dimensiones.png b/src/img/c2-patrones-lineas/02dimensiones.png
new file mode 100644
index 0000000..4e357e4
--- /dev/null
+++ b/src/img/c2-patrones-lineas/02dimensiones.png
diff --git a/src/img/c2-patrones-lineas/03puntos.png b/src/img/c2-patrones-lineas/03puntos.png
new file mode 100644
index 0000000..ed992e3
--- /dev/null
+++ b/src/img/c2-patrones-lineas/03puntos.png
diff --git a/src/img/c2-patrones-lineas/04coordenadas.png b/src/img/c2-patrones-lineas/04coordenadas.png
new file mode 100644
index 0000000..b902c32
--- /dev/null
+++ b/src/img/c2-patrones-lineas/04coordenadas.png
diff --git a/src/img/c2-patrones-lineas/05resultado.png b/src/img/c2-patrones-lineas/05resultado.png
new file mode 100644
index 0000000..62d5e80
--- /dev/null
+++ b/src/img/c2-patrones-lineas/05resultado.png
diff --git a/src/img/c3-copos-flores/flor-centro.png b/src/img/c3-copos-flores/flor-centro.png
new file mode 100644
index 0000000..036dba1
--- /dev/null
+++ b/src/img/c3-copos-flores/flor-centro.png
diff --git a/src/img/c3-copos-flores/flor-variacion.png b/src/img/c3-copos-flores/flor-variacion.png
new file mode 100644
index 0000000..bef9b4e
--- /dev/null
+++ b/src/img/c3-copos-flores/flor-variacion.png
diff --git a/src/img/c3-copos-flores/flor-variaciones.png b/src/img/c3-copos-flores/flor-variaciones.png
new file mode 100644
index 0000000..49f2c37
--- /dev/null
+++ b/src/img/c3-copos-flores/flor-variaciones.png
diff --git a/src/img/c3-copos-flores/petalo-trasladado.png b/src/img/c3-copos-flores/petalo-trasladado.png
new file mode 100644
index 0000000..d21f6f1
--- /dev/null
+++ b/src/img/c3-copos-flores/petalo-trasladado.png
diff --git a/src/img/c3-copos-flores/petalo.png b/src/img/c3-copos-flores/petalo.png
new file mode 100644
index 0000000..03aed84
--- /dev/null
+++ b/src/img/c3-copos-flores/petalo.png
diff --git a/src/img/c3-copos-flores/petalos-rotados-repetidos.png b/src/img/c3-copos-flores/petalos-rotados-repetidos.png
new file mode 100644
index 0000000..420eb0a
--- /dev/null
+++ b/src/img/c3-copos-flores/petalos-rotados-repetidos.png
diff --git a/src/img/canvas-puntos.png b/src/img/canvas-puntos.png
new file mode 100644
index 0000000..7d46b8e
--- /dev/null
+++ b/src/img/canvas-puntos.png
diff --git a/src/img/canvas.png b/src/img/canvas.png
new file mode 100644
index 0000000..fcf9472
--- /dev/null
+++ b/src/img/canvas.png
diff --git a/src/img/cc0_small.png b/src/img/cc0_small.png
new file mode 100644
index 0000000..36c810b
--- /dev/null
+++ b/src/img/cc0_small.png
diff --git a/src/img/cilindrocono-complejo.png b/src/img/cilindrocono-complejo.png
new file mode 100644
index 0000000..1008432
--- /dev/null
+++ b/src/img/cilindrocono-complejo.png
diff --git a/src/img/cilindrocono-simple.png b/src/img/cilindrocono-simple.png
new file mode 100644
index 0000000..5e97809
--- /dev/null
+++ b/src/img/cilindrocono-simple.png
diff --git a/src/img/cilindros-aleatorios.png b/src/img/cilindros-aleatorios.png
new file mode 100644
index 0000000..a7f385d
--- /dev/null
+++ b/src/img/cilindros-aleatorios.png
diff --git a/src/img/cilindros-periodicos-desfasados.png b/src/img/cilindros-periodicos-desfasados.png
new file mode 100644
index 0000000..81facde
--- /dev/null
+++ b/src/img/cilindros-periodicos-desfasados.png
diff --git a/src/img/cilindros-periodicos.png b/src/img/cilindros-periodicos.png
new file mode 100644
index 0000000..efe566a
--- /dev/null
+++ b/src/img/cilindros-periodicos.png
diff --git a/src/img/cilindros-tradicionales.png b/src/img/cilindros-tradicionales.png
new file mode 100644
index 0000000..59bcbbc
--- /dev/null
+++ b/src/img/cilindros-tradicionales.png
diff --git a/src/img/circulo-random.png b/src/img/circulo-random.png
new file mode 100644
index 0000000..3d91359
--- /dev/null
+++ b/src/img/circulo-random.png
diff --git a/src/img/circuloColumnas.png b/src/img/circuloColumnas.png
new file mode 100644
index 0000000..81bff2f
--- /dev/null
+++ b/src/img/circuloColumnas.png
diff --git a/src/img/circulos-radio-rotacion.png b/src/img/circulos-radio-rotacion.png
new file mode 100644
index 0000000..22cb49d
--- /dev/null
+++ b/src/img/circulos-radio-rotacion.png
diff --git a/src/img/conos-aleatorios.png b/src/img/conos-aleatorios.png
new file mode 100644
index 0000000..e9b932b
--- /dev/null
+++ b/src/img/conos-aleatorios.png
diff --git a/src/img/conos-periodicos.png b/src/img/conos-periodicos.png
new file mode 100644
index 0000000..be0990a
--- /dev/null
+++ b/src/img/conos-periodicos.png
diff --git a/src/img/conos-tradicionales.png b/src/img/conos-tradicionales.png
new file mode 100644
index 0000000..09be26a
--- /dev/null
+++ b/src/img/conos-tradicionales.png
diff --git a/src/img/directionalLight.png b/src/img/directionalLight.png
new file mode 100644
index 0000000..258755d
--- /dev/null
+++ b/src/img/directionalLight.png
diff --git a/src/img/ellipse.png b/src/img/ellipse.png
new file mode 100644
index 0000000..c5d6888
--- /dev/null
+++ b/src/img/ellipse.png
diff --git a/src/img/escaleraCaracol.png b/src/img/escaleraCaracol.png
new file mode 100644
index 0000000..9b0ebe5
--- /dev/null
+++ b/src/img/escaleraCaracol.png
diff --git a/src/img/escaleras30.png b/src/img/escaleras30.png
new file mode 100644
index 0000000..a482f5c
--- /dev/null
+++ b/src/img/escaleras30.png
diff --git a/src/img/escalerasLoop.png b/src/img/escalerasLoop.png
new file mode 100644
index 0000000..5b6f1be
--- /dev/null
+++ b/src/img/escalerasLoop.png
diff --git a/src/img/espiral.png b/src/img/espiral.png
new file mode 100644
index 0000000..49996b0
--- /dev/null
+++ b/src/img/espiral.png
diff --git a/src/img/filadecubos.png b/src/img/filadecubos.png
new file mode 100644
index 0000000..7a3bdf5
--- /dev/null
+++ b/src/img/filadecubos.png
diff --git a/src/img/flor-16petalos.png b/src/img/flor-16petalos.png
new file mode 100644
index 0000000..aca5ef5
--- /dev/null
+++ b/src/img/flor-16petalos.png
diff --git a/src/img/franjas-arcoiris.png b/src/img/franjas-arcoiris.png
new file mode 100644
index 0000000..a103c9f
--- /dev/null
+++ b/src/img/franjas-arcoiris.png
diff --git a/src/img/franjas-azulmagenta.png b/src/img/franjas-azulmagenta.png
new file mode 100644
index 0000000..d52980b
--- /dev/null
+++ b/src/img/franjas-azulmagenta.png
diff --git a/src/img/franjas-azulpeach.png b/src/img/franjas-azulpeach.png
new file mode 100644
index 0000000..5a9c1ed
--- /dev/null
+++ b/src/img/franjas-azulpeach.png
diff --git a/src/img/franjas-fuego.png b/src/img/franjas-fuego.png
new file mode 100644
index 0000000..79ec7e6
--- /dev/null
+++ b/src/img/franjas-fuego.png
diff --git a/src/img/franjas-grises.png b/src/img/franjas-grises.png
new file mode 100644
index 0000000..976ff83
--- /dev/null
+++ b/src/img/franjas-grises.png
diff --git a/src/img/franjas-negras.png b/src/img/franjas-negras.png
new file mode 100644
index 0000000..e2d5ebf
--- /dev/null
+++ b/src/img/franjas-negras.png
diff --git a/src/img/hexagono.png b/src/img/hexagono.png
new file mode 100644
index 0000000..d9da128
--- /dev/null
+++ b/src/img/hexagono.png
diff --git a/src/img/img-ejemplo-mask-circulos.jpg b/src/img/img-ejemplo-mask-circulos.jpg
new file mode 100644
index 0000000..71ff0df
--- /dev/null
+++ b/src/img/img-ejemplo-mask-circulos.jpg
diff --git a/src/img/img-ejemplo-mask-franjas.jpg b/src/img/img-ejemplo-mask-franjas.jpg
new file mode 100644
index 0000000..aec5c23
--- /dev/null
+++ b/src/img/img-ejemplo-mask-franjas.jpg
diff --git a/src/img/img-ejemplo-pincel-capas.jpg b/src/img/img-ejemplo-pincel-capas.jpg
new file mode 100644
index 0000000..ac91b91
--- /dev/null
+++ b/src/img/img-ejemplo-pincel-capas.jpg
diff --git a/src/img/img-ejemplo-pincel.jpg b/src/img/img-ejemplo-pincel.jpg
new file mode 100644
index 0000000..57762ff
--- /dev/null
+++ b/src/img/img-ejemplo-pincel.jpg
diff --git a/src/img/img-ejemplo-recortes.jpg b/src/img/img-ejemplo-recortes.jpg
new file mode 100644
index 0000000..93d4691
--- /dev/null
+++ b/src/img/img-ejemplo-recortes.jpg
diff --git a/src/img/jenga.png b/src/img/jenga.png
new file mode 100644
index 0000000..7eb0406
--- /dev/null
+++ b/src/img/jenga.png
diff --git a/src/img/jenga2.png b/src/img/jenga2.png
new file mode 100644
index 0000000..0c4ad27
--- /dev/null
+++ b/src/img/jenga2.png
diff --git a/src/img/jengaRot.png b/src/img/jengaRot.png
new file mode 100644
index 0000000..dd4eaf4
--- /dev/null
+++ b/src/img/jengaRot.png
diff --git a/src/img/kopimi_square.png b/src/img/kopimi_square.png
new file mode 100644
index 0000000..c17a9a1
--- /dev/null
+++ b/src/img/kopimi_square.png
diff --git a/src/img/ladrillos.jpg b/src/img/ladrillos.jpg
new file mode 100644
index 0000000..9459fc8
--- /dev/null
+++ b/src/img/ladrillos.jpg
diff --git a/src/img/line-detalle.png b/src/img/line-detalle.png
new file mode 100644
index 0000000..0cc349c
--- /dev/null
+++ b/src/img/line-detalle.png
diff --git a/src/img/line.png b/src/img/line.png
new file mode 100644
index 0000000..661596f
--- /dev/null
+++ b/src/img/line.png
diff --git a/src/img/lissajous-3-4.png b/src/img/lissajous-3-4.png
new file mode 100644
index 0000000..9131297
--- /dev/null
+++ b/src/img/lissajous-3-4.png
diff --git a/src/img/pgraphics-ejemplo-blur.jpg b/src/img/pgraphics-ejemplo-blur.jpg
new file mode 100644
index 0000000..31a9521
--- /dev/null
+++ b/src/img/pgraphics-ejemplo-blur.jpg
diff --git a/src/img/piramide.png b/src/img/piramide.png
new file mode 100644
index 0000000..0eb8688
--- /dev/null
+++ b/src/img/piramide.png
diff --git a/src/img/piramideSide.png b/src/img/piramideSide.png
new file mode 100644
index 0000000..773f956
--- /dev/null
+++ b/src/img/piramideSide.png
diff --git a/src/img/piramideTop.png b/src/img/piramideTop.png
new file mode 100644
index 0000000..9031d99
--- /dev/null
+++ b/src/img/piramideTop.png
diff --git a/src/img/pointLight.png b/src/img/pointLight.png
new file mode 100644
index 0000000..c6067c2
--- /dev/null
+++ b/src/img/pointLight.png
diff --git a/src/img/puntos-4x4.png b/src/img/puntos-4x4.png
new file mode 100644
index 0000000..8e16b5e
--- /dev/null
+++ b/src/img/puntos-4x4.png
diff --git a/src/img/puntos-random-en-circulo.png b/src/img/puntos-random-en-circulo.png
new file mode 100644
index 0000000..21929dc
--- /dev/null
+++ b/src/img/puntos-random-en-circulo.png
diff --git a/src/img/quad.png b/src/img/quad.png
new file mode 100644
index 0000000..2589a32
--- /dev/null
+++ b/src/img/quad.png
diff --git a/src/img/radianes.png b/src/img/radianes.png
new file mode 100644
index 0000000..b7b5360
--- /dev/null
+++ b/src/img/radianes.png
diff --git a/src/img/radios.png b/src/img/radios.png
new file mode 100644
index 0000000..b7e7945
--- /dev/null
+++ b/src/img/radios.png
diff --git a/src/img/rect-center.png b/src/img/rect-center.png
new file mode 100644
index 0000000..1204d78
--- /dev/null
+++ b/src/img/rect-center.png
diff --git a/src/img/rect-corners.png b/src/img/rect-corners.png
new file mode 100644
index 0000000..8260f1e
--- /dev/null
+++ b/src/img/rect-corners.png
diff --git a/src/img/rect.png b/src/img/rect.png
new file mode 100644
index 0000000..36a3662
--- /dev/null
+++ b/src/img/rect.png
diff --git a/src/img/rectangulo-blanco-rotado.png b/src/img/rectangulo-blanco-rotado.png
new file mode 100644
index 0000000..6eea3c6
--- /dev/null
+++ b/src/img/rectangulo-blanco-rotado.png
diff --git a/src/img/rectangulo-blanco.png b/src/img/rectangulo-blanco.png
new file mode 100644
index 0000000..1e3b4fc
--- /dev/null
+++ b/src/img/rectangulo-blanco.png
diff --git a/src/img/reticula-condicional1.png b/src/img/reticula-condicional1.png
new file mode 100644
index 0000000..c1cd4d5
--- /dev/null
+++ b/src/img/reticula-condicional1.png
diff --git a/src/img/reticula-condicional2.png b/src/img/reticula-condicional2.png
new file mode 100644
index 0000000..d2f4092
--- /dev/null
+++ b/src/img/reticula-condicional2.png
diff --git a/src/img/reticula-funciones.png b/src/img/reticula-funciones.png
new file mode 100644
index 0000000..1a1e165
--- /dev/null
+++ b/src/img/reticula-funciones.png
diff --git a/src/img/reticula-funciones2.png b/src/img/reticula-funciones2.png
new file mode 100644
index 0000000..41d824d
--- /dev/null
+++ b/src/img/reticula-funciones2.png
diff --git a/src/img/reticula-modulo.png b/src/img/reticula-modulo.png
new file mode 100644
index 0000000..3afcb36
--- /dev/null
+++ b/src/img/reticula-modulo.png
diff --git a/src/img/reticula-modulo2.png b/src/img/reticula-modulo2.png
new file mode 100644
index 0000000..2885d72
--- /dev/null
+++ b/src/img/reticula-modulo2.png
diff --git a/src/img/reticula-parabola1.png b/src/img/reticula-parabola1.png
new file mode 100644
index 0000000..69554f6
--- /dev/null
+++ b/src/img/reticula-parabola1.png
diff --git a/src/img/reticula-parabola2.png b/src/img/reticula-parabola2.png
new file mode 100644
index 0000000..f243084
--- /dev/null
+++ b/src/img/reticula-parabola2.png
diff --git a/src/img/reticula-plano.png b/src/img/reticula-plano.png
new file mode 100644
index 0000000..4bbd5f8
--- /dev/null
+++ b/src/img/reticula-plano.png
diff --git a/src/img/reticula-plano2.png b/src/img/reticula-plano2.png
new file mode 100644
index 0000000..d07b22b
--- /dev/null
+++ b/src/img/reticula-plano2.png
diff --git a/src/img/reticula-trigo1.png b/src/img/reticula-trigo1.png
new file mode 100644
index 0000000..fb0f9dc
--- /dev/null
+++ b/src/img/reticula-trigo1.png
diff --git a/src/img/shapeModes.png b/src/img/shapeModes.png
new file mode 100644
index 0000000..1bc99da
--- /dev/null
+++ b/src/img/shapeModes.png
diff --git a/src/img/sin.png b/src/img/sin.png
new file mode 100644
index 0000000..dc44aea
--- /dev/null
+++ b/src/img/sin.png
diff --git a/src/img/sin4.png b/src/img/sin4.png
new file mode 100644
index 0000000..5f9a348
--- /dev/null
+++ b/src/img/sin4.png
diff --git a/src/img/spotLight.png b/src/img/spotLight.png
new file mode 100644
index 0000000..cf59987
--- /dev/null
+++ b/src/img/spotLight.png
diff --git a/src/img/tabla-patrones.png b/src/img/tabla-patrones.png
new file mode 100644
index 0000000..641157c
--- /dev/null
+++ b/src/img/tabla-patrones.png
diff --git a/src/img/triangle.png b/src/img/triangle.png
new file mode 100644
index 0000000..a40d77e
--- /dev/null
+++ b/src/img/triangle.png
diff --git a/src/img/vertices-aristas-caras.png b/src/img/vertices-aristas-caras.png
new file mode 100644
index 0000000..22f692c
--- /dev/null
+++ b/src/img/vertices-aristas-caras.png
diff --git a/src/img/xyar.png b/src/img/xyar.png
new file mode 100644
index 0000000..425ff7e
--- /dev/null
+++ b/src/img/xyar.png
diff --git a/src/index.md b/src/index.md
new file mode 100644
index 0000000..8445942
--- /dev/null
+++ b/src/index.md
@@ -0,0 +1,122 @@
+---
+title: "🍃 jardínBit"
+---
+
+*inicios de código creativo con Processing.*
+
+# Notas y ejemplos
+
+## Dibujo
+
+### Bases
+
+* [[Canvas y sistema de coordenadas]](/notas/canvas-y-coordenadas.html)
+* [[Dibujo con puntos y líneas]](/notas/lineas.html)
+* [[Dibujo con figuras]](/notas/figuras.html)
+* [[Color]](/notas/color.html)
+* [[Notas sobre sintaxis]](/notas/sintaxis.html)
+
+### Polígonos, transformaciones y funciones
+
+* [[Dibujo de polígonos]](/notas/poligonos.html)
+* [[Transformaciones]](/notas/transformaciones.html)
+* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
+* [[Coordenadas polares]](/notas/coordenadas-polares.html)
+
+## Parámetros y variables
+
+### Bases
+
+* [[Variables: Fundamentos]](/notas/variables.html)
+* [[Operadores aritméticos]](/notas/aritmetica.html)
+* [[Operador módulo]](/notas/modulo.html)
+* [[Mapeo/conversión de valores]](/notas/map.html)
+
+### Más posibilidades
+
+* [[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
+* [[Variables y expresiones booleanas]](/notas/boolean.html)
+
+### Ángulos, aleatoriedad y oscilación
+
+* [[Números pseudo-aleatorios]](/notas/random.html)
+* [[Ángulos en radianes]](/notas/angulos.html)
+* [[Funciones trigonométricas]](/notas/trig.html)
+
+## Control de flujo
+
+### Fundamentos
+
+* [[Expresiones condicionales]](/notas/condicionales.html)
+* [[Ciclos while y for]](/notas/ciclos.html)
+
+### Dibujo con repetición
+
+* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
+* [[Gradientes de color]](/notas/gradientes.html)
+
+## Animación e interactividad
+
+* [[Ciclo de animación]](/notas/draw.html)
+* [[Interactividad con mouse y teclado]](/notas/interactividad.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
+* [[Visualización de contadores]](/notas/visualizacion-contadores.html)
+
+## Arreglos
+
+* [[Arreglos: Fundamentos]](/notas/arreglos.html)
+
+## Manipulación de imágenes
+
+* [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+* [[Imágenes: Colores, filtros]](/notas/imagenes-colores.html)
+* [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
+* [[Video: Estructuras básicas]](/notas/video.html)
+* [[Arreglo de pixeles]](/notas/pixeles.html)
+
+## Processing 3D
+
+### Fundamentos
+
+* [[P3D: Fundamentos y configuración]](/notasP3D/fundamentos.html)
+* [[P3D: Figuras básicas / primitivas]](/notasP3D/primitivas.html)
+* [[P3D: Transformaciones]](/notasP3D/transformaciones.html)
+
+### Repetición y abstracción
+
+* [[P3D: Ejemplos de Repetición]](/notasP3D/repeticion.html)
+* [[P3D: Ejemplos de Funciones]](/notasP3D/funciones.html)
+
+### Mallas
+
+* [[P3D: Mallas]](/notasP3D/mallas.html)
+* [[P3D: Sólidos cilíndricos y cónicos]](/notasP3D/cilindricos-y-conicos.html)
+* [[P3D: Retícula]](/notasP3D/reticula.html)
+
+### Apariencia
+
+* [[P3D: Iluminación]](/notasP3D/iluminacion.html)
+
+---
+
+# Tutoriales
+
+## Las bases
+
+* [Tutorial: Patrones con líneas](/tutoriales/c2-patrones-lineas.html)
+
+## Nivel intermedio
+
+* [Tutorial: Patrones con líneas con ciclos](/tutoriales/c3-patrones-lineas-ciclos.html)
+* [Tutorial: Copos y flores (Funciones y transformaciones)](/tutoriales/c3-copos-flores.html)
+
+---
+
+# Enlaces externos
+
+* [Brunirows Code: Programación en Processing (playlist youtube)](https://www.youtube.com/watch?v=vy3HN3uuhco&list=PLRHX1lEooNYrvCAMcnRc3HuH-06uAeICe)
+* [Air Room: Taller introducción a la Programación Creativa con Processing (playlist youtube)](https://www.youtube.com/c/Airroom/playlists?view=50&sort=dd&shelf_id=7)
+* [Processing Language Reference](https://processing.org/reference/)
+* [The Coding Train](https://thecodingtrain.com/) 
diff --git a/src/nav.html b/src/nav.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/nav.html
diff --git a/src/notas/angulos.md b/src/notas/angulos.md
new file mode 100644
index 0000000..bddc754
--- /dev/null
+++ b/src/notas/angulos.md
@@ -0,0 +1,55 @@
+---
+title: "Ángulos en radianes"
+---
+
+En el contexto de gráficas computacionales suele usarse la medida angular de *radianes* en vez de la de *grados*.
+
+*Un radián es el ángulo que corresponde a un fragmento de circunferencia cuya longitud es igual a su radio.*
+
+El ángulo que corresponde a la circunferencia completa es 2π radianes.
+
+En Processing los ángulos suelen considerarse en el sentido de las manecillas de reloj (*clockwise*).
+
+El siguiente diagrama muestra algunos valores comunes de ángulos medidos en radianes:
+
+![](/img/radianes.png)
+
+## Constantes
+
+Processing cuenta con las siguientes constantes para referirse a valores comunes de ángulos en radianes:
+
+* `TWO_PI`: Una vuelta completa (360 grados)
+* `TAU`: Lo mismo que `TWO_PI`
+* `PI`: Media vuelta (180 grados)
+* `HALF_PI`: Un cuarto de vuelta (90 grados)
+* `QUARTER_PI`: Un octavo de vuelta (45 grados)
+
+Estas constantes se comportan como cualquier literal numérica y podemos realizar operaciones aritméticas con ellas.
+
+Por ejemplo, las tres asignaciones siguientes serían equivalentes:
+
+```java
+float a = HALF_PI;
+float b = PI/2;
+float c = PI*0.5;
+```
+
+## Funciones de conversión
+
+### `radians( a )`
+
+Esta función convierte un ángulo en grados a un valor en radianes.
+
+```java
+// equivalente a asignar HALF_PI a angulo:
+float angulo = radians( 90 );
+```
+
+### `degrees( a )`
+
+Esta función convierte un ángulo en radianes a un valor en grados.
+
+```java
+// equivalente a asignar 90 a grados:
+float grados = degrees( HALF_PI );
+```
diff --git a/src/notas/animacion-basica.md b/src/notas/animacion-basica.md
new file mode 100644
index 0000000..dcda732
--- /dev/null
+++ b/src/notas/animacion-basica.md
@@ -0,0 +1,221 @@
+---
+title: "Animación básica con acumuladores"
+---
+
+Podemos crear animaciones parametrizando nuestros dibujos con variables que se comporten como *acumuladores*: variables a las que en cada *frame* de animación se les incremente o decremente una cantidad.
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
+
+# Velocidad constante
+
+## Crecimiento indefinido
+
+Podemos tener un acumulador que se incremente indefinidamente. 
+
+Un posible uso es mover una serie de figuras dibujadas respecto a esa variable.
+
+```java
+// par de cuadrados que descienden poco a poco,
+// el segundo se revela después de un tiempo
+float y;
+void setup(){
+ size(400, 400);
+ y = 0;
+}
+
+void draw(){
+  background(0);
+ // dibujos respecto a "y":
+ // este cuadrado empieza en el lienzo:
+ rect(100, y, 50, 50);
+ // este cuadrado empieza 200 pixeles arriba del lienzo:
+ rect(200, y-200, 50, 50); 
+ 
+ // incremento de "y":
+ y = y + 0.5;
+}
+```
+
+## Crece y reinicia
+
+En ocasiones queremos reiniciar el acumulador cuando se cumple cierta condición; para esto usamos expresiones condicionales.
+
+[[Expresiones condicionales]](/notas/condicionales.html)
+
+```java
+// cuadrado que desciende y al llegar abajo reinicia hasta arriba
+float y;
+void setup(){
+ size(400, 400);
+ y = -50;
+}
+
+void draw(){
+  background(0);
+ // cuadrado dibujado respecto a "y":
+ rect(150, y, 50, 50);
+ 
+ // incremento de "y":
+ y = y + 2;
+
+ // reinicia "y" cuando sea mayor o igual a height
+ if( y >= height){
+  y = -50; 
+ }
+}
+```
+
+## Rebote
+
+En otros casos buscaremos que la dirección de crecimiento cambie y se mantenga hasta que se cumpla cierta condición límite.
+
+### Rebote con bandera (*flag*)
+
+Podemos usar una variable como bandera (*flag*) que indique la dirección de movimiento y que le sirva al programa para determinar si ha de incrementar o decrementar a nuestro acumulador..
+
+Esta variable la invertimos en las condiciones límite. Nota el uso del operador NOT (`!`) para invertir el valor booleano.
+
+[[Variables y expresiones booleanas]](/notas/boolean.html)
+
+```java
+float y;
+boolean avanza;
+void setup() {
+  size(400, 400);
+  y = 0;
+  avanza = true;
+}
+
+void draw() {
+  background(0);
+  // cuadrado dibujado respecto a "y":
+  rect(150, y, 50, 50);
+
+  if (avanza) { // si "avanza" es true...
+    y = y + 2; // incrementa
+  } else { // si no...
+    y = y - 2; // decrementa
+  }
+
+  // invierte dirección al llegar a los bordes
+  // "si la posición es mayor a cierto límite,
+  // o si es menor a otro límite, invierte"
+  if ( y >= height-50 || y<= 0) {
+    avanza = !avanza;
+  }
+}
+```
+
+### Rebote con velocidad en variable
+
+El incremento al acumulador puede ser una variable que cambia de signo en las condiciones límite.
+
+En lugar de tener lo siguiente para cada dirección:
+
+```java
+y = y + 2; // incrementa
+
+y = y - 2; // decrementa
+```
+
+Usamos una variable a la que nombramos `vely` para referirnos al `2` o al `-2`:
+
+```java
+y = y + vely; // vely será 2 o -2
+```
+
+Aquí el programa completo:
+
+```java
+float y;
+float vely; // esta variable es el incremento al acumulador
+
+void setup() {
+  size(400, 400);
+  y = 0;
+  vely = 2; // valor inicial de velocidad
+}
+
+void draw() {
+  background(0);
+  // cuadrado dibujado respecto a "y":
+  rect(150, y, 50, 50);
+
+  // incrementa/decrementa la posición
+  y = y + vely;
+
+  // invierte velocidad al llegar a los bordes
+  if ( y >= height-50 || y<= 0) {
+    vely = -vely;
+  }
+}
+```
+
+# Velocidad variable
+
+Asignar el incremento de nuestro acumulador a una variable nos permite otros comportamientos.
+
+## Aceleración
+
+La aceleración sucede al incrementar en cada *frame* la cantidad que estamos incrementando a nuestro acumulador original.
+
+### Caída con rebote
+
+Este ejemplo tiene un acumulador para la posición `y` cuyo incremento es dado por `vely`, y a su vez `vely` es incrementado en cada *frame*.
+
+Al llegar al borde inferior, el signo de la velocidad se invierte.
+
+```java
+float y;
+float vely;
+void setup() {
+  size(400, 400);
+  y = 0;
+  vely = 0;
+}
+
+void draw() {
+  background(0);
+  // cuadrado dibujado respecto a "y":
+  rect(150, y, 50, 50);
+
+  // incrementamos el acumulador
+  y = y + vely;
+  // incrementamos la velocidad
+  vely = vely + 0.01;
+
+  // rebota al llegar al borde
+  if ( y >= height-50) {
+    vely = -vely;
+  }
+}
+```
+
+¿Qué valor habría que asignarle a `vely` cuando `y` llega al borde, para que el cuadrado se detenga?
+
+¿Qué pasa si escribes una expresión condicional para que una tecla le asigne a `vely` un valor negativo?
+
+## Duda aleatoria
+
+El incremento a nuestro acumulador puede cambiar aleatoriamente en cada *frame*
+
+```java
+float y;
+float vely;
+void setup() {
+  size(400, 400);
+  y = 0;
+  vely = 0;
+}
+
+void draw() {
+  background(0);
+  // cuadrado dibujado respecto a "y":
+  rect(150, y, 50, 50);
+
+  // incrementamos el acumulador
+  y = y + vely;
+  // asignamos una velocidad aleatoria
+  vely = random(-1, 2);
+}
+```
diff --git a/src/notas/animacion-frameCount.md b/src/notas/animacion-frameCount.md
new file mode 100644
index 0000000..b2ed539
--- /dev/null
+++ b/src/notas/animacion-frameCount.md
@@ -0,0 +1,127 @@
+---
+title: "Animación respecto al tiempo (*frameCount*)"
+---
+
+Notas sobre animación utilizando la variable especial `frameCount`.
+
+# frameCount
+
+La variable `frameCount` es una variable especial de Processing de tipo `int` que indica en qué número de *frame* está el sketch, creciendo indefinidamente. 
+
+La podemos usar directamente como parámetro en alguna parte de nuestro dibujo.
+
+```java
+void setup(){
+  size( 640, 480 );
+}
+
+void draw(){
+  // reestablece el fondo:
+  background( 255 );
+
+  // dibuja un círculo en movimiento,
+  // la posición en X corresponde al número de frame:
+  ellipse( frameCount, 240, 50, 50);
+}
+```
+
+# Loops: frameCount con módulo
+
+La variable `frameCount` crece indefinidamente. Podemos usar el operador *módulo* para obtener una secuencia de números que se repita y que vaya entre 0 y alguna cantidad.
+
+[[Operador módulo]](/notas/modulo.html)
+
+Por ejemplo:
+
+```java
+// 'frameLoop' irá de 0 a 29:
+int frameLoop = frameCount % 30;
+
+// la posición en X cambiará entre 0 y 29:
+ellipse( frameLoop, 240, 50, 50);
+``` 
+
+# Escalas de tiempo
+
+Si necesitamos que nuestros parámetros cambien más lento, podemos dividirlos entre números mayores a 1:
+
+```java
+// el círculo amarillo se moverá a la mitad de velocidad que el azul:
+
+// color azul:
+fill( 0, 0, 255);
+ellipse( frameCount, 200, 50, 50);
+
+// color amarillo:
+fill( 255, 255, 0);
+ellipse( frameCount/2, 300, 50, 50);
+``` 
+
+*Nota: Dividir entre un número mayor a 1 es lo mismo que multiplicar por un número menor a uno*. 
+
+```java
+// esta multiplicación regresa un float, y esta división un int
+frameCount*0.5 == frameCount/2
+```
+
+También podemos hacer lo contrario, multiplicar las variables por números mayores a 1 para ir más rápido:
+
+```java
+// el círculo amarillo se moverá al doble de velocidad que el azul:
+
+// color azul:
+fill( 0, 0, 255);
+ellipse( frameCount, 200, 50, 50);
+
+// color amarillo:
+fill( 255, 255, 0);
+ellipse( frameCount*2, 300, 50, 50);
+``` 
+
+Estas operaciones también las podemos aplicar al resultado de `frameCount % N`, ya sea directamente o en forma de variable:
+
+```java
+// frameLoop irá de 0 a 99:
+int frameLoop = frameCount % 100;
+
+// alenta el movimiento, y reduce su rango:
+ellipse( frameLoop*0.2, 200, 50, 50);
+
+// también podríamos escribir:
+
+ellipse( (frameCount % 100) * 0.2, 200, 50, 50);
+```
+
+# Mapeo
+
+La función `map( )` nos da más flexibilidad, pues la podemos utilizar para "convertir" un número que está dentro de un rango inicial, a su equivalente en un rango final.
+
+[[Mapeo/conversión de valores]](/notas/map.html)
+
+Por ejemplo, si queremos que la posición en `x` de un círculo vaya de 0 a `width` en el tiempo correspondiente a 30 *frames* de manera repetitiva, podríamos hacer lo siguiente:
+
+```java
+// cuenta repetidamente de 0 a 29 el número de frame
+int frameLoop = frameCount % 30;
+
+// convierte frameLoop
+// rango original: de 0 a 29
+// rango nuevo: de 0 a width
+float posicionX = map( frameLoop, 0, 29, 0, width);
+
+ellipse(posicionX, 240, 50, 50);
+```
+
+O si queremos que el color de fondo vaya de blanco a negro en 300 frames al iniciar el programa, y se quede así:
+
+```java
+// convierte frameCount
+// rango original: de 0 a 300
+// rango nuevo: de 255 (blanco) a 0 (negro)
+float brillo = map( frameCount, 0, 300, 255, 0);
+
+background( brillo );
+```
+
+En este caso, `frameCount` sigue creciendo más allá de 300 y el valor del brillo sigue disminuyendo, pero `background( )` convierte el valor negativo a 0.
+
diff --git a/src/notas/aritmetica.md b/src/notas/aritmetica.md
new file mode 100644
index 0000000..dca23ae
--- /dev/null
+++ b/src/notas/aritmetica.md
@@ -0,0 +1,35 @@
+---
+title: "Operadores aritméticos"
+---
+
+Processing cuenta con los siguientes operadores aritméticos para operaciones entre dos operandos numéricos:
+
+* suma: `+`
+* resta: `-`
+* multiplicación: `*`
+* división: `/`
+* módulo (residuo de la división): `%`
+
+[[Operador módulo]](/notas/modulo.html)
+
+Los operandos numéricos pueden ser números escritos explícitamente, o variables numéricas.
+
+Por ejemplo, todas las siguientes son operaciones válidas:
+
+```java
+int a = 2;
+int b = 5;
+
+int x = 1 + 2; // suma dos números
+int y = a + 2; // suma variable y número
+int z = a + b; // suma variables
+```
+
+También están los siguientes operadores para modificar el valor de una variable. Suponieno que la variable se llama `a`:
+
+* incrementa 1: `a++`
+* decrementa 1: `a--`
+* incrementa una cantidad 'b': `a += b`
+* decrementa una cantidad 'b': `a -= b`
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)
diff --git a/src/notas/arreglos.md b/src/notas/arreglos.md
new file mode 100644
index 0000000..c8176b0
--- /dev/null
+++ b/src/notas/arreglos.md
@@ -0,0 +1,312 @@
+---
+title: "Arreglos: Fundamentos"
+---
+
+Los arreglos (*arrays*) son una manera sistematizada de almacenar múltiples variables del mismo tipo. 
+
+En combinación con ciclos `while` o `for`, nos permiten programar rutinas que actúan sobre  diversos valores a la vez.
+
+[[Ciclos while y for]](/notas/ciclos.html)
+
+# Planteamiento del problema
+
+## Una variable
+
+Partimos de este ejemplo de código de animación básica con acumuladores, en el que un punto se mueve hacia la derecha y al llegar al borde vuelve a empezar su camino en la izquierda.
+
+[[Animación básica con acumuladores]](/notas/animacion-basica.html)
+
+```java
+// 1) variable para almacenar la posición horizontal del punto
+float px; 
+
+void setup(){
+  size(400, 400);
+  strokeWeight(10);
+  stroke(255);
+
+  px = 0; // 2) valor inicial de posición
+}
+
+void draw(){
+ background(0);
+ // 3) dibuja el punto con pos. horizontal: px
+ // y posición vertical: 200
+ point(px, 200);
+ 
+ // 4) incrementa la posición horizontal
+ px = px + 2;
+ // 5) y si llega al borde derecho, reinicia
+ if(px > width){
+  px = 0; 
+ }
+}
+```
+
+## Múltiples variables, sin arreglos
+
+Supongamos que queremos tener más puntos moviéndose de la misma manera, pero empezando en diferentes posiciones.
+
+Previo a utilizar arreglos, lo que haríamos sería crear una variable por cada punto y repetir por cada una los 5 pasos del ejemplo previo.
+
+Un ejemplo con tres puntos se vería así:
+
+```java
+// 1) variables para almacenar las posiciones horizontales de los puntos
+float px1, px2, px3; 
+
+void setup(){
+  size(400, 400);
+  strokeWeight(10);
+  stroke(255);
+
+// 2) valor inicial de posición
+  px1 = 0; 
+  px2 = 50; 
+  px3 = 200; 
+}
+
+void draw(){
+ background(0);
+ // 3) dibuja los puntos con pos. horizontal: px
+ // y posición vertical: 200
+ point(px1, 200);
+ point(px2, 200);
+ point(px3, 200);
+ 
+ // 4) incrementa las posiciones horizontales
+ px1 = px1 + 2;
+ px2 = px2 + 2;
+ px3 = px3 + 2;
+
+ // 5) y si alguna llega al borde derecho, reinicia
+ if(px1 > width){
+  px1 = 0; 
+ }
+ if(px2 > width){
+  px2 = 0; 
+ }
+ if(px3 > width){
+  px3 = 0; 
+ }
+}
+```
+
+Tal vez con tres puntos todavía es manejable, pero imagina cómo se vería el código con 5, 10, o 100 puntos.
+
+Los arreglos nos permitirán tener un código con una extensión al primero, aunque tengamos miles de puntos.
+
+## Con arreglos
+
+El mismo programa, con arreglos, podría quedar de la siguiente forma:
+
+```java
+// 1) arreglo para almacenar las posiciones horizontales de los puntos
+float[] px;
+
+void setup(){
+  size(400, 400);
+  strokeWeight(10);
+  stroke(255);
+
+// 2) crea e inicializa arreglo con 3 puntos:
+  px = new float[3];
+  px[0] = 0; 
+  px[1] = 50; 
+  px[2] = 200; 
+}
+
+void draw(){
+  background(0);
+
+  // por cada elemento del arreglo...
+  for (int i=0; i<px.length; i++) {
+    // 3) dibuja los puntos con pos. horizontal: px[i]
+    // y posición vertical: 200
+    point(px[i], 200);
+
+    // 4) incrementa la posición horizontal
+    px[i] = px[i] + 2;
+
+    // 5) y si alguna llega al borde derecho, reinicia
+    if (px[i] > width) {
+      px[i] = 0;
+    }
+  }
+}
+```
+
+# Notación
+
+Los símbolos que nos van a indicar que estamos usando arreglos son los corchetes `[ ]`.
+
+## Declaración
+
+Declaramos un arreglo con su tipo de dato y los corchetes:
+
+```java
+float[] posiciones; // declara arreglo
+```
+
+## Creación
+
+A diferencia de otras variables básicas, antes de poder usar un arreglo necesitamos crearlo.
+
+Al crearlo, indicamos el número de elementos que contendrá:
+
+```java
+posiciones = new float[100]; // crea arreglo de 100 elementos
+```
+## Atributo `.length`
+
+Los arreglos tienen un atributo `.length` que nos indica el número de elementos que contiene.
+
+```java
+println( posiciones.length ); // imprime tamaño del arreglo
+```
+
+## Asignación y lectura
+
+Cada elemento del arreglo tiene un **índice** numérico con el cual lo podemos ubicar. Podemos visualizarlo también como una *dirección*.
+
+Los elementos están numerados a partir de 0, y llegan hasta `.length - 1`.
+
+Por ejemplo, un arreglo de 5 elementos tendrá los índices 0, 1, 2, 3, 4.
+
+Accederemos a cada índice con los corchetes `[ ]`:
+
+```java
+posiciones[0] = 200; // asigna 200 a la primera posición del arreglo
+posiciones[1] = 10; // asigna 10 a la segunda posición del arreglo
+```
+
+Esa notación la podemos utilizar en lugar de cualquier variable.
+
+Por ejemplo, aquí la tercera posición del arreglo se comporta como acumulador, leyendo el valor del elemento, sumándole 5, y guardando el resultado en la misma posición:
+
+```java
+posiciones[2] = posiciones[2] + 5;
+```
+
+Cuando queremos utilizar un índice fuera del rango del arreglo, recibiremos un error `ArrayIndexOutOfBoundsException`.
+
+## Ciclos `for`
+
+Una de las principales ventajas de los arreglos es que como podemos acceder a sus elementos a través de un valor numérico (el *índice*), podemos hacer que ese sea una variable que se incrementa de uno en uno (un *contador*).
+
+La notación más utilizada es con una variable de tipo `int` llamada `i` que funciona como índice, y que recorre cada posición del arreglo con un ciclo `for` de la siguiente forma:
+
+```java
+for( int i=0; i<posiciones.length; i++){
+  // realiza acciones con posiciones[i]
+}
+```
+
+Lo que escribiremos dentro del ciclo `for` requiere un trabajo previo de identificar qué acciones son las que tomamos por cada elemento del arreglo, qué tienen en común, para entonces abstraerlas en términos de `i`.
+
+### Inicializaciones
+
+Este ejemplo inicializa todos los valores del arreglo en 0:
+
+```java
+for( int i=0; i<posiciones.length; i++){
+  posiciones[i] = 0;
+}
+```
+
+Y este asigna un valor aleatorio distinto a cada elemento:
+
+```java
+for( int i=0; i<posiciones.length; i++){
+  posiciones[i] = random(width);
+}
+```
+
+Aquí le asignamos un valor dado por un acumulador:
+
+```java
+float x = 0;
+for( int i=0; i<posiciones.length; i++){
+  posiciones[i] = x;
+  x = x + 10;
+}
+```
+
+### Lectura
+
+Este ejemplo dibuja tantos puntos como elementos del arreglo, usando el valor leído como posición horizontal:
+
+```java
+for( int i=0; i<posiciones.length; i++){
+  point( posiciones[i], 200 );
+}
+```
+
+### Incrementos, condicionales
+
+Este ciclo fue extraído del ejemplo de arriba. Aquí cada elemento del arreglo se incrementa y cuando supera un límite es reiniciado a 0
+
+```java
+for( int i=0; i<posiciones.length; i++){
+  posiciones[i] = posiciones[i] + 10;
+  if( posiciones[i] > width ){
+    posiciones[i] = 0;
+  }
+}
+```
+
+# Multiplicidades
+
+Podemos crear tantos arreglos como queramos. Si todos tienen el mismo tamaño, los podemos utilizar para referirse a diferentes características de una misma entidad.
+
+Por ejemplo, los puntos del ejemplo de arriba pueden tener diferente posición vertical además de diferente posición horizontal. Este *sketch* inicializa 100 de ellos con posición aleatoria y los mueve en la misma dirección, reiniciándolos al llegar al final:
+
+```java
+// 1) arreglos para almacenar posiciones x,y de los puntos
+float[] px;
+float[] py;
+
+
+void setup() {
+  size(400, 400);
+  strokeWeight(10);
+  stroke(255);
+
+  // 2) crea e inicializa arreglos con 100 elementos:
+  px = new float[100];
+  py = new float[100];
+
+  for (int i=0; i<px.length; i++) {
+    px[i] = random(width);
+    py[i] = random(height);
+  }
+}
+
+void draw() {
+  background(0);
+
+  // por cada elemento del arreglo...
+  for (int i=0; i<px.length; i++) {
+    // 3) dibuja los puntos con pos. horizontal: px[i]
+    // y posición vertical py[i]
+    point(px[i], py[i]);
+
+    // 4) incrementa la posición horizontal
+    px[i] = px[i] + 2;
+
+    // 5) y si alguna llega al borde derecho, reinicia
+    if (px[i] > width) {
+      px[i] = 0;
+    }
+
+  }// cierra ciclo for
+  
+}
+
+```
+
+¿Cómo harías que los puntos se muevan en el eje vertical en vez del horizontal?
+
+¿Cómo harías que al llegar al borde derecho, los puntos cambien su posición vertical a una nueva posición aleatoria? 
+
+¿Cómo harías que cada punto tuviera una velocidad distinta?
diff --git a/src/notas/boolean.md b/src/notas/boolean.md
new file mode 100644
index 0000000..0262721
--- /dev/null
+++ b/src/notas/boolean.md
@@ -0,0 +1,80 @@
+---
+title: "Variables y Expresiones Booleanas"
+---
+
+Lo *booleano* se refiere a un sistema en el que solo hay dos posibles valores, *verdadero* o *falso*, (`true` o `false`).
+
+# Variables booleanas
+
+Las variables booleanas en Processing son de tipo `boolean` y pueden guardar ya sea `true` o `false`:
+
+```java
+boolean juegoEncendido = true;
+boolean enColision = false;
+```
+
+Dos variables booleanas que Processing tiene predeterminadas, y que se actualizan con cada frame en el ciclo `draw()`, son
+
+* `mousePressed` - `true` cuando estás haciendo click dentro del canvas, `false` si no
+* `keyPressed` - `true` cuando cualquier tecla está presionada, `false` si no
+
+[[Ciclo de animación]](/notas/draw.html)
+
+# Expresiones booleanas
+
+Las expresiones booleanas son aquellas cuyo resultado es `true` o `false`.
+
+Pueden componerse de variables booleanas, operadores lógicos, y/o operadores relacionales.
+
+
+## Operadores lógicos
+
+Podemos verlos como similares a los operadores aritméticos (+, -, \*, /), en cuanto a que realizan una operación con sus *operandos* de acuerdo a reglas específicas.
+
+Los operadores lógicos son:
+
+* `&&` - AND: da `true` solo cuando los dos operandos son `true`
+* `||` - OR: da `true` cuando cualquiera de los dos, o los dos operandos son `true`
+* `!` - NOT: da `true` cuando su operando es `false`
+
+## Operadores relacionales
+
+Estos operadores comparan valores y resultan en `true` o `false`:
+
+* `==` - "igual": da `true` cuando los dos valores son iguales
+* `!=` - "desigual": da `true` cuando los dos valores son diferentes entre sí
+* `>` - "mayor que": da `true` cuando el valor de la izquierda es mayor al de la derecha
+* `<` - "menor que": da `true` cuando el valor de la izquierda es menor al de la derecha
+* `>=` - "mayor o igual que": da `true` cuando el valor de la izquierda es mayor o igual al de la derecha
+* `<=` - "menor o igual que": da `true` cuando el valor de la izquierda es menor o igual al de la derecha
+
+
+## Ejemplos de expresiones
+
+Revisar si la posición en X se pasó del borde derecho 
+
+"¿la posición en X es mayor al ancho?"
+
+```java
+boolean salioDerecho = posicionX > width;
+```
+
+Revisar si la posicion en X se salió por cualquiera de los dos bordes:
+
+"¿la posición en X es mayor al ancho o menor a 0?"
+
+```java
+boolean salioX = (posicionX > width) || (posicionX < 0);
+```
+
+Revisar si el mouse está dentro en cierto rango horizontal delimitado por `minX` y `maxX`:
+
+"¿la coordenada X del mouse es mayor o igual al mínimo, y menor o igual al máximo?"
+
+```java
+boolean dentroDelRango = (mouseX >= minX) && (mouseX <= maxX);
+```
+
+Estas y otras expresiones booleanas se pueden usar como argumentos de expresiones condicionales.
+
+[[Expresiones condicionales]](/notas/condicionales.html)
diff --git a/src/notas/canvas-y-coordenadas.md b/src/notas/canvas-y-coordenadas.md
new file mode 100644
index 0000000..4cb97c5
--- /dev/null
+++ b/src/notas/canvas-y-coordenadas.md
@@ -0,0 +1,87 @@
+---
+title: "Canvas y sistema de coordenadas"
+---
+
+Con Processing le indicaremos a la computadora qué dibujar en una ventana que llamaremos *canvas*. 
+
+# Sistema de coordenadas
+
+El/La *canvas* tiene un ancho (`width`) y un alto (`height`) medido en pixeles.
+
+![](/img/canvas.png)
+
+Cualquier punto dentro del canvas puede ubicarse como un par de coordenadas (X,Y), donde:
+
+* X aumenta de izquierda a derecha: vale 0 en el extremo izquierdo y `width` en el extremo derecho
+* Y aumenta de arriba a abajo: vale 0 en el extremo superior y `height` en el extremo inferior
+
+Processing se encarga de que las palabras clave `width` y `height` tomen los valores de las dimensiones del *canvas* actual. Son *variables* especiales del lenguaje.
+
+![](/img/canvas-puntos.png)
+
+[[Variables: Contadores, Acumuladores y Banderas]](/notas/variables.html)
+
+---
+
+# Funciones relacionadas
+
+## size( w, h );
+
+Crea una ventana de ancho "w" y alto "h" pixeles
+
+### ejemplo de uso
+
+```java
+// crea una ventana cuadrada de 400x400
+size(400, 400);
+```
+
+---
+
+## fullScreen(); 
+
+Crea una ventana que llene por completo a la pantalla disponible
+
+```java
+// llena la pantalla con el sketch:
+fullScreen();
+```
+
+---
+
+## save( n );
+
+Guarda lo que se ve en el canvas como una imagen de nombre `n`.
+
+El nombre hay que ponerlo entre comillas y con extensión .png o .jpg, por ejemplo `save("imagen.png");`. Técnicamente, el nombre de la imagen es una *String*.
+
+La imagen se guardará en la carpeta donde está guardado el sketch.
+
+Las dimensiones de la imagen serán las mismas que la del canvas.
+
+### ejemplo de uso
+
+```java
+// dibuja una línea diagonal y guárdala en una imagen
+size(400, 400);
+line(0,0, 200,200);
+save("linea.png");
+```
+
+---
+
+## exit();
+
+Cierra la ventana 
+
+Esta función es útil cuando solo queremos guardar una imagen resultante, sin animación ni interactividad. 
+
+### Ejemplo de uso
+
+```java
+// dibuja una línea diagonal, guárdala en una imagen, y cierra el programa
+size(400, 400);
+line(0,0, 200,200);
+save("linea.png");
+exit();
+```
diff --git a/src/notas/ciclos-anidados.md b/src/notas/ciclos-anidados.md
new file mode 100644
index 0000000..dbaed8b
--- /dev/null
+++ b/src/notas/ciclos-anidados.md
@@ -0,0 +1,181 @@
+---
+title: "Ciclos anidados: Repetición en dos dimensiones"
+---
+
+Hay patrones basados en repetición que consisten en *repetir* algún elemento que de por sí es repetitivo.
+
+Por ejemplo, podemos entender a la siguiente imagen como la repetición de 4 filas, donde cada fila consiste en la repetición de 4 puntos:
+
+![](/img/puntos-4x4.png)
+
+Se le llama *ciclos anidados* a los ciclos que colocamos dentro de otro(s) ciclo(s).
+
+# Derivación
+
+## Código "manual"
+
+El siguiente código dibuja de manera "manual" a la imagen previa:
+
+```java
+size(500, 500);
+background(0);
+stroke(255);
+strokeWeight(8);
+
+// primera fila
+point( 100, 100);
+point( 200, 100);
+point( 300, 100);
+point( 400, 100);
+
+// segunda fila
+point( 100, 200);
+point( 200, 200);
+point( 300, 200);
+point( 400, 200);
+
+// tercera fila
+point( 100, 300);
+point( 200, 300);
+point( 300, 300);
+point( 400, 300);
+
+// cuarta fila
+point( 100, 400);
+point( 200, 400);
+point( 300, 400);
+point( 400, 400);
+```
+
+## Observaciones
+
+Podemos apreciar lo siguiente:
+
+* En cada fila, la coordenada `x` de los puntos que la conforman cambia por un incremento de 100
+* En cada fila, la coordenada `y` de los puntos que la conforman es constante 
+* Lo que diferencía a las filas es la coordenada `y` de sus puntos, que cambia por un incremento de 100.
+
+## Ciclo para dibujar una fila
+
+Un ciclo que realiza el comportamiento presente en la primera fila podría verse así:
+
+```java
+int x = 100;
+while( x <= 400 ){
+    point( x, 100);
+    x = x + 100;
+}
+```
+
+o con `for`:
+
+```java
+for( int x=100; x<=400; x = x + 100){
+    point( x, 100);
+}
+```
+
+Podemos parametrizar la coordenada `y`:
+
+```java
+int y = 100;
+
+int x = 100;
+while( x <= 400 ){
+    point( x, y );
+    x = x + 100;
+}
+```
+
+o con `for`:
+
+```java
+int y = 100;
+
+for( int x=100; x<=400; x = x + 100){
+    point( x, y );
+}
+```
+
+## Ciclo para dibujar varias filas
+
+Ya que identificamos cómo dibujar *una* fila, podemos entonces indicar una repetición de todo ese bloque de código, cambiando la variable `y` en cada iteración. 
+
+De esta manera tendremos un ciclo externo que itera sobre la variable `y`, y un ciclo interno que itera sobre la variable `x` por cada valor de la variable `y`. Así definiremos un comportamiento que pasa por cada combinación posible entre las variables `x` y `y`.
+
+A continuación varios ejemplos.
+
+# Versión con acumulador
+
+## Ciclos `while`
+
+```java
+// este ciclo dibuja a las filas
+int y = 100;
+while( y <= 400 ){
+
+  // este ciclo dibuja a una fila:
+  int x = 100;
+  while( x <= 400 ){
+    point( x, y );
+    x = x + 100;
+  } // aquí acaba el ciclo que dibuja a una fila
+
+  y = y + 100; 
+}
+```
+
+## Ciclos `for`
+
+```java
+// ciclo que dibuja a las filas
+for( int y = 100; y <= 400; y = y + 100){
+
+  // ciclo que dibuja una fila:
+  for( int x = 100; x <= 400; x = x + 100){
+    point(x, y);
+  }
+
+}
+```
+
+# Versión con contador
+
+En ocasiones puede tener sentido utilizar contadores para este tipo de iteración:
+
+## Ciclos `while`
+
+```java
+// este ciclo dibuja a las filas
+int j = 1;
+while( j <= 4 ){
+
+  // este ciclo dibuja a una fila:
+  int i = 1;
+  while( i <= 4 ){
+    point( i*100 , j*100 );
+    i = i + 100;
+  } // aquí acaba el ciclo que dibuja a una fila
+
+  j = j + 100; 
+}
+```
+
+## Ciclos `for`
+
+```java
+// ciclo que dibuja a las filas
+for( int j = 1; j <= 4; j = j + 1){
+
+  // ciclo que dibuja una fila:
+  for( int i = 1; i <= 4; i = i + 1){
+    point( i*100, j*100);
+  }
+
+}
+```
+
+# Relacionado
+
+* [[Ciclos while y for]](/notas/ciclos.html)
+* [[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
diff --git a/src/notas/ciclos-modulo.md b/src/notas/ciclos-modulo.md
new file mode 100644
index 0000000..23b2a62
--- /dev/null
+++ b/src/notas/ciclos-modulo.md
@@ -0,0 +1,94 @@
+---
+title: "Repeticiones alternadas: Ciclos, módulo y condicionales"
+---
+
+# Linealidad y no linealidad
+
+En ocasiones, el uso de ciclos `for` se puede complementar con condicionales.
+
+[[Expresiones condicionales]](/notas/condicionales.html)
+
+Al usar la variable `i` del ciclo `for` por sí sola, multiplicada o sumada, como parámetro numérico, podemos lograr comportamientos que llamaríamos *lineales* o proporcionales. Por ejemplo: la posición aumenta conforme `i` aumenta, el grosor cambia gradualmente conforme `i` aumenta, etc.
+
+La posibilidad que nos da el uso de condicionales es tener cambios abruptos (*no lineales*) de acuerdo a la variable `i`. 
+
+Entre otras cosas, esto nos permite construir *repeticiones alternadas*. Por ejemplo: un patrón de líneas en el que alternan entre dos colores distintos, un patrón que alterna entre dos o más figuras, etc.
+
+El operador módulo nos será de mucha ayuda aquí, pues "convierte" a nuestra variable `i`, que solo se incrementa, a un valor que alterna dentro de un rango determinado.
+
+[[Operador módulo]](/notas/modulo.html)
+
+# Ejemplos de repeticiones alternadas
+
+Después de revisar las nociones y comportamientos del operador módulo, podemos pasar a utilizarlo en nuestro ciclo.
+
+Partimos de este ejemplo, que dibuja 10 líneas separadas por 20 pixeles:
+
+```java
+for(int i=0; i<10; i++){ // repite 10 veces:
+  line(0, i*20, width, i*20);
+}
+```
+
+## Alternando entre dos opciones
+
+Si queremos que las líneas alternen entre dos colores distintos, podemos aplicar "módulo 2" a la variable `i`, y usar un condicional para cambiar el color de acuerdo al resultado:
+
+```java
+for(int i=0; i<10; i++){
+    if( i%2 == 0){ 
+      stroke(200); // gris claro
+    }
+    else{
+      stroke(20); // gris oscuro
+    }
+    line(0, i*20, width, i*20);
+}
+```
+
+Nota que la condición dentro del `if` la podríamos entender/leer también como "si `i` es un número par": estamos coloreando de gris claro las líneas "pares" y de gris oscuro las "impares".
+
+Recordatorio: cualquier número "módulo 2" resultará en una de dos posibilidades: 0 o 1.
+
+## Alternando módulo 3
+
+Podemos hacer lo mismo con otros valores de módulo. Un número "módulo 3" resultará en una de tres posibilidades: 0, 1 o 2.
+
+Por ejemplo, para hacer que el patrón sea: una línea gris claro, dos líneas gris oscuro:
+
+```java
+for(int i=0; i<10; i++){
+    if( i%3 == 0){ 
+      stroke(200); // gris claro
+    }
+    else{ // cuando el resultado es 1 o 2
+      stroke(20); // gris oscuro
+    }
+    line(0, i*20, width, i*20);
+}
+```
+
+o si queremos tener tres colores distintos:
+
+```java
+for(int i=0; i<10; i++){
+    if( i%3 == 0){ 
+      stroke(200); // gris claro
+    }
+    else if( i%3 == 1){
+      stroke(255); // blanco
+    }
+    else{ // cuando el resultado es 2
+      stroke(20); // gris oscuro
+    }
+    line(0, i*20, width, i*20);
+}
+```
+
+## Y más...
+
+¡Todo esto se puede utilizar con valores mayores de módulo!
+
+También es importante considerar que no solo se puede cambiar el color de esta manera, sino que podríamos cambiar todo el dibujo para cada posible resultado de la operación. 
+
+Por ejemplo, podemos ir alternando entre cuadrados y círculos, podemos hacer un patrón de ladrillos (filas idénticas pero desfasadas), etc.
diff --git a/src/notas/ciclos.md b/src/notas/ciclos.md
new file mode 100644
index 0000000..9b76c78
--- /dev/null
+++ b/src/notas/ciclos.md
@@ -0,0 +1,226 @@
+---
+title: "Ciclos: while y for"
+---
+
+Los ciclos, bucles o *loops* son expresiones que nos permiten programar operaciones repetitivas con pocas líneas de código.
+
+La función de `draw()` es un caso especial de ciclo en cuanto a que se repite pero de acuerdo a nociones de tiempo (30 veces por segundo)
+
+[[Ciclo de animación]](/notas/draw.html)
+
+# Ciclo `while`
+
+El ciclo `while` ("mientras") es la expresión fundamental para indicar ciclos en Processing.
+
+Consiste en un bloque de código que se va a repetir *mientras* una condición booleana sea verdadera (`true`).
+
+[[Variables y expresiones booleanas]](/notas/boolean.html)
+
+Es importante que dentro del ciclo suceda al menos una operación que haga que la condición eventualmente se evalúe como falsa (`false`). De no ser así, habremos establecido un *bucle infinito* y veremos cómo Processing se traba.
+
+## `while` con acumulador
+
+Un ejemplo que dibuja puntos distribuidos horizontalmente, entre 0 y 200 en X, y a una altura de 200 en Y:
+
+```java
+// cambia el grosor de los puntos
+strokeWeight(5);
+
+// posición inicial del primer punto
+float x = 0;
+// repite el bloque de código mientras x sea menor a 200
+while( x < 200 ){ 
+    point( x, 200); // dibuja un punto
+    x = x + 5; // incrementa a x 
+}
+```
+
+La variable `x` funciona como *acumulador*, y tomará los valores 0, 5, 10, 15, 20 ... 190, 195. Cuando llega a 200, la condición ya no se cumple y el ciclo termina.
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
+
+## `while` con contador
+
+En este otro ejemplo con resultado visual similar, usamos una variable como *contador*:
+
+```java
+// cambia el grosor de los puntos
+strokeWeight(5);
+
+// valor inicial del contador
+int cuenta = 0;
+
+// repite el bloque de código mientras el contador sea menor a 20
+while( cuenta < 20 ){ 
+    point( cuenta*5, 200); // dibuja un punto de acuerdo al valor de cuenta
+
+    // incrementa el contador por 1
+    cuenta = cuenta + 1;
+}
+```
+
+Aquí, `cuenta` tomará los valores 0, 1, 2, 3, 4, 5 ... 18, 19. Cuando llega a 20 la condición ya no se cumple, y el ciclo termina. Se habrán dibujado 20 puntos.
+
+Esta es otra forma de obtener 20 repeticiones, pero el resultado visual será un poco distinto. ¿Puedes encontrar cuál es la diferencia?
+
+```java
+// cambia el grosor de los puntos
+strokeWeight(5);
+
+// valor inicial del contador
+int cuenta = 1;
+
+// repite el bloque de código mientras el contador sea menor igual a 20
+while( cuenta <= 20 ){ 
+    point( cuenta*5, 200); // dibuja un punto de acuerdo al valor de cuenta
+
+    // incrementa el contador por 1
+    cuenta = cuenta + 1;
+}
+```
+
+### Repeticiones contadas
+
+Una ventaja de este formato es que podemos especificar cuántas veces queremos que se repita alguna acción, aunque no haya en juego alguna otra variable que indique el final como en el caso del acumulador.
+
+Por ejemplo, el siguiente código dibuja 100 puntos en posiciones aleatorias dentro de todo el canvas:
+
+```java
+int cuenta = 1;
+
+while ( cuenta <= 100 ){
+    point( random(width), random(height) );
+    cuenta = cuenta + 1;
+}
+```
+
+
+
+
+# Ciclo `for`
+
+Probablemente es el tipo de ciclo más utilizado en programas gráficos como los que hacemos en processing.
+
+Como sea, es una construcción que se basa en un caso específico del ciclo `while`, así que cualquier operación que podamos realizar con `for` también se puede realizar con `while`.
+
+El ciclo `for` suele utilizarse como una expresión en la que indicamos que ciertas operaciones han de repetirse un número específico de veces.
+
+Desafortunadamente su sintaxis es muy extraña, y hay que practicarla mucho para dejar de tener fallas:
+
+```java
+for(int i=0; i<10; i++){
+   // repite este bloque de código 10 veces
+}
+```
+
+Entre los paréntesis del `for`, hay tres partes separadas entre ellas por punto y coma:
+
+* Inicialización: preparación para empezar el ciclo (normalmente es declarar una variable entera (tipo `int`) con el valor de 0, a usarse como contador)
+* Condición booleana "*while*": el ciclo se va a repetir *mientras* esta condición sea verdadera (`true`)
+* Incremento: operación a realizar en cada iteración del ciclo (normalmente es incrementar la variable entera por 1)
+
+Lo que normalmente hace el ciclo `for` es:
+
+1. Declarar una variable para contar (`i`) que empieza en 0
+2. Evaluar si la condición booleana es verdadera (por ejemplo, si la variable es menor al número escrito); si sí, continúa, si no, termina el ciclo
+3. Ejecutar el bloque de código en su interior
+4. Incrementar en 1 el valor de la variable para contar (`i`)
+5. Regresar al paso 2
+
+Durante la primera iteración del ciclo, la variable para contar (`i`) vale 0, la siguiente vez 1, después 2, y así sucesivamente.
+
+En nuestro ejemplo, el último valor al que llega la variable para contar es 9, porque a partir de 10, la condición booleana empieza a tener un resultado `false`.
+
+## Ejemplo: líneas horizontales
+
+Podríamos dibujar 10 líneas horizontales, separadas a la misma distancia entre ellas, de la siguiente forma:
+
+```java
+line(0, 0, width, 0);
+line(0, 5, width, 5);
+line(0, 10, width, 10);
+line(0, 15, width, 15);
+line(0, 20, width, 20);
+line(0, 25, width, 25);
+line(0, 30, width, 30);
+line(0, 35, width, 35);
+line(0, 40, width, 40);
+line(0, 45, width, 45);
+```
+
+Escribir 10 líneas así tal vez no es mucho problema, pero sí se vuelve inconveniente el hacer 100 o 1000.
+
+Para traducir esa expresión a un ciclo `for`, lo que tenemos que hacer es identificar el patrón que hay: qué tienen en común las funciones, qué cambia, y cómo cambia lo que cambia.
+
+En nuestro caso, podemos ver que:
+
+* Las coordenadas X de todas las líneas son siempre 0 y `width`
+* Los pares de coordenadas Y de cada línea son iguales entre ellas
+* Cada línea tiene coordenadas Y distintas
+* La diferencia entre las coordenadas Y de dos líneas seguidas, es 5
+
+### Versión paramétrica
+
+Ya con el patrón identificado, podemos pasar a abstraerlo dentro de un ciclo:
+
+```java
+for(int i=0; i<10; i++){ // repite 10 veces:
+  line(0, i*5, width, i*5);
+}
+```
+
+Nota que las coordenadas X se quedaron igual, constantes, y las coordenadas Y ahora están en función de la variable que cuenta (`i`).
+
+cuando `i` es 0, la expresión se convierte en:
+
+```java
+line(0, 0, width, 0);
+```
+
+cuando `i` es 1, la expresión se convierte en:
+
+```java
+line(0, 5, width, 5);
+```
+
+cuando `i` es 2, la expresión se convierte en:
+
+```java
+line(0, 10, width, 10);
+```
+
+y así sucesivamente.
+
+Una ventaja es que si ahora queremos dibujar 100 o 1000 líneas con esa plantilla, solo hemos de cambiar un número en nuestra expresión:
+
+```java
+for(int i=0; i<100; i++){ // repite 100 veces:
+  line(0, i*5, width, i*5);
+}
+```
+
+### Versión acumulador
+
+Otra posibilidad es utilizar una variable `y` para ese parámetro de las líneas, e incrementarla en cada iteración del ciclo:
+
+```java
+float y = 0;
+
+for( int i=0; i<10; i++){ // repite 10 veces:
+    line( 0, y, width, y); // "plantilla" de la línea
+    y = y + 5; // realiza el cambio en cada iteración
+}
+```
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)
+
+# Notas relacionadas
+
+En este tutorial se ahonda en más posibilidades de dibujo con ciclos `for`:
+
+[Tutorial: Patrones con líneas con ciclos](/tutoriales/c3-patrones-lineas-ciclos.html)
+
+Y estas notas expanden en variaciones más complejas:
+
+* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
+* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
diff --git a/src/notas/color.md b/src/notas/color.md
new file mode 100644
index 0000000..8b72574
--- /dev/null
+++ b/src/notas/color.md
@@ -0,0 +1,103 @@
+---
+title: "Color"
+---
+
+En Processing, el color se puede representar como uno, dos, tres o cuatro números.
+
+Por *default*, el valor mínimo de cada número es 0 y el máximo es 255.
+
+* Un número: *brillo*; 0 es negro y 255 es blanco
+* Dos números: *brillo, transparencia*; donde 0 es completamente transparente y 255 completamente opaco
+* Tres números: *rojo, verde, azul* (o *hue, saturación, brillo*)
+* Cuatro números: *rojo, verde, azul, transparencia* (o *hue, saturación, brillo, transparencia*)
+
+En las funciones de abajo se pueden ver ejemplos de los diferentes casos 
+
+## Funciones
+
+### noFill();
+
+Le quita el relleno a todas las figuras dibujadas a continuación.
+
+---
+
+### noStroke();
+
+Le quita el borde a todas las figuras dibujadas después de ser llamada / hace las líneas invisibles.
+
+---
+
+### background( c );
+
+Asigna el color de fondo del canvas, reemplazando todo lo que estaba dibujado previamente.
+
+```java
+// fondo negro
+background(0);
+
+// fondo blanco
+background(255);
+
+// fondo gris oscuro
+background(20);
+
+// fondo rojo
+background( 255, 0, 0);
+```
+
+---
+
+### fill( c );
+
+Asigna el color de relleno para las figuras dibujadas a continuación
+
+
+```java
+// relleno gris claro
+fill(200);
+
+// relleno blanco con algo de transparencia
+fill( 255, 150);
+
+// relleno amarillo
+fill( 255, 255, 0);
+
+// relleno azul oscuro con transparencia
+fill(0, 0, 100, 120);
+```
+
+---
+
+### stroke( c );
+
+Asigna el color de las líneas / bordes de las figuras dibujadas a continuación
+
+
+```java
+// borde gris claro
+stroke(200);
+
+// borde blanco con algo de transparencia
+stroke( 255, 150);
+
+// borde amarillo
+stroke( 255, 255, 0);
+
+// borde azul oscuro con transparencia
+stroke(0, 0, 100, 120);
+```
+
+---
+
+### colorMode( );
+
+Cambia el modo de color utilizado:
+
+
+```java
+// modo de color por default (RGBA de 0 a 255)
+colorMode( RGB, 255, 255, 255, 255);
+
+// modo de color HSBA
+colorMode( HSB, 360, 100, 100, 100);
+``` 
diff --git a/src/notas/condicionales.md b/src/notas/condicionales.md
new file mode 100644
index 0000000..77b0a13
--- /dev/null
+++ b/src/notas/condicionales.md
@@ -0,0 +1,89 @@
+---
+title: "Expresiones condicionales"
+---
+
+Las expresiones condicionales nos permiten indicar cuando queremos que la computadora haga una u otra acción dependiendo de cierta condición (expresión booleana)
+
+[[Variables y expresiones booleanas]](/notas/boolean.html)
+
+# if( ) sencillo
+
+Usamos la expresión `if( )` para indicar que queremos que suceda cierto bloque de código *únicamente* cuando la expresión booleana sea verdadera (`true`).
+
+Por ejemplo, *dibuja una elipse en la posición del mouse, solo cuando el mouse esté presionado*:
+
+```java
+if( mousePressed ) {
+    ellipse( mouseX, mouseY, 100, 100);
+}
+```
+
+Otro ejemplo, *regresa la posición a 0 cuando sea mayor al ancho de la pantalla*:
+
+```java
+if( posicionX > width ){
+    posicionX = 0;
+}
+```
+
+# if( ) ... else
+
+Usamos `if( ) ... else` cuando queremos tener dos caminos posibles: un bloque de código se ejecuta cuando la expresión booleana es verdadera (`true`), y el otro cuando no (o sea, cuando es `false`)
+
+Por ejemplo, *dibuja el fondo azul cuando el mouse esté a la derecha del canvas, y dibújalo verde cuando no*:
+
+```java
+if( mouseX > width/2 ){
+    background( 0, 0, 255 );
+}	
+else{
+    background( 0, 255, 0 );
+}
+```
+
+Nota que el `else` va después de la llave que cierra al `if`
+
+
+# if( ) ... else if ( ) ... else
+
+Las expresiones booleanas solo tienen dos posibles resultados, pero en ocasiones necesitamos más de dos opciones.
+
+En esos casos podemos "encadenar" expresiones `if()`.
+
+Por ejemplo, *dibuja el fondo azul cuando el mouse esté a la derecha del canvas, verde cuando esté a la izquierda arriba, y rojo cuando esté a la izquierda abajo*:
+
+```java
+if( mouseX > width/2 ){
+    background( 0, 0, 255 );  // azul
+}
+// si la expresión de arriba es falsa,
+// entonces mouseX está del lado izquierdo
+// y podemos checar solo a mouseY
+else if( mouseY < height/2 ){
+    background( 0, 255, 0 ); // verde
+}
+else{
+    background( 255, 0, 0 ); // rojo
+}
+```
+
+# if() 'anidados'
+
+Es posible usar expresiones `if()` dentro de otras.
+
+Por ejemplo, queremos mover la posición a la derecha al apretar la tecla 'd', y a la izquierda al apretar la tecla 'a':
+
+```java
+if( keyPressed ){ // revisa si hay alguna tecla presionada
+    // si sí, entonces revisa qué tecla es:
+    if( key == 'd' ){
+        // avanza a la derecha
+        posicionX = posicionX + 1;
+    }
+    else if( key == 'a' ){
+        // avanza a la izquierda
+        posicionX = posicionX - 1;
+    }
+}
+ellipse(posicionX, height/2, 100, 100);
+```
diff --git a/src/notas/coordenadas-polares.md b/src/notas/coordenadas-polares.md
new file mode 100644
index 0000000..bed70df
--- /dev/null
+++ b/src/notas/coordenadas-polares.md
@@ -0,0 +1,244 @@
+---
+title: "Coordenadas polares"
+---
+
+# Fundamentos
+
+El sistema de coordenadas polares es un sistema de coordenadas en dos dimensiones donde cada punto se ubica a partir de un valor de radio `r` (distancia respecto a un punto de referencia) y de ángulo `a` (respecto a una dirección de referencia).
+
+
+## Conversión a coordenadas rectangulares
+
+Para convertir de coordenadas polares a rectangulares, usamos funciones trigonométricas pues relacionan un radio (hipotenusa) y ángulo, con los lados (catetos) de un triángulo rectángulo.
+
+[[Funciones trigonométricas]](/notas/trig.html)
+
+![](/img/xyar.png)
+
+Estas son las fórmulas para convertir coordenadas polares `r,a` con centro en `cx,cy`, a coordenadas rectangulares `x,y`.
+
+```java
+// calcula coordenadas rectangulares x,y a partir de:
+// r: radio
+// a: ángulo
+// cx,cy: centro / punto de referencia
+float x = r*cos(a) + cx;
+float y = r*sin(a) + cy;
+```
+
+El siguiente diagrama muestra algunos valores comunes de ángulos medidos en radianes:
+
+![](/img/radianes.png)
+
+# Ejemplos de código: radio constante
+
+Los siguientes son *sketches* de código que demuestran varias posibilidades de utilizar coordenadas polares de manera tradicional con un valor de radio constante y un ángulo que avanza de 0 a `TWO_PI`.
+
+## Polígono regular
+
+Este ejemplo dibuja un polígono regular a partir de calcular la posición de sus vértices con coordenadas polares.
+
+Nota cómo al cambiar el divisor del incremento del ángulo, aumentarás o reducirás el número de lados.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+
+beginShape();
+// cambia el ángulo en incrementos de TWO_PI/6
+for(float a=0; a<=TWO_PI; a=a+TWO_PI/6){
+ // calcula las coordenadas x,y con radio 100 y centro en 200,200
+ float x = 100*cos(a) + 200;
+ float y = 100*sin(a) + 200;
+ 
+ // establece el vértice del polígono en x,y
+ vertex(x,y);
+}
+endShape(CLOSE);
+```
+
+![](/img/hexagono.png)
+
+## Rayos/Radios
+
+Este ejemplo dibuja 16 líneas que van hacia el centro desde puntos ubicados en una circunferencia.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+
+// aumenta el ángulo en incrementos de TWO_PI/16
+for(float a=0; a<=TWO_PI; a=a+TWO_PI/16){
+ // calcula las coordenadas x,y con radio 100 y centro en 200,200
+ float x = 100*cos(a) + 200;
+ float y = 100*sin(a) + 200;
+
+ // dibuja una línea del punto x,y al centro
+ line(x,y, 200, 200);
+}
+```
+
+![](/img/radios.png)
+
+## Aleatoriedad en área circular
+
+Este ejemplo dibuja 500 puntos en posición aleatoria dentro de un área circular de 100 pixeles de radio y centro en 200,200.
+
+Para que los puntos estén dentro de esa área, en vez de generar coordenadas `x,y` aleatorias se generan un radio `r` y un ángulo `a` aleatorios. Estas coordenadas polares entonces se usan para calcular las coordenadas `x,y` correspondientes.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+strokeWeight(5);
+
+// repite 500 veces:
+for(int cuenta=1; cuenta<=500; cuenta++){
+
+  // genera un radio aleatorio entre 0 y 100
+  float r = random(0, 100);
+  // genera un ángulo aleatorio entre 0 y TWO_PI
+  float a = random(0, TWO_PI);
+  
+  // calcula coordenadas x,y
+  // en función de r, a
+  float x = r*cos(a) + 200;
+  float y = r*sin(a) + 200;
+  
+  // dibuja punto en x,y
+  point(x,y);
+}
+```
+
+![](/img/puntos-random-en-circulo.png)
+
+## Curva de Lissajous
+
+Este es un caso especial de uso de coordenadas polares, en el que la posición de cada vértice `x,y` de una figura se basa en dos funciones senoidales con frecuencia distinta.
+
+En este ejemplo, esas frecuencias son de 3 y 4.
+
+Prueba cambiar esas cantidades para obtener otras versiones.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+
+beginShape();
+for(float a=0; a<=TWO_PI; a=a+PI/100){
+ float x = 100*sin(3*a) + 200;
+ float y = 100*sin(4*a) + 200;
+ vertex(x,y);
+}
+endShape(CLOSE);
+``` 
+
+![](/img/lissajous-3-4.png)
+
+# Ejemplos de código: radio variable
+
+En estos ejemplos el radio de una figura circular cambia con cada iteración del ciclo `for`.
+
+Todos usan `vertex(x,y)` para definir los vértices de un polígono entre `beginShape()` y `endShape()`.
+
+## Espiral
+
+En este ejemplo tenemos una variable `r` que funciona como acumulador y que corresponde a la longitud del radio. En cada iteración del ciclo aumenta un poco, por lo que cada vértice está más alejado del punto central respecto a los anteriores.
+
+Nota que en el ciclo `for` la condición *while* indica que las repeticiones sucederán mientras el ángulo sea menor o igual a `5*TWO_PI`; es decir, el ángulo dará 5 vueltas.
+
+Prueba cambiar ese número de vueltas y/o los incrementos al radio y al ángulo en cada iteración.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+beginShape();
+
+// valor inicial del radio
+float r = 1;
+// itera con un ángulo entre 0 y 5*TWO_PI
+for(float a=0; a<=5*TWO_PI; a=a+PI/100){
+ // calcula coordenadas rectangulares
+ float x = r*cos(a) + 200;
+ float y = r*sin(a) + 200;
+
+ vertex(x,y);
+ 
+ // en cada iteración el radio aumenta linealmente
+ r = r + 0.1;
+}
+endShape();
+```
+
+![](/img/espiral.png)
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
+
+## Flores
+
+En este ejemplo la longitud del radio cambia de acuerdo a una función senoidal, a una frecuencia mayor que las funciones seno y coseno que utilizamos para calcular las posiciones de los vértices.
+
+Prueba modificar la amplitud de esa función del radio, su frecuencia, e incluso su punto central.
+
+```java
+size(500, 500);
+background(0);
+noFill();
+stroke(255);
+beginShape();
+for(float a=0; a<=TWO_PI; a=a+PI/1000){
+ // la longitud del radio oscila de -200 a 200
+ // realizando 8 ciclos por cada ciclo de 'a'
+ float r = 200*sin(8*a);
+
+ float x = r*cos(a) + 250;
+ float y = r*sin(a) + 250;
+ vertex(x,y);
+}
+endShape(CLOSE);
+```
+
+![](/img/flor-16petalos.png)
+
+## Aleatorio
+
+En este ejemplo cada vértice tiene un radio distinto generado de manera aleatoria.
+
+Prueba modificar el incremento de ángulo en el ciclo y/o el rango aleatorio del radio.
+
+```java
+size(400, 400);
+background(0);
+noFill();
+stroke(255);
+beginShape();
+for(float a=0; a<=TWO_PI; a=a+PI/100){
+ // genera un radio aleatorio para cada punto
+ float r = random(50, 150);
+
+ float x = r*cos(a) + 200;
+ float y = r*sin(a) + 200;
+ vertex(x,y);
+}
+endShape();
+```
+
+![](/img/circulo-random.png)
+
+## Y más...
+
+Estos ejemplos solo son algunas sugerencias de posibilidades. Te invito a experimentar combinándolos o haciéndolos más complejos.
+
+
+# Notas que enlazan aquí
+
+* [[Funciones trigonométricas]](/notas/trig.html)
diff --git a/src/notas/draw.md b/src/notas/draw.md
new file mode 100644
index 0000000..c62044d
--- /dev/null
+++ b/src/notas/draw.md
@@ -0,0 +1,103 @@
+---
+title: "Ciclo de animación"
+---
+
+# Estructura general
+
+Para que un sketch de Processing pueda tener movimiento, ya sea autónomo o a partir de interacción, necesita estar construido con la siguiente estructura:
+
+```java
+// declara VARIABLES GLOBALES (opcional)
+
+// SETUP
+void setup(){
+  // crea ventana
+  size( 640, 480 );
+
+  // prepara variables y parámetros
+}
+
+// DRAW
+void draw(){
+  // dibuja!
+}
+```
+
+Las variables globales son las que usaremos en todo nuestro programa; en especial las que guardan valores que no se reinician constantemente, como acumuladores, contadores, y banderas (flags)
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)
+
+El bloque de código dentro de `setup()` se ejecuta solo una vez, y al inicio del programa.
+
+El bloque de código dentro de `draw()` se ejecuta repetidamente, 30 veces por segundo (por default), y así se mantiene indefinidamente.
+
+
+# Fondo
+
+Podemos manejar el fondo del sketch de diferentes maneras. Los siguientes ejemplos de animación se basan en la variable `frameCount`.
+
+[[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+
+## Limpiar en cada *frame*
+
+Si usamos la función `background( )` en el inicio de la función `draw()`, efectivamente estaremos "limpiando" todo lo dibujado previamente para empezar con un cuadro limpio:
+
+```java
+void setup(){
+  size( 640, 480 );
+}
+
+void draw(){
+  // reestablece el fondo:
+  background( 255 );
+
+  // dibuja un círculo en movimiento:
+  ellipse( frameCount, 240, 50, 50);
+}
+```
+
+## Dibujar encima
+
+Si no usamos la función `background( )` en el ciclo de animación, cada elemento dibujado en la función de `draw()` se agregará a lo dibujado previamente.
+
+```java
+void setup(){
+  size( 640, 480 );
+
+  // fondo inicial:
+  background( 255 );
+}
+
+void draw(){
+  // dibuja un círculo en movimiento,
+  // dejando marca por donde pasa:
+  ellipse( frameCount, 240, 50, 50);
+}
+```
+
+## Marcas temporales
+
+Un punto medio consiste en no usar la función `background( )` pero sí un rectángulo con dimensiones del canvas, y color de relleno parcialmente transparente.
+
+En cada *frame*, este rectángulo ocultará parte de lo dibujado previamente. Lo más antiguo tenderá a desaparecer:
+
+```java
+void setup(){
+  size( 640, 480 );
+
+  // fondo inicial:
+  background( 255 );
+}
+
+void draw(){
+  // relleno blanco con muy poca opacidad
+  fill( 255, 10);
+
+  // rectángulo que ocupa todo el canvas:
+  rect(0, 0, width, height);
+ 
+  // dibuja un círculo en movimiento,
+  // dejando marca por donde pasa:
+  ellipse( frameCount, 240, 50, 50);
+}
+```
diff --git a/src/notas/figuras.md b/src/notas/figuras.md
new file mode 100644
index 0000000..459d426
--- /dev/null
+++ b/src/notas/figuras.md
@@ -0,0 +1,130 @@
+---
+title: "Dibujo con figuras"
+---
+
+# Funciones
+
+## rect( x, y, w, h);
+
+Por *default*, dibuja una figura rectangular de ancho `w` y alto `h`, con su esquina superior izquierda ubicada en el punto dado por (`x`,`y`)
+
+```java
+// dibuja un cuadrado de 20x20, ubicado en la esquina superior izquierda
+rect( 0, 0, 20, 20 );
+
+// dibuja un rectángulo de 100x50, ubicado en el punto (20,30);
+rect( 20, 30, 100, 50 );
+```
+
+![](/img/rect.png)
+
+## rectMode( m );
+
+Cambia el modo en el que se interpretan los cuatro parámetros de `rect( )`.
+
+### rectMode( CORNER )
+
+Es el modo por default. Hace que los cuatro parámetros de `rect( )` se interpreten como:
+
+* Coordenada `x` de la esquina superior izquierda
+* Coordenada `y` de la esquina superior izquierda
+* Ancho
+* Altura
+
+![](/img/rect.png)
+
+### rectMode( CORNERS )
+
+Hace que los cuatro parámetros de `rect( )` se interpreten como:
+
+* Coordenada `x` de la esquina superior izquierda
+* Coordenada `y` de la esquina superior izquierda
+* Coordenada `x` de la esquina inferior derecha
+* Coordenada `y` de la esquina inferior derecha
+
+![](/img/rect-corners.png)
+
+### rectMode( CENTER )
+
+Hace que los cuatro parámetros de `rect( )` se interpreten como:
+
+* Coordenada `x` del centro del rectángulo
+* Coordenada `y` del centro del rectángulo
+* Ancho
+* Altura
+
+![](/img/rect-center.png)
+
+### rectMode( RADIUS )
+
+Hace que los cuatro parámetros de `rect( )` se interpreten como:
+
+* Coordenada `x` del centro del rectángulo
+* Coordenada `y` del centro del rectángulo
+* Mitad del ancho
+* Mitad de la altura
+
+
+---
+
+## ellipse( x, y, w, h);
+
+Dibuja una figura elipsoidal de ancho "w" y alto "h", con su centro ubicado en el punto (x,y)
+
+Si "w" y "h" son iguales, entonces dibuja un círculo de diámetro "w".
+
+```java
+// dibuja un círculo de diámetro 20, ubicado en el centro de la ventana
+ellipse( width/2, height/2, 20, 20);
+
+// dibuja una elipse de 100x50, con centro en 20, 30
+ellipse(20, 30, 100, 50);
+
+```
+
+![](/img/ellipse.png)
+
+---
+
+## triangle( x1, y1, x2, y2, x3, y3 );
+
+Dibuja un triángulo que conecta los tres puntos (x1,y1), (x2,y2), (x3, y3)
+
+![](/img/triangle.png)
+
+---
+
+## quad( x1, y1, x2, y2, x3, y3, x4, y4 );
+
+Dibuja un cuadrilátero conectando los cuatro puntos (x1,y1), (x2,y2), (x3, y3) y (x4, y4)
+
+![](/img/quad.png)
+
+---
+
+## beginShape(); vertex(x,y); endShape();
+
+Para figuras con más lados, podemos usar la siguiente construcción que define cada punto como un vértice:
+
+```java
+beginShape();
+vertex( x1, y1 );
+vertex( x2, y2 );
+vertex( x3, y3 );
+vertex( x4, y4 );
+vertex( x5, y5 );
+vertex( x6, y6 );
+// ... (tantos vértices como requieras)
+endShape(CLOSE);
+```
+
+La palabra `CLOSE` dentro de `endShape( );` hace que la figura se cierre, es decir que el último vértice se conecte con el primero.
+
+Si no queremos que eso suceda, no la escribimos, por ejemplo:
+
+```java
+// ...
+endShape();
+```
+
+[[Dibujo de polígonos]](/notas/poligonos.html)
diff --git a/src/notas/footer.html b/src/notas/footer.html
new file mode 100644
index 0000000..28dd87b
--- /dev/null
+++ b/src/notas/footer.html
@@ -0,0 +1,6 @@
+<nav>
+<a href="/">🍃 jardínBit</a> | J.Vega 2021 | 
+<a href="https://instagram.com/jardinbit" target=_blank>@jardinbit</a> |
+<img src="/img/cc0_small.png" alt="CC0 Public Domain"/>
+<a href="https://kopimi.com/kopimi"><img src="/img/kopimi_square.png" alt="kopimi" height="20"/></a>
+</nav>
diff --git a/src/notas/funciones-dibujo.md b/src/notas/funciones-dibujo.md
new file mode 100644
index 0000000..0a19b18
--- /dev/null
+++ b/src/notas/funciones-dibujo.md
@@ -0,0 +1,208 @@
+---
+title: "Funciones de dibujo"
+---
+
+Podemos crear nuestras propias funciones para dibujar figuras específicas.
+
+Hay varias ventajas:
+
+* Nuestro código se vuelve más fácil de leer
+* Podemos repetir el dibujo múltiples veces sin repetir el código
+* Podemos reusar el dibujo en otros sketches
+
+En general, nos interesará crear funciones con parámetros para poderlas utilizar como las que conocemos `line()`, `rect()`, `ellipse()`, etc.
+
+Pero hay veces en que escribir funciones, aunque no usen parámetros, ayuda bastante.
+
+# Funciones sin parámetros
+
+La forma de declarar una función de dibujo sin parámetros será la que sigue:
+
+```java
+void miFigura(){
+   // código que dibuja la figura
+}
+```
+
+* `void` implica que es una función que no "regresa" un valor.
+* `miFigura` puede ser cualquier nombre que queramos, mientras no sea una de las palabras reservadas de Processing
+* `()` indica que es una función y que no hay parámetros
+* `{ }` engloban el bloque de código que le pertenece a la función.
+
+Por ejemplo, puedo declarar esta función que dibuja una "punta de flecha" apuntando hacia arriba:
+
+```java
+void punta(){
+  beginShape();
+  vertex(0, -50); // punta
+  vertex(50, 50); // derecha abajo
+  vertex(0, 0); // centro
+  vertex(-50, 50); //izquierda abajo
+  endShape(CLOSE);
+}
+```
+
+Para utilizarla, solo será necesario llamar `punta()`.
+
+## En contexto
+
+Así se podría ver un programa completo con la función en contexto:
+
+```java
+void setup(){
+  size( 400, 400 );
+}
+
+void draw(){
+  background(255); // fondo blanco
+
+  translate( 200, 100); // mueve el origen 200 a la derecha y 100 abajo
+  punta(); // dibuja la "punta"
+}
+
+void punta(){
+  beginShape();
+  vertex(0, -50); // punta
+  vertex(50, 50); // derecha abajo
+  vertex(0, 0); // centro
+  vertex(-50, 50); //izquierda abajo
+  endShape(CLOSE);
+}
+``` 
+
+Nota que la función `draw()` queda un poco más clara comparada con tener todo el bloque `beginShape()` a `endShape()` en su interior.
+
+Nota también el uso de la traslación.
+
+[[Transformaciones]](/notas/transformaciones.html)
+
+# Funciones con parámetros
+
+Parametrizar nuestra figura nos permite dibujarla de múltiples maneras, variarla durante la ejecución del programa, y más.
+
+Podemos tener tantos parámetros como queramos. Solo hay que establecer su tipo de dato, y el nombre con el que los llamaremos dentro de la función.
+
+La forma de declarar una función de dibujo con dos parámetros `x,y` será la que sigue:
+
+```java
+void miFigura(float x, float y){
+   // código que dibuja la figura respecto a x, y
+}
+```
+
+## Uso de transformaciones
+
+Podemos aprovechar las funciones de transformación para añadirle a nuestro dibujo la posibilidad de colocarse donde sea.
+
+En el ejemplo anterior con la función `punta()`, sus vértices están descritos de manera constante (*hardcoded*).
+
+Pero si agregamos transformaciones, podemos moverlos a donde queramos:
+
+```java
+void punta( float x, float y ){
+  // guarda la matriz de transformaciones antes de cualquier cosa
+  pushMatrix(); 
+
+  // traslada el origen (x, y) unidades:
+  translate(x, y);
+
+  // dibuja la figura sin cambio:
+  beginShape();
+  vertex(0, -50); // punta
+  vertex(50, 50); // derecha abajo
+  vertex(0, 0); // centro
+  vertex(-50, 50); //izquierda abajo
+  endShape(CLOSE);
+
+  // recupera la matriz a como estaba antes:
+  popMatrix();
+}
+```
+
+[[Transformaciones]](/notas/transformaciones.html)
+ 
+## Uso de parámetros en vértices
+
+Otra posibilidad, que en algunos contextos puede tener más sentido, es usar los parámetros directamente en los vértices de la figura.
+
+Por ejemplo, el caso anterior podría quedar también así:
+
+```java
+void punta( float x, float y ){
+  // dibuja la figura respecto a x,y:
+  beginShape();
+  vertex(x, y-50); // punta
+  vertex(x+50, y+50); // derecha abajo
+  vertex(x, y); // centro
+  vertex(x-50, y+50); //izquierda abajo
+  endShape(CLOSE);
+}
+```
+
+En el caso de esa función, y dependiendo lo que queramos hacer, el `50` también podría convertirse en un parámetro, ya sea en cada eje, o para los dos ejes.
+
+Por ejemplo:
+
+```java
+void punta( float x, float y, float d ){
+  // dibuja la figura respecto a x,y, con "tamaño" d:
+  beginShape();
+  vertex(x, y-d); // punta
+  vertex(x+d, y+d); // derecha abajo
+  vertex(x, y); // centro
+  vertex(x-d, y+d); //izquierda abajo
+  endShape(CLOSE);
+}
+```
+
+Como dato curioso, la función `rect( )` que utilizamos, está definida en Processing de una manera parecida:
+
+```java
+// versión simplificada de la función rect( )
+void rect( float x, float y, float w, float h ){
+  beginShape();
+  vertex(x, y); // superior izquierda
+  vertex(x+w, y); // superior derecha
+  vertex(x+w, y+h); // inferior derecha
+  vertex(x, y+h); //inferior izquierda
+  endShape(CLOSE);
+}
+```
+
+## En contexto
+
+Sin importar qué versión escojamos, podemos utilizarla y reutilizarla como cualquier otra función de dibujo:
+
+```java
+void setup(){
+  size( 400, 400 );
+}
+
+void draw(){
+  background(255); // fondo blanco
+  noFill();
+
+  punta(10, 20); // dibuja la "punta" en 10, 20
+  punta(50, 70); // dibuja la "punta" en 50, 70
+}
+
+void punta( float x, float y ){
+  // guarda la matriz de transformaciones antes de cualquier cosa
+  pushMatrix(); 
+
+  // traslada a los valores dados por x, y:
+  translate(x, y);
+
+  // dibuja la figura sin cambio:
+  beginShape();
+  vertex(0, -50); // punta
+  vertex(50, 50); // derecha abajo
+  vertex(0, 0); // centro
+  vertex(-50, 50); //izquierda abajo
+  endShape(CLOSE);
+
+  // recupera la matriz a como estaba antes:
+  popMatrix();
+}
+``` 
+
diff --git a/src/notas/gradientes.md b/src/notas/gradientes.md
new file mode 100644
index 0000000..81d08c1
--- /dev/null
+++ b/src/notas/gradientes.md
@@ -0,0 +1,355 @@
+---
+title: "Gradientes de color"
+---
+
+Existen varias estrategias para aprovechar estructuras repetitivas con el fin de cambiar gradualmente de color.
+
+Partiremos del siguiente ejemplo de código que dibuja una serie de rectángulos alineados verticalmente. 
+
+*Todas estas técnicas pueden extrapolarse a cualquier dibujo basado en repetición*.
+
+![](/img/franjas-negras.png)
+
+```java
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna color
+  fill(0);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+# Escala de grises
+
+Un gradiente de escala de grises consiste en cambiar el valor numérico del canal de luminosidad para cada figura dibujada.
+
+![](/img/franjas-grises.png)
+
+## Con acumulador
+
+Podemos utilizar una variable para el canal de luminosidad, que se incrementa con cada iteración del ciclo:
+
+```java
+float tono = 0; // valor inicial del tono
+
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna tono 
+  fill(tono);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+
+  // incrementa el canal
+  tono = tono + 25;
+}
+```
+
+La magnitud del incremento, en combinación con la cantidad de repeticiones y el valor inicial del tono, nos indicará cuál será el rango que tendremos.
+
+En este ejemplo, el tono tomará los siguientes valores: 0, 25, 50, 75, 100, 125, 150, 175, 200.
+
+*Entre más repeticiones haya, menos hay que incrementar para que el gradiente abarque toda la composición.*
+
+### Acumulador en dirección opuesta
+
+¿Qué habría que cambiar de la estructura para que el gradiente fuera en la dirección opuesta?
+
+## Con contador del ciclo
+
+Podemos aprovechar la variable que cuenta las repeticiones del ciclo, escalándola / convirtiéndola a valores que nos funcionen para el tono.
+
+### Escala
+
+Tomando en cuenta que el contador del ciclo se incrementa de uno en uno (0, 1, 2, 3, etc), podemos multiplicar esa variable por una cantidad constante para obtener un resultado que se incrementa proporcionalmente:
+
+```java
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna tono en función del contador
+  fill( i*25 );
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+En este ejemplo, el tono tomará los siguientes valores: 0, 25, 50, 75, 100, 125, 150, 175, 200.
+
+¿Qué tendríamos que hacer para que el valor inicial no fuera 0?
+
+¿Y qué tendríamos que hacer para que el gradiente fuera en la dirección opuesta?
+
+### Mapeo
+
+La función `map( )`, si bien un poco más compleja, nos puede facilitar la creación de un gradiente en específico
+
+[[Mapeo/conversión de valores]](/notas/map.html)
+
+```java
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // convierte a i, que va de 0 a 9
+  // a un valor entre 0 y 225
+  float tono = map( i, 0, 9,  0, 225);
+
+  // asigna el tono
+  fill( tono );
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+Lo ideal es tener claro el significado de los 5 parámetros de `map()`
+
+* la variable a convertir (el contador del ciclo)
+* el valor mínimo que esa variable puede tener (normalmente 0)
+* el valor máximo que esa variable puede tener (el número de repeticiones menos 1)
+* el valor mínimo del nuevo rango
+* el valor máximo del nuevo rango
+
+Cambiando los últimos dos parámetros alteramos el comportamiento del gradiente:
+
+```java
+  // convierte a i, que en este caso va de 0 a 9
+  // a un valor entre 100 y 225
+  float tono = map( i, 0, 9,  100, 225);
+```
+
+Incluyendo la posibilidad de invertir su dirección:
+
+```java
+  // convierte a i, que en este caso va de 0 a 9
+  // a un valor entre 200 y 50
+  float tono = map( i, 0, 9,  200, 50);
+```
+
+
+# Color 
+
+Las estrategias para gradientes de color son similares a las previas, pero ahora actuando en tres canales independientes en lugar de solo uno.
+
+## Con acumulador
+
+El mismo principio visto arriba lo podemos utilizar para cambiar un canal de color mientras los otros dos se mantienen constantes.
+
+El rango de valores en el gradiente va a depender de nuevo de:
+
+* el valor inicial de la variable
+* la cantidad de iteraciones del ciclo
+* el incremento en cada iteración
+
+### Acumulador en RGB
+
+Este ejemplo modifica al canal rojo y deja constantes a verde y azul.
+
+![](/img/franjas-azulmagenta.png)
+
+```java
+float rojo = 0; // valor inicial del canal rojo
+
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna color
+  fill(rojo, 100, 250);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+
+  // incrementa el canal rojo
+  rojo = rojo + 25;
+}
+```
+
+### Acumulador en HSB
+
+Este ejemplo modifica al tono (*hue*) y deja constantes a la saturación y luminosidad.
+
+![](/img/franjas-arcoiris.png)
+
+```java
+// modo de color HSB
+colorMode(HSB, 360, 100, 100);
+
+float tono = 0; // valor inicial del tono
+
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna tono 
+  fill(tono, 50, 100);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+
+  // incrementa el canal
+  tono = tono + 30;
+}
+```
+
+## Con acumuladores
+
+Podemos extrapolar lo anterior para tener un acumulador por cada canal de color, cada uno con un comportamiento distinto: ya sea con distinto valor inicial, y/o con distinto valor de incremento.
+
+![](/img/franjas-azulpeach.png)
+
+```java
+float rojo = 0; // valor inicial del canal rojo
+float verde = 50; // valor inicial del canal verde
+float azul = 100; // valor inicial del canal azul
+
+// repite 10 veces
+for(int i=0; i<10; i=i+1){
+  // asigna color
+  fill(rojo, verde, azul);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+
+  // incrementa los canales con distintos incrementos
+  rojo = rojo + 25;
+  verde = verde + 10;
+  azul = azul + 5;
+}
+```
+
+## Con contador del ciclo
+
+Podemos aprovechar el conteo de iteraciones para calcular el valor de los canales de color en cada figura.
+
+### Escala por canal
+
+A continuación ejemplos con el mismo comportamiento que los mostrados anteriormente con acumuladores.
+
+Nota las similitudes con esos ejemplos previos: ¿cómo estamos asignando el incremento aquí? ¿y cómo estamos asignando el valor inicial de cada canal?
+
+#### Escala en un canal RGB
+
+![](/img/franjas-azulmagenta.png)
+
+```java
+for(int i=0; i<10; i=i+1){
+  // asigna color en función de i
+  fill(i*25, 100, 250);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+
+#### Escala en un canal HSB
+
+![](/img/franjas-arcoiris.png)
+
+```java
+colorMode(HSB, 360, 100, 100);
+
+for(int i=0; i<10; i=i+1){
+  // asigna color en función de i
+  fill(i*30, 50, 100);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+#### Escala en canales RGB
+
+![](/img/franjas-azulpeach.png)
+
+```java
+for(int i=0; i<10; i=i+1){
+  // asigna color en función de i
+  fill(i*25, i*10+50, i*5+100);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+### Mapeo 
+
+Conviene utilizar `map()` para tener más control sobre los valores iniciales y finales en cada canal, sin tener que estar realizando aritmética.
+
+Por ejemplo, supongamos que queremos un gradiente que vaya del color `(240, 17, 88)` al color `(246, 250, 61)` en RGB.
+
+Podemos notar que el canal rojo incrementa muy poco, el canal verde disminuye considerabldmente, y el azul incrementa más.
+
+![](/img/franjas-fuego.png)
+
+#### Mapeo por canal
+
+Podemos utilizar `map()` para convertir al contador del ciclo `i` al valor correspondiente de cada canal.
+
+```java
+for(int i=0; i<10; i=i+1){
+  // convierte a i, que va de 0 a 9 en este caso
+  // al valor de cada canal
+  float rojo = map( i, 0, 9, 240, 246); // rojo de 240 a 246
+  float verd = map( i, 0, 9, 17, 250); // verde de 17 a 250
+  float azul = map( i, 0, 9, 88, 61); // azul de 88 a 61
+
+  fill(rojo, verd, azul);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+#### Interpolación lineal `lerpColor()`
+
+Processing tiene una función `lerpColor()` que calcula (interpola) el color que habría entre un color inicial y un color final dados, en una "posición" específica dada por un valor entre 0 y 1.
+
+Si la posición es 0, el color corresponde al inicial, y si la posición es 1, el color corresponde al final. Una posición de 0.5 sería el color exactamente enmedio a los dos, y así sucesivamente.
+
+Podemos usar `map()` para convertir el contador de iteraciones a un valor entre 0 y 1.
+
+La estructura quedaría así:
+
+```java
+// establece colores del gradiente
+color colorInicial = color(240, 17, 88);
+color colorFinal = color(246, 250, 61);
+
+for(int i=0; i<10; i=i+1){
+  // convierte el contador i, que va de 0 a 9 en este caso
+  // a un número entre 0 y 1
+  float p = map(i, 0, 9, 0, 1);
+
+  // utiliza ese valor para calcular el color correspondiente
+  color colorGradiente = lerpColor(colorInicial, colorFinal, p);
+  
+  // y utiliza el color correspondiente
+  fill(colorGradiente);
+  
+  // dibuja rectángulo y traslada
+  rect(0,0, width, 20);
+  translate(0, 40);
+}
+```
+
+La posición en el gradiente también podría calcularse con aritmética:
+
+```java
+float p = i/9.0; // i va de 0 a 9, lo convertimos a un número entre 0 y 1
+```
+
+El punto decimal es importante para tener un resultado de punto flotante y no entera. Otra forma de escribirlo podría ser:
+
+```java
+float p = 1.0*i/9; // i va de 0 a 9, lo convertimos a un número entre 0 y 1
+```
diff --git a/src/notas/head.html b/src/notas/head.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/notas/head.html
diff --git a/src/notas/imagenes-capas.md b/src/notas/imagenes-capas.md
new file mode 100644
index 0000000..e01742d
--- /dev/null
+++ b/src/notas/imagenes-capas.md
@@ -0,0 +1,239 @@
+---
+title: "Imágenes: Capas y máscaras"
+---
+
+# Capas con `PGraphics`
+
+La clase `PGraphics` funciona para crear "lienzos virtuales" o *capas* en los que podemos dibujar.
+
+Estas capas se pueden comportar como imágenes `PImage`: se dibujan con la función `image( )` y se pueden modificar con métodos como `.resize( )` o `.filter( )`.
+
+Por cada capa necesitamos una variable:
+
+```java
+PGraphics capa;
+```
+
+En la función `setup()` la inicializamos con un tamaño:
+
+```java
+capa = createGraphics( 640, 480 );
+```
+
+Para dibujar en ella podemos utilizar cualquier función de las que ya conocemos, pero ahora como *métodos* de la capa. Hay que preceder el dibujo con `.beginDraw()` y terminarlo con `.endDraw()`:
+
+```java
+// dibuja en la capa:
+capa.beginDraw();
+capa.background(0); // fondo negro
+capa.fill(255); // relleno blanco
+capa.ellipse( 320, 240, 100, 100);
+capa.endDraw();
+```
+
+Posteriormente podemos dibujar la capa en la función `draw()` con `image( )` :
+
+```java
+// dibuja la capa
+image( capa, 0, 0);
+```
+
+
+## Ejemplo: Figuras con *blur*
+
+En este ejemplo dibujamos unos círculos en una capa, y luego utilizamos el método `.filter( )` para aplicar un desenfoque.
+
+![](/img/pgraphics-ejemplo-blur.jpg)
+
+```java
+// declara variable de tipo "PGraphics"
+PGraphics capa1;
+void setup(){
+ size( 640, 480 ); 
+ // crea la capa
+ capa1 = createGraphics(640, 480);
+ // dibuja en la capa
+ capa1.beginDraw();
+ capa1.background( 0 );
+ capa1.fill( 255 );
+ capa1.ellipse(100, 100, 100, 100);
+ capa1.fill(0);
+ capa1.ellipse(100, 100, 80, 80);
+ capa1.fill(255);
+ capa1.ellipse(100, 100, 40, 40);
+ capa1.endDraw();
+ // podemos aplicar un filtro como si la capa fuera PImage
+ capa1.filter( BLUR, 3);
+}
+
+void draw(){
+  // dibujamos la capa en el canvas como si fuera PImage
+ image( capa1, 0, 0);
+}
+```
+
+# Capas como Máscaras
+
+Podemos utilizar las capas dibujadas con `PGraphics` como máscaras del canal *alpha* de una imagen, aprovechando el método `.mask( )` de `PImage`.
+
+La imagen o capa que utilicemos como máscara ha de estar en escala de grises, y se va a utilizar como canal *alpha* de la imagen enmascarada.
+
+Los pixeles donde la máscara tenga un valor de 0 (color negro) se harán completamente transparente, los pixeles donde la máscara tenga un valor de 255 (color blanco) serán completamente opacos, y cualquier valor intermedio tendrá una transparencia correspondiente.
+
+## Ejemplos de máscaras
+
+### Máscara generada programáticamente
+
+En este ejemplo usamos un ciclo `for` para generar una máscara que consiste en franjas blancas y negras alternadas.
+
+Esta máscara la aplicamos sobre la imagen original.
+
+En el fondo se dibuja una copia de la imagen que fue obtenida y filtrada previamente.
+
+![](/img/img-ejemplo-mask-franjas.jpg)
+
+```java
+PImage foto; // imagen original
+PImage fotoInvertida; // imagen invertida
+PGraphics capa1; // capa
+
+void setup() {
+  size( 640, 480 );
+  // crear "objeto" de tipo PImage
+  foto = loadImage("trajinera.jpg");
+  foto.resize( width, height );
+
+  // copiar foto
+  fotoInvertida = foto.get();
+  fotoInvertida.filter( INVERT ); // invierte foto
+
+  // crea capa para la máscara:
+  capa1 = createGraphics( 640, 480);
+  
+   // dibuja máscara:
+  capa1.beginDraw();
+  capa1.background(0);
+  capa1.fill(255);
+  // dibuja múltiples franjas rectangulares
+  for (int i=0; i<=640; i+=40) {
+    capa1.rect(i, 0, 20, 480);
+  }
+  capa1.endDraw();
+
+  // enmascara la imagen
+  foto.mask( capa1 );
+}
+
+void draw() {
+  background(255);
+
+  // dibuja la imagen invertida de fondo
+  image(fotoInvertida, 0, 0);
+  
+  // dibuja la imagen enmascarada,
+  // sus áreas transparentes dejarán ver el fondo
+  image(foto, 0, 0);
+
+  // con esta función podemos ver el aspecto de la máscara
+  //image( capa1, 0, 0);
+}
+```
+
+### Máscara interactiva
+
+Podemos aprovechar el ciclo de animación para redibujar la máscara en cada *frame*.
+
+En este ejemplo usamos una estructura similar al anterior, con la diferencia de que la máscara se dibuja dentro de la función `draw()` y los círculos en ella dependen de las variables `mouseX` y `mouseY`.
+
+![](/img/img-ejemplo-mask-circulos.jpg)
+
+```java
+PImage foto; // foto original
+PImage fotoInvertida; // foto invertida
+PGraphics capa1;
+
+void setup(){
+  size( 640, 480 );
+
+  // crear "objeto" de tipo PImage
+  foto = loadImage("trajinera.jpg");
+  foto.resize( width, height );
+
+  // copiar foto
+  fotoInvertida = foto.get();
+  fotoInvertida.filter( INVERT ); // invierte foto
+
+  // crea capa para la máscara:
+  capa1 = createGraphics( 640, 480);
+}
+
+void draw(){
+  // dibuja máscara en cada frame, 
+  // utilizando coords mouseX, mouseY como centro de círculos
+  capa1.beginDraw();
+  capa1.background(0); // negro
+  capa1.fill(255); // blanco
+  capa1.ellipse(mouseX, mouseY, 300, 300);
+  capa1.fill(0); // negro
+  capa1.ellipse(mouseX, mouseY, 200, 200);
+  capa1.fill(255); // blanco
+  capa1.ellipse(mouseX, mouseY, 100, 100);
+  capa1.endDraw();
+
+  // enmascara la imagen
+  foto.mask( capa1 );
+  
+  // dibuja la foto invertida de fondo
+  image(fotoInvertida, 0, 0);
+
+  // dibuja encima la foto original enmascarada
+  image(foto, 0, 0);
+}
+```
+
+# Capas para organizar el dibujo
+
+En ocasiones queremos aprovechar el comportamiento de "dibujar sin borrar el fondo" en conjunto con otros comportamientos.
+
+Dibujar en capas nos puede ayudar, como muestra este ejemplo.
+
+Aquí se dibuja en una capa con un "pincel" obtenido como recorte de una imagen. Esta capa se dibuja encima de la imagen filtrada.
+
+![](/img/img-ejemplo-pincel-capas.jpg)
+
+```java
+// Pincel a base de recorte
+// El trayecto se dibuja sobre una "capa".
+// Esto permite dibujar un fondo
+PImage foto;
+PImage recorte;
+PGraphics capa;
+
+void setup(){
+  size( 640, 480 );
+  // crear "objeto" de tipo PImage
+  foto = loadImage("trajinera.jpg");
+  foto.resize( width, height );
+  
+  // obtén un recorte de la foto a color
+  recorte = foto.get(300, 300,    100, 100);
+ 
+  // filtra a la foto original (el recorte no se afecta)
+  foto.filter( GRAY );
+  
+  // crea la capa del tamaño del lienzo
+  capa = createGraphics( 640, 480);
+}
+
+void draw(){
+  // actualiza la capa con el pincel
+  capa.beginDraw();
+  capa.image( recorte, mouseX, mouseY);
+  capa.endDraw();
+
+  // dibuja la foto
+  image( foto, 0, 0);
+  // dibuja la capa encima
+  image( capa, 0, 0);
+}
+```
diff --git a/src/notas/imagenes-colores.md b/src/notas/imagenes-colores.md
new file mode 100644
index 0000000..a012d3b
--- /dev/null
+++ b/src/notas/imagenes-colores.md
@@ -0,0 +1,156 @@
+---
+title: "Imágenes: Colores, filtros"
+---
+
+Processing incluye funciones que afectan cómo se muestran imágenes en la pantalla, y `PImage` tiene un método `filter()` con diversos procesamientos básicos.
+
+# Funciones
+
+## tint( c )
+
+Establece el color de "relleno" para mostrar una imagen. 
+
+Puede funcionar para cambiar tonalidades, y/o para agregarle transparencia.
+
+Por default, el color con el que Processing dibuja las imágenes es blanco sin transparencia.
+
+Esta función no modifica a la imagen original.
+
+```java
+// colorea la imagen de rojo
+tint( 255, 0, 0 );
+image(foto, 0, 0);
+
+// usa los colores originales, pero con transparencia
+tint(255, 128);
+image(foto, 50, 50);
+```
+
+[[Color]](/notas/color.html)
+
+### noTint()
+
+Esta función quita la configuración que hayamos asignado con `tint( )`.
+
+## blendMode( b )
+
+Cambia el modo en el que los pixeles dibujados posteriormente se *mezclan* con los que ya están en en lienzo.
+
+Esta *mezcla* implica un proceso aritmético por pixel y por canal de color RGB.
+
+### blendMode( BLEND )
+
+Por *default*, el modo establecido es `BLEND`, que encima al color nuevo cuando no hay transparencia, o hace un *promedio pesado* cuando sí la hay.
+
+### blendMode( ADD )
+
+Con el modo `ADD` los valores de los canales de color se suman, con un resultado máximo de 255. A esto último se le llama *white clip*: las sumas tendrán un resultado máximo de "blanco".
+
+En este ejemplo, la intersección entre el círculo rojo (255, 0, 0) y el verde (0, 255, 0) resulta en amarillo (255, 255, 0):
+
+```java
+background(0);
+size(300,200);
+
+fill( 255, 0, 0); // color rojo
+ellipse(100, 100, 150, 150);
+
+blendMode(ADD);
+
+fill( 0, 255, 0); // color verde
+ellipse(200, 100, 150, 150);
+```
+
+![](/img/blendMode-add-circulos.png)
+
+### blendMode( SUBTRACT )
+
+Con el modo `SUBTRACT` los canales de color nuevos se *restan* a los anteriores, con un resultado mínimo de 0 (*black clip*). 
+
+En este ejemplo, dibujamos el fondo blanco (255, 255, 255) y un círculo amarillo (255, 255, 0). Al activar el modo `SUBTRACT`, el círculo de color "verde" (0, 255, 0) se *resta* a los colores ya dibujados.
+
+En la intersección de los círculos, la resta por canal de "amarillo" menos "verde" resulta en rojo (255-0, 255-255, 0).
+
+En el fondo, la resta por canal de "blanco" menos "verde" resulta en magenta (255-0, 255-255, 255-0):
+
+```java
+background(255);
+size(300,200);
+
+fill( 255, 255, 0); // color amarillo
+ellipse(100, 100, 150, 150);
+
+blendMode(SUBTRACT);
+
+fill( 0, 255, 0); // color verde
+ellipse(200, 100, 150, 150);
+```
+
+![](/img/blendMode-subtract-circulos.png)
+
+### blendMode( MULTIPLY )
+
+Con el modo `MULTIPLY` los canales de color se multiplican, tomando en cuenta que el valor máximo por canal (255) corresponde a 1.0, y el valor mínimo (0) a 0.
+
+En este ejemplo, el círculo gris le reduce la intensidad a la intersección con el círculo amarillo.
+
+```java
+background(0); // fondo negro
+size(300,200);
+
+fill( 255, 255, 0); // color amarillo
+ellipse(100, 100, 150, 150);
+
+blendMode(MULTIPLY);
+
+fill( 128 ); // gris 50%
+ellipse(200, 100, 150, 150);
+```
+
+![](/img/blendMode-multiply-circulos.png)
+
+Este *blending mode* también se puede usar para *enmascarar* una imagen:
+
+* Primero dibujamos con `blendMode(BLEND)` en tonos en escala de grises: lo negro ocultará completamente, lo blanco dejará pasar a la imagen completamente, y cualquier valor intermedio la mostrará parcialmente.
+* Después activamos `blendMode(MULTIPLY)` y dibujamos la imagen: esto multiplicará cada pixel de la imagen con lo ya dibujado en el fondo.
+
+```java
+PImage foto;
+
+void setup(){
+  size( 640, 480 );
+  foto = loadImage("trajinera.jpg");
+  foto.resize( width, height );
+}
+
+void draw(){
+  // dibuja "máscara":
+  blendMode( BLEND );
+  background( 0 ); // fondo negro
+  fill( 255 ); // círculo blanco a mitad del lienzo
+  ellipse( width/2, height/2, 200, 200);
+
+  // dibuja imagen
+  blendMode( MULTIPLY );
+  image(foto, 0, 0);
+}
+```
+
+![](/img/blendMode-multiply-mascara.jpg)
+
+
+### Otros modos
+
+Aquí la referencia completa de las opciones:
+[Processing Reference: blendMode()](https://processing.org/reference/blendMode_.html)
+
+# Métodos de PImage
+
+## .filter( )
+
+Podemos aplicar filtros básicos y preprogramados a nuestras imágenes.
+
+**Importante**: Estos filtros son "*destructivos*" en cuanto a que afectan la información de la imagen cargada en Processing, reemplazándola por la versión filtrada.
+
+Aquí la referencia completa de los filtros:
+[Procesing Reference: PImage::filter()](https://processing.org/reference/PImage_filter_.html)
diff --git a/src/notas/imagenes-read.md b/src/notas/imagenes-read.md
new file mode 100644
index 0000000..ed86d0a
--- /dev/null
+++ b/src/notas/imagenes-read.md
@@ -0,0 +1,228 @@
+---
+title: "Imágenes: Abrir, mostrar, leer"
+---
+
+Desde Processing podemos abrir imágenes de mapas de bits (*.jpg*, *.png*) y dibujarlas en el canvas.
+
+# Preparación
+
+Es necesario tener **nuestro sketch de código guardado**, y colocar las imágenes que queremos utilizar dentro de la carpeta donde se encuentra el archivo *.pde* de nuestro sketch, ya sea por sí solas o dentro de una carpeta llamada *data*.
+
+Por ejemplo, si guardamos nuestro sketch dentro de la carpeta *sketchbook* con el nombre *estudioImagenes*, hay que colocar nuestras imágenes en la carpeta *sketchbook/estudioImagenes* o en *sketchbook/estudioImagenes/data*.
+
+
+# Funciones
+
+Estas funciones de Processing permiten abrir/cargar y mostrar imágenes.
+
+## loadImage( )
+
+Carga una imagen que esté en el sistema de archivos (ver arriba, *Preparación*) y regresa un objeto de tipo `PImage`.
+
+```java
+// declara variable de tipo PImage
+PImage foto;
+
+void setup(){
+    // carga la imagen dentro de la variable 'foto'
+    foto = loadImage("foto del día.jpg");
+}
+```
+
+## image( )
+
+Dibuja una imagen en el lienzo.
+
+Hay dos versiones, una con tres parámetros (`PImage, float, float`) y otra con cinco (`PImage, float, float, float, float`)
+
+```java
+// dibuja la imagen de la variable 'foto'
+// con esquina superior izquierda en (200,300)
+// y a su tamaño original 
+image( foto, 200, 300);
+
+// dibuja la imagen de la variable 'foto'
+// con esquina superior izquierda en (200,300)
+// y dimensiones de 640x480
+image( foto, 200, 300, 640, 480);
+```
+
+### imageMode( )
+
+El significado de los argumentos numéricos de `image( )` puede cambiarse con la función `imageMode( )`, que se comporta como `rectMode( )` con los posibles valores de `CORNER`, `CORNERS` y `CENTER`.
+
+[[Dibujo con figuras]](/notas/figuras.html)
+
+## save( n )
+
+Guarda el canvas actual con el nombre de archivo dado por `String n`, dentro de la carpeta donde está el sketch.
+
+El nombre de archivo ha de ser *.png*, *.jpg*, *.tiff* o *.tga*
+
+```java
+save( "composición.png" );
+```
+
+
+# Métodos y atributos
+
+Los siguientes son métodos y atributos de la clase `PImage`. Esto implica que le pertenecen y actúan sobre la imagen en cuestión.
+
+## .resize( w, h ) 
+
+Cambia las dimensiones de la imagen original a `w` pixeles de ancho y `h` pixeles de alto.
+
+```java
+// redimensiona la imagen a 640x480
+foto.resize( 640, 480);
+// a partir de aquí, la imagen medirá 640x480
+image(foto, 50, 50);
+image(foto, 0, 0);
+```
+
+## .get( x, y ) - pixel!
+
+Obtén el color del pixel que se ubica en las coordenadas `x,y` **de la imagen**. 
+
+Regresa un valor de tipo `color`.
+
+```java
+// obtén el color de la esquina superior izquierda
+color esquina = foto.get(0, 0);
+
+// obtén el color sobre el cual se ubica el mouse
+// (siempre y cuando la esquina superior izquierda
+// de la imagen esté en 0,0 del canvas)
+color picker = foto.get( mouseX, mouseY );
+```
+
+## .get( x, y, w, h ) - recorte!
+
+Obtén una imagen "recorte" de la original: un rectángulo de `w` pixeles de ancho, `h` de alto, con esquina superior en `x,y`.
+
+Regresa un valor de tipo `PImage`.
+
+La imagen original no se modifica.
+
+```java
+// "recorta" el cuadrado de 100x100 pixeles
+// correspondiente a la esquina superior izquierda (0, 0)
+// de la imagen original
+PImage recorte = foto.get(0, 0, 100, 100);
+```
+
+## .width, .height
+
+Atributos que corresponden al ancho y alto de la imagen.
+
+```java
+// "imprime" en la consola los valores de ancho y alto:
+println( foto.width, foto.height );
+
+// dibuja un rectángulo con las mismas dimensiones que la foto:
+rect( 10, 10, foto.width, foto.height);
+```
+
+# Ejemplos
+
+## Carga y muestra una imagen
+
+```java
+// variable con nuestra foto
+PImage foto;
+
+void setup(){
+    size( 640, 480 );
+
+    // carga una imagen
+    foto = loadImage( "mi foto.jpg");
+
+    // redimensiona la imagen al tamaño del canvas
+    foto.resize( width, height );
+}
+
+void draw(){
+    // dibuja la imagen en el lienzo
+    image( foto, 0, 0 );
+}
+```
+
+## Recortes
+
+```java
+// variable con nuestra foto
+PImage foto;
+PImage recorte1;
+PImage recorte2;
+
+void setup(){
+    size( 640, 480 );
+
+    // carga una imagen
+    foto = loadImage( "mi foto.jpg");
+
+    // redimensiona la imagen al tamaño del canvas
+    foto.resize( width, height );
+
+    // obtén la mitad izquierda de la foto
+    recorte1 = foto.get(0, 0, 320, 480);
+
+    // obtén la mitad derecha de la foto
+    recorte2 = foto.get(320, 0, 320, 480);
+}
+
+void draw(){
+    // dibuja la mitad izquierda del lado derecho:
+    image( recorte1, 320, 0);
+
+    // ... y la mitad derecha del lado izquierdo
+    image( recorte2, 0, 0);
+}
+```
+
+![](/img/img-ejemplo-recortes.jpg)
+
+## Imagen como pincel, con tecla para guardar resultado
+
+```java
+// variable con nuestra foto
+PImage foto;
+// variable para el "pincel"
+PImage recorte;
+
+void setup(){
+    size( 640, 480 );
+
+    // carga una imagen
+    foto = loadImage( "mi foto.jpg");
+
+    // obtén un recorte de la imagen
+    recorte = foto.get( 0, 0, 100, 100);
+
+    // cambia el modo de dibujo de imagen
+    // para que las coordenadas x,y sean las del centro
+    imageMode( CENTER );
+}
+
+void draw(){
+    // dibuja el recorte con su centro en mouseX, mouseY
+    image( recorte, mouseX, mouseY );
+}
+
+void keyPressed(){
+    // guarda 'resultado.png' al presionar la tecla 'g'
+    if( key == 'g' ){
+        save("resultado.png");
+    }
+}
+```
+
+![](/img/img-ejemplo-pincel.jpg)
+
+## Algunas otras ideas
+
+* Dibuja con un círculo que siga al mouse y que obtenga su color del pixel en `mouseX, mouseY`. No muestres la imagen original.
+* Realiza varios recortes y reacomódalos.
+* Alterna recortes de dos imágenes distintas.
+* Desfasa recortes.
+* Toma un pequeño recorte de imagen (por ejemplo de 1 pixel de ancho) y repítelo varias veces con un ciclo `for`.
diff --git a/src/notas/interactividad.md b/src/notas/interactividad.md
new file mode 100644
index 0000000..4b975a3
--- /dev/null
+++ b/src/notas/interactividad.md
@@ -0,0 +1,222 @@
+---
+title: "Interactividad con mouse y teclado"
+---
+
+El ciclo de animación en Processing, en combinación con expresiones condicionales, permite agregar interactividad en tiempo real a nuestros sketches.
+
+[[Ciclo de animación]](/notas/draw.html)
+
+[[Expresiones condicionales]](/notas/condicionales.html)
+
+# Variables especiales
+
+Processing incluye y se encarga de actualizar en cada *frame* variables relacionadas con el estado del *mouse* y del teclado.
+
+Estas variables son:
+
+* `mouseX` y `mouseY`: coordenadas del puntero del *mouse* en el canvas (tipo `int`)
+* `mousePressed`: variable booleana que indica si el *mouse* está presionado (tipo `boolean`)
+* `keyPressed`: variable booleana que indica si alguna tecla está presionada (tipo `boolean`)
+* `key`: variable con el valor de la tecla más reciente que fue presionada (tipo `char`)
+
+
+[[Variables: Fundamentos]](/notas/variables.html)
+
+[[Variables y expresiones booleanas]](/notas/boolean.html)
+
+# Plantillas / Ejemplos
+
+Estos son ejemplos básicos para usar ya sea la interacción de la posición o click del mouse, o de teclas presionadas. 
+
+Todos estos ejemplos revisan en cada *frame* de animación el estado de las variables. 
+
+Recuerda que el `else` puedes eliminarlo si no lo necesitas en lo que desarrolles.
+
+## Sigue al mouse...
+
+```java
+void setup(){
+  size(640, 480);
+}
+void draw(){
+  // dibuja círculo en la posición del mouse
+  ellipse( mouseX, mouseY, 50, 50);
+}
+```
+
+## Si el mouse está en cierta ubicación...
+
+```java
+void setup(){
+  size(500, 500);
+}
+void draw(){
+  // si el mouse está del lado izquierdo
+  if( mouseX < width/2 ){
+
+  } else { // si no
+
+  }
+}
+```
+
+## Si el mouse está presionado...
+
+```java
+void setup(){
+  size(640, 480);
+}
+void draw(){
+  // aquí iría código a ejecutar siempre:
+  // ...
+
+  if( mousePressed ){
+    // realiza esto si el mouse está presionado
+    // ...
+  }
+  else {
+    // realiza esto si no
+    // ...
+  }
+
+  // aquí puede ir más código a ejecutar siempre:
+  // ...
+}
+```
+
+## Si alguna tecla está presionada...
+
+```java
+void setup(){
+  size(640, 480);
+}
+
+void draw(){
+  // aquí iría código a ejecutar siempre:
+  // ...
+
+  if( keyPressed ){ // si alguna tecla está presionada
+    if( key == ' '){
+      // realiza esto si la barra espaciadora está presionada
+      // ...
+    }
+    else if( key == 'a'){
+      // realiza esto si la tecla 'a' está presionada
+      // ...
+    }
+    else if( key == 'd'){
+      // realiza esto si la tecla 'd' está presionada
+      // ...
+    }
+    // ... etc
+  } // cierra if( keyPressed )
+  else {
+    // realiza esto cuando no hay tecla presionada
+    // ...
+  }
+
+  // aquí puede ir más código a ejecutar siempre:
+  // ...
+}
+```
+
+## Teclado WASD
+
+Este ejemplo permite cambiar la posición de un círculo utilizando las teclas WASD.
+
+```java
+// declara variables de posiciones
+float px, py;
+
+void setup(){
+  size(640, 480);
+
+  // inicializa las variables a la mitad del lienzo:
+  px = width/2;
+  py = height/2;
+}
+
+void draw(){
+  background( 0 );
+
+  // dibuja el círculo en px, px
+  ellipse( px, py, 50, 50);
+
+  if( keyPressed ){ // si alguna tecla está presionada
+    if( key == 'w'){ // arriba
+      py = py - 1;  // decrementa py
+    }
+    else if( key == 's'){ // abajo
+      py = py + 1;  // incrementa py
+    }
+    else if( key == 'a'){ // izquierda
+      px = px - 1; // decrementa px
+    }
+    else if( key == 'd'){ // izquierda
+      px = px + 1; // incrementa px
+    }
+  } // cierra if( keyPressed )
+
+} // cierra draw()
+
+```
+
+# Eventos
+
+En ocasiones conviene realizar alguna acción solamente en el momento en el que sucede un cambio de estado.
+
+Para esto, en lugar de revisar el estado de las variables de *mouse* y teclado en cada *frame*, podemos utilizar las funciones que Processing ya tiene programadas:
+
+* `mousePressed()`: se llama una vez al presionar el botón del *mouse*
+* `mouseReleased()`: se llama una vez al soltar el botón del *mouse*
+* `mouseClicked()`: se llama después de presionar y soltar el botón del *mouse*
+* `mouseDragged()`: se llama cada *frame* en el que el *mouse* esté presionado y en movimiento
+* `mouseMoved()`: se llama cada *frame* en la que el *mouse* NO esté presionado pero sí en movimiento
+* `keyPressed()`: se llama una vez al presionar una tecla
+* `keyReleased()`: se llama una vez al soltar una tecla
+
+## Ejemplos de uso de eventos
+
+### Cambio de color de fondo
+
+Este ejemplo genera un color de fondo aleatorio una vez cada vez que se presiona el *mouse*
+
+```java
+// cambia de color de fondo 
+// una vez cada vez que se presiona el mouse
+
+color colorFondo;
+void setup(){
+  size(500, 500);
+}
+
+void draw(){
+ background(colorFondo);
+}
+
+void mousePressed(){
+ colorFondo = color(random(255), random(255), random(255)); 
+}
+```
+
+[[Números pseudo-aleatorios]](/notas/random.html)
+
+Compara cómo el funcionamiento es diferente respecto a la revisión constante (*polling*) de la variable `mousePressed`, cuando el *mouse* se mantiene presionado:
+
+```java
+// cambia de color de fondo 
+// en cada frame mientras el mouse esté presionado
+
+color colorFondo;
+void setup() {
+  size(500, 500);
+}
+
+void draw() {
+  background(colorFondo);
+
+  if (mousePressed) {
+    colorFondo = color(random(255), random(255), random(255));
+  }
+}
+```
diff --git a/src/notas/lineas.md b/src/notas/lineas.md
new file mode 100644
index 0000000..280e049
--- /dev/null
+++ b/src/notas/lineas.md
@@ -0,0 +1,72 @@
+---
+title: "Dibujo con puntos y líneas"
+---
+
+## Funciones
+
+### point( x, y);
+
+Dibuja un punto en las coordenadas ( x, y)
+
+#### ejemplo de uso
+
+```java
+// crea una ventana cuadrada de 400x400
+size(400, 400);
+
+// dibuja un punto en el centro
+point( 200, 200 );
+```
+
+---
+
+### line( x1, y1, x2, y2 );
+
+Dibuja una línea recta entre el punto (x1, y1) y el punto (x2, y2)
+
+![](/img/line.png)
+
+![](/img/line-detalle.png)
+
+#### ejemplos de uso
+
+```java
+// crea una ventana cuadrada de 400x400
+size(400, 400);
+
+// dibuja una línea diagonal que cruza todo el canvas
+line( 0, 0, 400, 400);
+
+// dibuja una línea vertical a la mitad del canvas, usando width y height
+line( width/2, 0, width/2, height);
+```
+
+---
+
+### strokeWeight( n );
+
+Cambia el grosor de la línea o punto con la cual se dibuja, a `n` pixeles.
+
+Originalmente, el grosor es de 1 pixel.
+
+Al cambiarlo, todas las líneas y puntos dibujadxs a continuación tendrán el nuevo grosor, hasta que sea cambiado de nuevo.
+
+Podemos pensar en esa función como la indicación "toma la pluma con grosor `n`"
+
+
+#### ejemplo de uso
+
+```java
+size(400, 400);
+
+// dibuja una línea con grosor de 2 pixeles
+
+strokeWeight(2);
+line(0,0, 200,200);
+
+// dibuja dos líneas con grosor de 5 pixeles
+
+strokeWeight(5);
+line(200,200, 400,0);
+line(200,200, 400,400);
+```
diff --git a/src/notas/map.md b/src/notas/map.md
new file mode 100644
index 0000000..13df11e
--- /dev/null
+++ b/src/notas/map.md
@@ -0,0 +1,25 @@
+---
+title: "Mapeo/conversión de valores"
+---
+
+# Función map()
+
+Esta función regresa un número `float` que corresponde a convertir un número dentro de un rango original, a un rango distinto:
+
+```java
+float numConvertido = map( numOriginal, minOriginal, maxOriginal, minNuevo, maxNuevo);
+```
+
+Donde:
+
+* `numOriginal`: es el número o variable a convertir
+* `minOriginal`: es el valor mínimo que esa variable puede tener
+* `maxOriginal`: es el valor máximo que esa variable puede tener
+* `minNuevo`: es el valor mínimo del nuevo rango
+* `maxNuevo`: es el valor máximo del nuevo rango
+
+# Notas que enlazan aquí
+
+* [[Coordenadas polares]](/notas/coordenadas-polares.html)
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Visualización de contadores]](/notas/visualizacion-contadores.html)
diff --git a/src/notas/modulo.md b/src/notas/modulo.md
new file mode 100644
index 0000000..8bdf849
--- /dev/null
+++ b/src/notas/modulo.md
@@ -0,0 +1,66 @@
+---
+title: "Operador módulo"
+---
+
+El operador módulo (`%`) trabaja con dos números enteros, y resulta en el 'residuo' de dividir uno por otro.
+
+Por ejemplo, cuando hacemos la división `3/2`, el resultado es 1, y el 'residuo' es 1 también:
+
+```java
+3/2 == 1
+3%2 == 1
+```
+La división `4/2` resulta en 2, con un residuo de 0:
+
+```java
+4/2 == 2
+4%2 == 0
+```
+
+La división `5/2` resulta también en 2, pero con un residuo de 1:
+
+```java
+5/2 == 2
+5%2 == 1
+``` 
+
+Veamos qué pasa con una secuencia de números, módulo 2:
+
+```java
+0%2 == 0
+1%2 == 1
+2%2 == 0
+3%2 == 1
+4%2 == 0
+5%2 == 1
+6%2 == 0
+7%2 == 1
+8%2 == 0
+...
+```
+¿Notas cómo el resultado alterna entre 0 y 1?
+
+Ahora veamos qué pasa con la misma secuencia de números, módulo 3:
+
+```java
+0%3 == 0
+1%3 == 1
+2%3 == 2
+3%3 == 0
+4%3 == 1
+5%3 == 2
+6%3 == 0
+7%3 == 1
+8%3 == 2
+...
+```
+
+Aquí el resultado alterna y repite los valores 0,1,2.
+
+Podemos generalizar diciendo que el resultado de cualquier número, módulo `N`: 
+
+* Va a resultar en un número entre 0 y `N-1`
+* va a resultar en uno entre `N` posibles resultados
+* Si el resultado es 0, entonces el número original es múltiplo de `N`
+
+Revisa las listas anteriores con estas nociones.
diff --git a/src/notas/nav.html b/src/notas/nav.html
new file mode 100644
index 0000000..eb9f94b
--- /dev/null
+++ b/src/notas/nav.html
@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>
diff --git a/src/notas/pixeles.md b/src/notas/pixeles.md
new file mode 100644
index 0000000..2faf1bc
--- /dev/null
+++ b/src/notas/pixeles.md
@@ -0,0 +1,317 @@
+---
+title: "Arreglo (*array*) de pixeles"
+---
+
+Processing nos permite acceder y modificar a los pixeles de una imagen a través de una estructura sistematizada llamada arreglo (*array*).
+
+[[Arreglos: Fundamentos]](/notas/arreglos.html)
+
+# Fundamentos
+
+## Atributo `.pixels`
+
+Dada una variable de tipo `PImage` llamada `imagen`, su arreglo de pixeles lo obtenemos via  `imagen.pixels`.
+
+## Tipo de dato
+
+El arreglo de pixeles consiste en un arreglo de tipo `color[]`, pues cada pixel lo podemos entender como una unidad fundamental de la imagen que solo tiene/es un color. 
+
+## Dimensiones
+
+El arreglo de pixeles tendrá `imagen.width*imagen.height` elementos, o bien `imagen.pixels.length`.
+
+El primer pixel (`imagen.pixels[0]`) es el de la esquina superior izquierda, el segundo pixel es el que le sigue a la derecha, y así sucesivamente: de izquierda a derecha y de arriba a abajo.
+
+El último pixel es el de la esquina inferior derecha.
+
+## Lectura y escritura
+
+Antes de realizar operaciones sobre el arreglo de pixeles, necesitamos "cargarlos" de la siguiente forma:
+
+```java
+imagen.loadPixels();
+```
+
+Después de modificarlos, actualizamos la imagen de la siguiente forma:
+
+```java
+imagen.updatePixels();
+```
+
+Para leer y escribir pixeles usamos la notación de arreglos:
+
+```java
+// almacena el color del primer pixel:
+color pixel = imagen.pixels[0];
+
+// colorea de blanco al pixel con índice 200
+imagen.pixels[200] = color(255);
+```
+
+# Ciclos
+
+La principal ventaja de tener acceso a los pixeles a través de un arreglo, es que podemos utilizar un ciclo `for` (o `while`) para iterar sobre cada uno de ellos y entonces leerlos y modificarlos.
+
+## Una dimensión: índice
+
+Esta es una plantilla de  ciclo `for` que usa a una variable `int i` para iterar sobre cada uno de los pixeles.
+
+```java
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // escribe el color del pixel
+  imagen.pixels[i] = pixel;
+}
+imagen.updatePixels();
+```
+
+### Coordenadas a partir de índice
+
+En ocasiones necesitaremos obtener las coordenadas `x, y` que corresponden al índice `i`. 
+
+Partiendo de que la imagen tiene `imagen.height` filas de `imagen.width` pixeles cada uno, podemos calcular el número de fila (`y`) con una división, y el número de pixel en esa fila (`x`) con el operador módulo, que es el residuo de la división:
+
+```java
+int x = i % imagen.width;
+int y = i / imagen.width;
+```
+
+[[Operador módulo]](/notas/modulo.html)
+
+## Dos dimensiones
+
+Esta plantilla usa dos ciclos anidados, uno con la variable `y` para recorrer las filas de pixeles, y otro con la variable `x` para recorrer los pixeles de cada una.
+
+### Índice a partir de coordenadas
+
+En este caso necesitamos calcular el valor del índice respecto a esas variables `x`,`y`
+
+```java
+int i = x + y*imagen.width;
+```
+
+### Plantilla
+
+```java
+imagen.loadPixels();
+for( int y=0; y<imagen.height; y++){
+  for( int x=0; x<imagen.width; x++){
+    int i = x + y*imagen.width;
+
+    // lee el color del pixel
+    color pixel = imagen.pixels[i];
+
+    // escribe el color del pixel
+    imagen.pixels[i] = pixel;
+}
+imagen.updatePixels();
+```
+
+*Nota: también podríamos utilizar `imagen.get(x,y)` para obtener el color del pixel, pero es una operación un poco más lenta que en ocasiones se va a notar*
+
+# En el ciclo de animación
+
+Si solo queremos realizar un proceso una vez, conviene hacerlo dentro de `setup()`. Si ese proceso requiere cambiar en el tiempo, habrá que hacerlo dentro de `draw()`.
+
+La siguiente es una plantilla que carga una imagen y recorre sus pixeles sin cambiarlos. Más adelante se mostrarán posibilidades con las cuales reemplazar el ciclo `for` mostrado.
+
+```java
+PImage imagen;
+
+void setup(){
+  size(640, 480);
+
+  imagen = loadImage("trajinera.jpg");
+  imagen.resize(640, 480);
+
+  // recorre pixeles:
+  imagen.loadPixels();
+  for( int i=0; i<imagen.pixels.length; i++){
+    // lee el color del pixel
+    color pixel = imagen.pixels[i];
+  
+    // escribe el color del pixel
+    imagen.pixels[i] = pixel;
+  }
+  imagen.updatePixels();
+}
+
+void draw(){
+  image(imagen, 0, 0);
+}
+```
+
+
+# Información de color
+
+Las siguientes funciones nos permiten obtener información específica sobre el color que leímos, como un número de tipo `float`. Sus nombres indican qué valor calculan a partir del color que utilicemos como argumento.
+
+* `alpha( c )`
+* `red( c )`
+* `green( c )`
+* `blue( c )`
+* `hue( c )`
+* `saturation( c )`
+* `brightness( c )`
+
+Por ejemplo, las siguientes líneas obtener el valor de brillo del primer pixel en el arreglo:
+
+```java
+color pixel = imagen.pixeles[ 0 ];
+float brillo = brightness( pixel );
+```
+
+# Ejemplos de procesamientos por pixel
+
+Las siguientes son ejemplos de procesamientos que buscan ser modificados y explorados.
+
+Todos estos actúan sobre un pixel a la vez, y lo modifican respecto a sus propias características de color.
+
+## Cambio *lineal* de niveles
+
+### Eliminación de canal RGB
+
+Este ejemplo lee los tres canales RGB y crea un nuevo color sin uno de ellos:
+
+```java
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // obtén componentes RGB
+  float rojo = red( pixel );
+  float verde = green( pixel );
+  float azul = blue( pixel );
+
+  // asigna un nuevo color
+  imagen.pixels[i] = color( 0, verde, azul);
+}
+imagen.updatePixels();
+```
+
+### Cambio de brillo
+
+Este ejemplo lee los tres canales HSB y escala (multiplica) uno de ellos.
+
+Nota el uso de `colorMode( )` para que el color creado funcione en HSB
+
+```java
+colorMode(HSB, 360, 100, 100);
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // obtén componentes HSB
+  float hue = hue( pixel );
+  float sat = saturation( pixel );
+  float bri = brightness( pixel );
+
+  // asigna un nuevo color con brillo al 80%
+  imagen.pixels[i] = color( hue, sat, bri*0.8);
+}
+imagen.updatePixels();
+```
+
+### Más posibilidades
+
+* ¿Qué pasa si intercambias la posición de los canales de color? 
+* ¿O si usas solo uno de los canales como nuevo color/tono del pixel?
+* ¿Y si sumas o restas alguna cantidad a los canales? ¿Y si esa cantidad es aleatoria?
+* ¿Cómo podrías *invertir* los colores a través de arimética?
+* ¿Y si usas `map()` para redimensionar el rango de alguno de los canales?
+
+## Umbral (*Threshold*)
+
+Podemos utilizar expresiones condicionales para modificar los pixeles de manera *no lineal*.
+
+### Brillo
+
+Este ejemplo usa el valor de brillo para decidir entre dos posibilidades: si el valor de brillo es mayor a cierta cantidad, deja el color como está, y si no lo reemplaza por negro.
+
+```java
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // obtén componente del brillo 
+  float bri = brightness( pixel );
+
+  if ( bri > 50 ){ // si es brillo es mayor a 50%
+    // asigna el color original
+    imagen.pixels[i] = pixel;
+  } else {
+    imagen.pixels[i] = color(0);
+  }
+}
+imagen.updatePixels();
+```
+
+### Chroma key
+
+En este caso utilizamos un condicional más complejo para encontrar cierto rango de colores con valores determinados de *hue*, saturación y brillo. Los que cumplen la condición se vuelven transparentes, y los que no se dejan igual.
+
+```java
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // obtén componentes HSB
+  float hue = hue( pixel );
+  float sat = saturation( pixel );
+  float bri = brightness( pixel );
+
+  // encuentra rango de colores via HSB
+  if( hue > 85 && hue < 140 && sat > 20 && bri > 50){
+    // asigna tono con transparencia total
+    foto.pixels[i] = color( 0, 0 );
+  } else {
+    // deja el pixel como estaba:
+    foto.pixels[i] = pixel;
+  }
+}
+imagen.updatePixels();
+```
+
+### Más posibilidades
+
+* ¿Y si dejas igual a los pixeles en cierto rango de colores, y modificas a los que no?
+* ¿Y si a cada canal de color le aplicas un umbral para asignalo en uno u otro valor?
+* ¿Y si tienes más de un condicional para asignar diferentes posibles niveles a cada canal?
+
+# Ejemplos de procesamientos con pixeles aledaños
+
+## Intercambio de pixeles
+
+Este ejemplo intercambia el color de dos pixeles que son aledaños en el arreglo.
+
+```java
+imagen.loadPixels();
+for( int i=0; i<imagen.pixels.length; i++){
+  // lee el color del pixel
+  color pixel = imagen.pixels[i];
+
+  // calcula el índice de un pixel entre 0 y 10 lugares
+  // más adelante en el arreglo
+  int nuevoindice = (i + int(random(10)) ) % foto.pixels.length;
+
+  // lee el color de ese pixel
+  color pixel2 = imagen.pixels[nuevoindice];
+
+  // asigna los valores intercambiados:
+  imagen.pixels[i] = pixel2;
+  imagen.pixels[nuevoindice] = pixel;
+
+}
+imagen.updatePixels();
+```
+
+Nota el uso del operador módulo al calcular el nuevo índice, para asegurarnos que el resultado siempre esté entre 0 y `foto.pixels.length - 1`.
+
+[[Operador módulo]](/notas/modulo.html)
diff --git a/src/notas/poligonos.md b/src/notas/poligonos.md
new file mode 100644
index 0000000..6f8d154
--- /dev/null
+++ b/src/notas/poligonos.md
@@ -0,0 +1,164 @@
+---
+title: "Dibujo de polígonos"
+---
+
+Processing nos permite dibujar polígonos arbitrarios a partir de una serie de vértices.
+
+# Fundamentos
+
+La estructura general para dibujar un polígono en Processing consiste en:
+
+* Inicio con `beginShape();`
+* Lista de vértices de la forma `vertex(x, y);`, en sentido *clockwise* (con las manecillas del reloj)
+* Final con `endShape();` o `endShape(CLOSE);` para asegurar que el polígono se cierra.
+
+Siempre conviene empezar con algún tipo de boceto para ubicar los vértices.
+
+## Punto de referencia
+
+Vale mucho la pena **establecer un punto de referencia** desde el cual la figura está dibujada. 
+
+Por ejemplo, en las figuras básicas que dibuja Processing por default:
+
+* `rect( )` está dibujado respecto a su *esquina superior izquierda*
+* `ellipse( )` está dibujada respecto a su *centro*
+
+Esto nos funcionará más adelante.
+
+## Ejemplos
+
+Por ejemplo, después de ubicar en papel los vértices de un cuadrado de 100 pixeles de lado, *con esquina superior izquierda en 0,0*, lo podemos dibujar de la siguiente forma:
+
+```java
+// dibuja un cuadrado de 100x100 con esquina superior izquierda en 0,0
+beginShape();
+vertex(0, 0); // superior izquierda
+vertex(100, 0); // superior derecha
+vertex(100,100); // inferior derecha
+vertex(0,100); // inferior izquierda
+endShape(CLOSE); // cierra figura
+```
+
+Este es un cuadrado del mismo tamaño, pero dibujado *con su centro en 0,0*:
+
+```java
+// dibuja un cuadrado de 100x100 con centro en 0,0
+beginShape();
+vertex(-50, -50); // superior izquierda
+vertex(50, -50); // superior derecha
+vertex(50,50); // inferior derecha
+vertex(-50,50); // inferior izquierda
+endShape(CLOSE); // cierra figura
+```
+
+# Opciones de almacenamiento de vértices
+
+Hay distintas estrategias para almacenar y manipular los valores numéricos en los vértices de nuestro polígono.
+
+## Constantes numéricas
+
+El método más directo, con la desventaja de que no podemos manipularlas directamente en el código, y de que tenemos que calcularlas manualmente:
+
+```java
+// dibuja un cuadrado de 100x100 con esquina superior izquierda en 0,0
+beginShape();
+vertex(0, 0); // superior izquierda
+vertex(100, 0); // superior derecha
+vertex(100,100); // inferior derecha
+vertex(0,100); // inferior izquierda
+endShape(CLOSE); // cierra figura
+```
+
+## Variables por coordenada
+
+Podemos usar variables para almacenar posiciones y parámetros de nuestro polígono, en `x` y en `y`.
+
+Esto nos permite modificar los vértices durante la ejecución del programa, o a mano pero con más facilidad.
+
+```java
+// dibuja un cuadrado en x,y
+// de w pixeles de lado
+
+float x = 0; // posición x
+float y = 0; // posición y
+float w = 100; // lado
+
+beginShape();
+vertex( x, y); // superior izquierda
+vertex( x+w , y); // superior derecha
+vertex( x+w, y+w ); // inferior derecha
+vertex( x, y+w ); // inferior izquierda
+endShape(CLOSE); // cierra figura
+```
+
+## Variables por vértice
+
+En ocasiones puede funcionar más tener cada vértice guardado como una variable de tipo `PVector`:
+
+```java
+// dibuja un cuadrado en 0,0
+// de 100 pixeles de lado
+
+PVector p1 = new PVector( 0, 0 ); // superior izquierda
+PVector p2 = new PVector( 100, 0); // superior derecha
+PVector p3 = new PVector( 100, 100); // inferior derecha
+PVector p4 = new PVector( 0, 100); // inferior izquierda
+
+beginShape();
+vertex( p1.x, p1.y );
+vertex( p2.x, p2.y );
+vertex( p3.x, p3.y );
+vertex( p4.x, p4.y );
+endShape(CLOSE); // cierra figura
+```
+
+## Arreglos
+
+En lugar de hacer una o dos variables para cada vértice, podemos hacer una que almacene a todos, y usar un ciclo `for` para dibujarlos.
+
+Lo revisamos en otro tema.
+
+## Generados
+
+También es posible usar ciclos `for` para establecer los valores de los vértices de acuerdo al número de iteración.
+
+# Extras
+
+## Huecos
+
+Para dibujar un hueco, podemos utilizar vértices entre `beginContour();` y `endContour();`.
+
+Los vértices han de estar en secuencia *counter-clockwise*, en sentido contrario de las manecillas del reloj.
+
+[beginContour() en la referencia de Processing](https://processing.org/reference/beginContour_.html)
+
+## Colores en vértices
+
+Utilizando el *renderer* llamado `P2D`, podemos asignar color de relleno (`fill()`) y/o de borde (`stroke()`) a cada vértice.
+
+[[Color]](/notas/color.html)
+
+Al ejecutarse, Processing *interpola* los colores en forma de gradiente
+
+```java
+void setup() {
+  size(400, 400, P2D); // nota el uso de P2D
+}
+
+void draw() {
+  noStroke();
+
+  beginShape();
+  // color magenta para los vértices superiores
+  fill(255, 0, 255);
+  vertex(0, 0);
+  vertex(100, 0);
+
+  // color amarillo para vértices inferiores
+  fill(255, 255, 0);
+  vertex(100, 100);
+  vertex(0, 100);
+
+  endShape(CLOSE);
+}
+```
diff --git a/src/notas/random.md b/src/notas/random.md
new file mode 100644
index 0000000..431018e
--- /dev/null
+++ b/src/notas/random.md
@@ -0,0 +1,146 @@
+---
+title: "Números pseudo-aleatorios"
+---
+
+Processing incluye funciones para obtener números elegidos "al azar".
+
+Técnicamente se dice que estos números son *pseudo-aleatorios* porque parten de un algoritmo específico que podría predecirse pero que simula azar. No parten de una operación realmente azarosa (como tirar un dado o lanzar una moneda).
+
+Como sea, para fines prácticos, los podemos considerar *aleatorios*.
+
+# Funciones
+
+## random(  )
+
+Genera y regresa un número pseudo-aleatorio de tipo `float`.
+
+Con un argumento, `random( n )` regresa un número aleatorio entre 0 y `n`; incluye al 0 pero no a `n `. `n` es un número de tipo `float`:
+
+```java
+// la variable distancia tomará un valor entre 0 y 100
+float distancia = random( 100 );
+```
+
+Con dos argumentos, `random( min, max )` regresa un número aleatorio entre `min` y `max`; incluye a `min` pero no a `max`. Ambos argumentos son de tipo `float`:
+
+```java
+// la variable "ancho" tomará un valor entre 100 y 200:
+float ancho = random( 100, 200 );
+```
+
+### Números enteros
+
+Para obtener un número entero (tipo `int`) aleatorio, hay que convertir el resultado de `random( )` con la función `int( )` que eliminará la parte decimal:
+
+```java
+// 'n' tomará uno de los siguientes valores:
+// 0, 1, 2, 3, 4, 5, 6, 7, 9
+int n = int( random( 10 ) );
+
+// 'dado' tomará uno de los siguientes valores:
+// 1, 2, 3, 4, 5, 6
+int dado = int( random( 1, 7 ) );
+```
+
+## randomSeed( n )
+
+Esta función establece la "semilla" `n` (tipo `int`) desde la cual se van a generar los números aleatorios que se obtengan a continuación. 
+
+El usar esta función hace que los números aleatorios que obtengamos sean los mismos cada vez que ejecutemos el programa.
+
+Podría parecer que eso no tiene sentido. Pero se utiliza para obtener y *poder repetir* resultados con parámetros azarosos.
+
+### Ejemplo
+
+En el siguiente ejemplo, cada vez que ejecutemos el programa el círculo estará en la misma posición. Nota que será una posición que no predefinimos. 
+
+Si cambiamos el valor de la "semilla", el círculo aparecerá en otra posición, pero siempre en la misma.
+
+Si comentamos/quitamos la función de `randomSeed( )`, cada vez que ejecutemos el programa el círculo estará en una nueva posición.
+
+```java
+size(200, 200);
+
+// establece semilla aleatoria
+randomSeed( 42 );
+
+float x = random(200);
+float y = random(200);
+
+// el círculo estará en una posición aleatoria,
+// pero siempre en la misma:
+ellipse( x, y, 10, 10);
+```
+
+En ocasiones querremos el comportamiento con `randomSeed( )`, y en otras no :)
+
+# Ejemplos
+
+Colección de ejemplos comunes de cantidades obtenidas aleatoriamente
+
+## Posición x,y 
+
+### En todo el lienzo/canvas
+
+```java
+float x = random( width );
+float y = random( height );
+```
+
+### En un área específica del lienzo/canvas
+
+Obtén una posición aleatoria dentro de un cuadrado de 100x100, con esquina superior izquierda en `(100, 100)`:
+
+```java
+float minX = 100;
+float maxX = 200;
+float minY = 100;
+float maxY = 200;
+
+float x = random( minX, maxX );
+float y = random( minY, maxY );
+```
+
+## Tamaño
+
+Obtén una dimensión entre 200 y 300 pixeles:
+
+```java
+float tam = random( 200, 300); 
+```
+
+## Color
+
+Podemos obtener colores aleatorios con la función `color( )`, donde uno o más de sus parámetros sean aleatorios.
+
+Aquí se ejemplifican algunas posibilidades
+
+### RGB
+
+```java
+// obtén un valor entre 0 y 255 en escala de grises
+color gris = color( random(255) );
+
+// obtén un color RGB aleatorio
+color rgbAleatorio = color( random(255), random(255), random(255) );
+
+// obtén un color RGBA aleatorio
+color rgbaAleatorio = color( random(255), random(255), random(255), random(255) );
+
+// colores con transparencia aleatoria:
+color grisTransparente = color( 100, random(255) );
+color rojoTransparente = color( 255, 0, 0, random(255) );
+```
+
+### HSB
+
+```java
+// cambia a modo de color HSB 
+colorMode( HSB, 360, 100, 100, 100);
+
+// obtén un color HSB aleatorio
+color hsbAleatorio = color( random(360), random(100), random(100) );
+
+// obtén un "hue" aleatorio, con saturación y brillo definidos:
+color hueAleatorio = color( random(360), 80, 100 );
+```
diff --git a/src/notas/sintaxis.md b/src/notas/sintaxis.md
new file mode 100644
index 0000000..8fae82c
--- /dev/null
+++ b/src/notas/sintaxis.md
@@ -0,0 +1,132 @@
+---
+title: "Notas sobre sintaxis"
+---
+
+Processing es un lenguaje de programación basado en Java.
+
+La forma de escribirlo correctamente tiene características que, si bien tienen precedentes históricos, tenemos toda la razón de considerar peculiares, extrañas o hasta molestas.
+
+Recomiendo que no te estreses, y tengas a la mano estas notas.
+
+En general, cuando un programa no se ejecuta debido a un error de sintaxis, Processing indica con un mensaje de texto a qué se debió.
+
+## Comentarios
+
+En principio, Processing tratará de interpretar todo lo que escribamos como si fueran instrucciones.
+
+Como sea, normalmente conviene acompañar nuestro código con palabras en nuestro idioma, como notas de qué es lo que está sucediendo en el programa.
+
+Se le llaman *comentarios* a estos textos que podemos escribir junto con el código. 
+
+También podemos utilizarlos para *apagar* línea(s) de código que no queremos ejecutar en ese momento.
+
+Hay dos formas de escribirlos:
+
+### Comentarios de una línea
+
+Si usamos dos diagonales seguidas `//`, todo lo que esté escrito después se convertirá en *comentario* y Processing no tratará de interpretarlo.
+
+Por ejemplo:
+
+```java
+// esta función crea nuestro canvas
+size( 400, 400 );
+
+point( 200, 200); // dibuja un punto en el centro
+
+// si la función está comentada, no se ejecuta:
+// line( 0, 0, 400, 400); 
+```
+
+Desde el editor de texto de Processing, podemos ir al menú Editar -> Comentar/Descomentar para agregar o quitar las diagonales.
+
+### Comentarios de múltiples líneas
+
+Para comentar varias líneas, podemos preceder a cada una con el par de diagonales, o podemos hacer lo siguiente: *abrir* el comentario con `/*`, y *cerrarlo* con `*/`.
+
+Por ejemplo:
+
+```java
+/*
+ este es un programa de ejemplo. 
+
+ y de esta manera puedo escribir
+ un comentario de varias líneas
+ sin preocuparme de las dos diagonales al inicio
+*/
+
+/* crea una ventana de 400x400 */
+size( 400, 400 );
+
+/* esta función no se ejecutará:
+point( 200, 200 );
+*/
+```
+
+---
+
+## Punto y coma
+
+En general, para indicar el final de las instrucciones que escribamos en Processing, hay que concluirlas con un `;`.
+
+La recomendación es escribir una instrucción por línea de texto, pero el uso del punto y coma permitiría escribir más de una.
+
+```java
+size( 400, 400 ) // sin punto y coma, esta expresión marcará un error
+
+// podríamos llamar más de una función por línea:
+point( 200, 200 ); line( 0, 0, 100, 100);
+
+// pero por claridad, conviene separarlas:
+point( 200, 200 ); 
+line( 0, 0, 100, 100);
+```
+
+### Excepciones
+
+No requieren punto y coma las expresiones que implican un bloque de código delimitado por llaves (`{` y `}`).
+
+Estas son:
+
+* Declaración de funciones
+* Expresiones condicionales
+* Ciclos
+
+```java
+void setup(){ // declaración de función, sin punto y coma
+    size( 400, 400 );
+} // sin punto y coma
+
+void draw(){
+    if( mouseX > width/2 ){ // Expresión condicional, sin punto y coma
+        int i = 0;
+        while( i < 20 ){ // Ciclo, sin punto y coma
+	    line( 0, 0, i*20, 400);
+	    i = i + 2;	
+        } // cierra while, sin punto y coma
+    } // cierra if, sin punto y coma
+} // cierra función draw(), sin punto y coma
+```
+
+(no te preocupes si todo esto parece muy extraño, ya lo revisaremos :)
+
+## Funciones
+
+Las *funciones* que llamamos tienen un *nombre*, y normalmente necesitan uno o más *argumentos* con los cuales operar.
+
+Un par de paréntesis después del nombre, indican a Processing que nos referimos a una función.
+
+Los *argumentos* van dentro de los paréntesis, separados por comas.
+
+Algunos ejemplos:
+
+```java
+// función sin argumentos, pero que necesita paréntesis:
+exit();
+
+// función con dos argumentos:
+size( 400, 400 );
+
+// función con cuatro argumentos:
+line( 0, 0, 200, 200);
+```
diff --git a/src/notas/transformaciones.md b/src/notas/transformaciones.md
new file mode 100644
index 0000000..9c20fda
--- /dev/null
+++ b/src/notas/transformaciones.md
@@ -0,0 +1,160 @@
+---
+title: "Transformaciones"
+---
+
+Las *transformaciones* nos permiten modificar la ubicación de nuestro origen de dibujo, la dimensiones de las medidas del canvas, y su rotación.
+
+Estas modificaciones se acumulan, y pueden ser temporales.
+
+# Funciones
+
+## translate(dx, dy);
+
+Traslada la posición del origen `dx` pixeles sobre el eje `x`, y `dy` pixeles sobre el eje `y`, *respecto a la posición anterior*.
+
+Los dos argumentos son de tipo `float`, por lo que pueden tener puntos decimales, y pueden ser positivos o negativos.
+
+```java
+// dibuja un cuadrado en el origen
+rect(0, 0, 100, 100);
+
+// traslada el origen 200 pixeles a la derecha
+translate( 200, 0);
+
+// dibuja un cuadrado con la misma función que antes
+rect(0, 0, 100, 100);
+
+// traslada el origen 200 pixeles hacia abajo de donde estaba
+translate(0, 200);
+
+// dibuja un cuadrado con la misma función que antes
+rect(0, 0, 100, 100);
+```
+
+*Nota que el tercer cuadrado queda debajo del segundo.*
+
+`translate(0, 200);` no significa "traslada el origen a las coordenadas originales `0, 200`", sino "traslada el origen 0 pixeles en `x`, y 200 pixeles hacia abajo en `y`, respecto a donde estaba antes"
+
+## scale( k );
+
+Multiplica las unidades de medida actuales por un factor `k` de tipo `float`.
+
+Si `k` es mayor a `1.0`, la escala crece, si `k` es menor a `1.0` y mayor a `0.0`, la escala decrece.
+
+Por ejemplo, escala al doble:
+
+```java
+scale( 2 ); // escala al doble
+rect(0, 0, 100, 50); // este rectángulo medirá 200x100 en el marco de referencia original
+```
+
+O escala a la mitad:
+
+```java
+scale( 0.5 ); // escala a la mitad
+rect(0, 0, 100, 50); // este rectángulo medirá 50x25 en el marco de referencia original
+```
+
+## rotate( a );
+
+Rota el lienzo una cantidad de `a` radianes respecto a su posición actual, *tomando como centro de rotación al origen*.
+
+Una vuelta completa son 2π radianes, que en Processing podemos escribir `TWO_PI`. También tenemos disponible la palabra clave `PI` para referirnos a media vuelta (π).
+
+```java
+// rota PI/2 radianes (un cuarto de vuelta)
+rotate( PI/2 );
+```
+
+Podemos rotar en grados usando la función `radians( grados )`, que convierte una cantidad de grados a su valor en radianes.
+
+```java
+// rota 90° (un cuarto de vuelta)
+rotate( radians( 90 ) );
+```
+
+Ángulos positivos rotan con las manecillas de reloj (*clockwise*) y ángulos negativos rotan en contra (*counter clockwise*).
+
+## Guarda y recupera matriz de transformaciones: pushMatrix(), popMatrix()
+
+En ocasiones necesitaremos regresar al estado del canvas (técnicamente, al estado de su *matriz de transformaciones*) previo a ciertas transformaciones.
+
+Una opción es revertir las transformaciones manualmente, pero puede ser confuso y con mucha posibilidad de error.
+
+La opción recomendada es *guardar* (`pushMatrix()`) la matriz antes de aplicar transformaciones, y *recuperarla* (`popMatrix()`) cuando terminemos y queramos regresar a un estado previo.
+
+```java
+// guardamos matriz original
+pushMatrix();
+
+// aplicamos algunas transformaciones
+translate( 200, 200);
+rotate( PI/3 );
+// todo lo que dibujemos aquí va a estar transformado
+rect(0,0, 100, 100);
+
+// recuperamos matriz guardada
+popMatrix();
+
+// todo lo que dibujemos a continuación estará "normal":
+rect(0, 0, 100, 100);
+```
+
+*push* y *pop* se refieren a operaciones de una "pila" (*stack*), como si fuera una pila de libros. 
+
+*push* es poner un libro hasta arriba, y *pop* es quitar el libro de hasta arriba.
+
+Es posible utilizar múltiples `pushMatrix()` para guardar distintos estados de la matriz; solo hay que tener presente que tiene que haber un número correspondiente de `popMatrix()`.
+
+# Ejemplos
+
+## Rotar alrededor de cierto punto en específico
+
+El siguiente código dibuja un rectángulo con esquina superior izquierda en 100,100, un ancho de 200 y una altura de 100 pixeles:
+
+```java
+rect( 100, 100, 200, 100);
+```
+
+![](/img/rectangulo-blanco.png)
+
+Podemos calcular que su centro está en las coordenadas 200, 150. En términos de variables `x`, `y`, `ancho` y `altura` las coordenadas del centro las calculamos de la siguiente forma:
+
+```java
+cx = x + ancho/2; // 300 = 100 + 200/2 
+cy = y + altura/2; // 150 = 100 + 100/2
+```
+
+Para rotar al rectángulo usando ese centro como ubicación del eje de rotación, usamos la siguiente secuencia de transformaciones:
+
+```java
+// guarda el origen
+pushMatrix();
+
+// traslada al punto/eje de rotación
+translate( 200, 150);
+
+// rota 45 grados clockwise
+rotate( radians(45) );
+
+// translada "de regreso":
+translate( -200, -150);
+
+// dibuja el rectángulo
+rect( 100, 100, 200, 100);
+
+// recupera el origen
+popMatrix();
+```
+
+![](/img/rectangulo-blanco-rotado.png)
+
+# Consideraciones
+
+**El orden de las transformaciones importa**.
+
+Será distinto escalar y luego trasladar, que trasladar y luego escalar.
+
+Será distinto trasladar y luego rotar, que rotar y luego trasladar.
+
+¡Haz las pruebas e identifica las diferencias! :)
diff --git a/src/notas/trig.md b/src/notas/trig.md
new file mode 100644
index 0000000..bd77e22
--- /dev/null
+++ b/src/notas/trig.md
@@ -0,0 +1,143 @@
+---
+title: "Funciones trigonométricas"
+---
+
+Las funciones trigonométricas definen relaciones entre los lados y ángulos de un triángulo rectángulo.
+
+![](/img/xyar.png)
+
+```java
+sin( a ) <-> y/r
+cos( a ) <-> x/r
+tan( a ) <-> y/x
+```
+
+[[Ángulos en radianes]](/notas/angulos.html)
+
+## Seno y coseno
+
+Estas dos funciones son periódicas y tienen un rango de resultados entre -1 y 1.
+
+Suelen usarse para generar comportamientos oscilatorios y para trabajar con *coordenadas polares*.
+
+[[Coordenadas polares]](/notas/coordenadas-polares.html)
+
+Las dos funciones tienen la misma forma pero están desfasadas por `HALF_PI`.
+
+### En función del espacio
+
+Estos ejemplos utilizan ciclos `for` para dibujar un conjunto de puntos.
+
+[[Ciclos while y for]](/notas/ciclos.html)
+
+El siguiente programa dibuja a la función `sin( )` con un periodo correspondiente al canvas completo:
+
+```java
+size(400, 400);
+background(0);
+stroke(255);
+strokeWeight(2);
+
+for(float x=0; x<=width; x++){
+ float y = 100*sin( TWO_PI*x/width ) + 200;
+ point(x,y);  
+}
+```
+
+![](/img/sin.png)
+
+Algunas observaciones y definiciones:
+
+* La **amplitud** de la onda es 100, esto implica que oscilará entre -100 y 100
+* `x/width` *normaliza* a `x`, haciendo que resulte en un número entre 0 y 1
+* `TWO_PI` hace que se obtenga un ciclo completo (**frecuencia** de 1)
+* `+ 200` hace que la onda tenga su centro en 200 en vez de en 0.
+
+Podemos obtener el mismo dibujo utilizando la función `map( )`:
+
+```java
+// dibuja 1 ciclo de la función seno
+size(400, 400);
+background(0);
+stroke(255);
+strokeWeight(2);
+
+for(float x=0; x<=width; x++){
+ // convierte a x 
+ // que tiene un rango original de 0 a width
+ // a un rango entre 0 y TWO_PI
+ float t = map(x, 0, width, 0, TWO_PI);
+
+ // convierte al resultado de sin(t)
+ // que tiene un rango original entre -1 y 1
+ // a un rango entre 100 y 300
+ float y = map( sin(t), -1, 1,  100, 300);
+ point(x,y);  
+}
+```
+
+[[Mapeo/conversión de valores]](/notas/map.html)
+
+En el siguiente ejemplo, lo único que cambia es la *frecuencia*, de `TWO_PI` a `4*TWO_PI`. Nota cómo ahora hay cuatro ciclos:
+
+```java
+// dibuja 4 ciclos de la función seno
+size(400, 400);
+background(0);
+stroke(255);
+strokeWeight(2);
+
+for(float x=0; x<=width; x++){
+ // convierte a x 
+ // que tiene un rango original de 0 a width
+ // a un rango entre 0 y 4*TWO_PI
+ float t = map(x, 0, width, 0, 4*TWO_PI);
+
+ // convierte al resultado de sin(t)
+ // que tiene un rango original entre -1 y 1
+ // a un rango entre 100 y 300
+ float y = map( sin(t), -1, 1,  100, 300);
+ point(x,y);  
+}
+```
+
+![](/img/sin4.png)
+
+### En función del tiempo 
+
+Estos ejemplos utilizan el ciclo de animación para funcionar.
+
+[[Ciclo de animación]](/notas/draw.html)
+
+En este ejemplo el brillo del fondo es modulado por una función senoidal.
+
+```java
+void setup(){
+ size(400, 400); 
+}
+
+void draw(){
+ // convierte frameCount
+ // de un rango original de 0 a 300 frames
+ // a un rango de 0 a TWO_PI
+ // (hace que un ciclo completo suceda en 300 frames)
+ float t = map(frameCount, 0, 300, 0, TWO_PI);
+ 
+ // convierte el resultado de sin(t)
+ // de un rango de -1 a 1
+ // a uno de 0 a 255
+ float brillo = map( sin(t), -1, 1, 0, 255);
+ // asigna el resultado al color de fondo
+ background(brillo);
+}
+``` 
+
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Mapeo/conversión de valores]](/notas/map.html)
+
+*Nota: si bien frameCount sigue incrementándose más allá de 300, la función `map()` se encarga de seguirlo convirtiendo con la misma relación de 300 frames a `TWO_PI`*
+
+
+# Notas que enlazan aquí
+
+* [[Coordenadas polares]](/notas/coordenadas-polares.html)
diff --git a/src/notas/variables-modos.md b/src/notas/variables-modos.md
new file mode 100644
index 0000000..357333f
--- /dev/null
+++ b/src/notas/variables-modos.md
@@ -0,0 +1,168 @@
+---
+title: "Variables: Contadores, Acumuladores, Banderas"
+---
+
+Podemos utilizar las variables para comportamientos complejos como los descritos a continuación.
+
+# Contadores
+
+Los "contadores" son variables que utilizamos para *contar*: ¿qué es "contar"? 
+
+*Sumarle uno a la cantidad que teníamos antes, y almacenar esa nueva cantidad.*
+
+Como en general contamos entidades enteras, conviene usar variables de tipo `int`.
+
+Para usar una variable como contador, el primer paso es declararla y asignarle un valor inicial (normalmente 0) :
+
+```java
+int contador = 0;
+```
+
+El otro paso es la expresión que "cuenta" cuando sucede lo que deseamos contar:
+
+```java
+// suma 1 a la cantidad que tenías antes, y reemplázala
+contador = contador + 1;
+```
+
+Esta expresión que "cuenta" también puede escribirse de estas dos formas que son un poco más compactas:
+
+```java
+contador += 1; // súmale 1 al valor del contador
+```
+
+o
+
+```java
+contador++; // incrementa en 1 el valor del contador
+```
+
+# Acumuladores
+
+Los acumuladores se comportan de manera similar a los contadores, pero en lugar de sumar un "1" entero, pueden sumar o restar otras cantidades.
+
+Solemos usar este tipo de variables para representar posiciones, tamaños, colores, por lo que podemos utilizar puntos decimales (variables de tipo `float`).
+
+Al igual que los contadores, los declaramos e inicializamos:
+
+```java
+float posicion = 100;
+```
+
+Y después les podemos incrementar o decrementar de cualquiera de estas formas:
+
+```java
+// opciones de incremento:
+posicion = posicion + 0.5;
+posicion += 0.5;
+
+// opciones de decremento:
+posicion = posicion - 0.5;
+posicion -= 0.5;
+```
+
+# Banderas (*flags*)
+
+Las variables "bandera" nos sirven para indicar y almacenar que algún evento o condición se cumplió.
+
+Aquí solemos usar variables de tipo `boolean`.
+
+## Activación
+
+Por ejemplo, si queremos que inicialmente nuestro sketch esté estático, y al dar click empiece a moverse, podemos usar una bandera que inicialmente esté *desactivada* (en `false`) y que se *active* (en `true`) cuando demos click. La bandera se quedará así hasta que sea desactivada.
+
+```java
+// inicializa la bandera desactivaa
+boolean enMovimiento = false;
+
+float posicion = 0;
+
+void setup(){
+   size(500, 500);
+}
+
+void draw(){
+    // activa la bandera cuando el mouse se presione
+    if( mousePressed ){
+        enMovimiento = true;
+    }
+
+    // consulta el estado de la bandera,
+    // e incrementa la posición si está activada
+    if( enMovimiento ){
+        posicion = posicion + 0.5;
+    }
+
+    // dibuja un rectángulo
+    rect( posicion, height/2, 100, 100 );
+}
+```
+
+## Alternación (*toggle*)
+
+Este ejemplo es similar al anterior, pero con cada click el estado de la bandera se invierte.
+
+El ejemplo hace uso del operador `!` (NOT) para "invertir" el valor de la variable.
+
+[[Variables y expresiones booleanas]](/notas/boolean.html)
+
+También usa la función del evento de `mousePressed()` para que la inversión solo suceda una vez por click.
+
+```java
+// inicializa la bandera desactivaa
+boolean enMovimiento = false;
+
+float posicion = 0;
+
+void setup(){
+   size(500, 500);
+}
+
+void draw(){
+    // consulta el estado de la bandera,
+    // e incrementa la posición si está activada
+    if( enMovimiento ){
+        posicion = posicion + 0.5;
+    }
+
+    // dibuja un rectángulo
+    rect( posicion, height/2, 100, 100 );
+}
+
+void mousePressed(){
+    // "togglea" la bandera cuando el mouse se presione
+    if( mousePressed ){
+        // asigna a enMovimiento el valor opuesto al que tenía
+        enMovimiento = !enMovimiento;
+    }
+}
+```
+
+# Banderas numéricas
+
+También podemos usar variables numéricas (normalmente de tipo `int`) para indicar y almacenar dos o más posibles opciones a las que como personas programadores asignaremos números.
+
+Por ejemplo, podemos tener una variable llamada `direccion`, y definir que si su valor es 1 indica que hay que moverse hacia abajo, y si es 0 hacia arriba:
+
+```java
+if( direccion == 1 ){ // abajo
+    y += 0.5;
+}
+else if( direccion == 0){ // arriba
+    y -= 0.5;
+}
+```
+
+Otro ejemplo, podemos tener una variable llamada `estado` que va a definir el color de un círculo (por ejemplo un semáforo).
+
+```java
+if ( estado == 1 ){
+    fill( 0, 255, 0 ); // color verde
+}
+else if ( estado == 2 ){
+    fill( 255, 255, 0 ); // color amarillo
+}
+else if ( estado == 3 ){
+    fill( 255, 0, 0 );
+}
+```
diff --git a/src/notas/variables.md b/src/notas/variables.md
new file mode 100644
index 0000000..053ee46
--- /dev/null
+++ b/src/notas/variables.md
@@ -0,0 +1,80 @@
+---
+title: "Variables: Fundamentos"
+---
+
+Las *variables* nos permiten almacenar valores que pueden leerse y modificarse durante la ejecución del programa.
+
+# Declaración
+
+En Processing siempre hay que declarar una variable antes de usarla, estableciendo el tipo de dato que tendrá.
+
+Los tipos de datos más comunes que usaremos son:
+
+* `int`: números enteros (sin punto decimal), útiles para *contar*
+* `float`: números con o sin punto decimal, útiles para dimensiones
+* `boolean`: valores `true` o `false`
+* `String`: cadenas de texto
+* `color`: conjunto de valores de color
+
+Podemos declarar una variable sin asignarle valor:
+
+```java
+float posicion;
+//...
+posicion = 10;
+```
+
+o asignarle un valor desde que la declaramos:
+
+```java
+float posicion = 10;
+```
+
+Después de declarar una variable no es necesario hacerlo de nuevo (de hecho, si lo intentamos encontraremos un error).
+
+Aquí hay otros ejemplos de declaraciones, asignaciones, y uso:
+
+```java
+// declaración y asignación de variables
+int cantidad = 10;
+float ancho = 50.0;
+boolean dibujaBordes = true;
+String mensaje = "Texto de ejemplo";
+color rojo = color(255, 0, 0);
+
+// ahora utilizamos algunas variables:
+// establece el color de relleno
+fill( rojo );
+// dibuja con la variable 'ancho'
+rect( 100, 100, ancho, ancho );
+// modificamos la variable 'ancho'
+ancho = ancho / 2;
+// dibujamos con el nuevo valor:
+rect( 100, 100, ancho, ancho );
+```
+
+Notas relacionadas:
+
+* [[Operadores aritméticos]](/notas/aritmetica.html)
+* [[Color]](/notas/color.html)
+
+
+# Variables especiales
+
+Processing como sistema incluye y maneja algunas variables especiales, que normalmente podemos usar para consultar qué valores tienen.
+
+En el editor de texto de Processing, estas variables se colorean de rosa.
+
+Algunas de estas variables son:
+
+* `width` y `height`: dimensiones del canvas en pixeles (tipo `int`)
+* `mouseX` y `mouseY`: coordenadas del puntero del *mouse* en el canvas (tipo `int`)
+* `mousePressed`: variable booleana que indica si el *mouse* está presionado (tipo `boolean`)
+* `keyPressed`: variable booleana que indica si alguna tecla está presionada (tipo `boolean`)
+
+[[Interactividad con mouse y teclado]](/notas/interactividad.html)
+
+# Más sobre variables
+
+* [[Variables y expresiones booleanas]](/notas/boolean.html)
+* [[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
diff --git a/src/notas/video.md b/src/notas/video.md
new file mode 100644
index 0000000..54523c4
--- /dev/null
+++ b/src/notas/video.md
@@ -0,0 +1,385 @@
+---
+title: "Video: Estructuras básicas"
+---
+
+Utilizando la biblioteca (*library*) de Video, Processing nos permite manipular video pregrabado con `Movie` y/o obtenido en vivo desde cámara web con `Capture`.
+
+La biblioteca maneja toda la lógica para abrir y reproducir videos en el caso de `Movie`, y para manejar a la cámara web en el caso de `Capture`.
+
+Además, cada *frame* de video nos la entrega como una imagen (`PImage`) con la cual podemos hacer cualquier manipulación como cuando trabajamos con imágenes estáticas:
+
+* [[Imágenes: Abrir, mostrar, leer]](/notas/imagenes-read.html)
+* [[Imágenes: Colores, filtros]](/notas/imagenes-colores.html)
+* [[Imágenes: Capas y máscaras]](/notas/imagenes-capas.html)
+
+# Preparación
+
+## Instalación de la biblioteca
+
+Para instalar la biblioteca de Video, ve al menú *Sketch -> Importar biblioteca... -> Añadir biblioteca*. En la ventana que se abre, busca Video y selecciona la opción que dice *Video | GStreamer-based video library for Processing* y tiene como autora a *The Processing Foundation*.
+
+Haz click en esa opción, y presiona el botón *Install* para que la biblioteca se descargue e instale.
+
+Este proceso solo hay que realizarlo una vez.
+
+## Importar biblioteca
+
+Para utilizar la biblioteca en nuestro sketch, podemos ir al menú *Sketch -> Importar biblioteca... -> Video*; esto agregará la siguiente línea de código:
+
+```java
+import processing.video.*;
+```
+
+Si lo prefieres puedes escribir esa línea de código directamente, en lugar de usar los menús.
+
+## Uso de videos
+
+Para poder utilizar videos pregrabados con `Movie`, es necesario tener **nuestro sketch de código guardado**.
+
+En la carpeta donde se encuentra el archivo *.pde* de nuestro sketch hay que crear una carpeta llamada *data*, y ahí es donde hemos de colocar los videos que queremos utilizar.
+
+Por ejemplo, si guardamos nuestro sketch dentro de la carpeta *sketchbook* con el nombre *estudioVideos*, hay que colocar nuestros videos en la carpeta *sketchbook/estudioVideos/data*.
+
+### Consideraciones
+
+Toma en cuenta que para fines de *sketching*, y dependiendo de tu equipo computacional, puede convenir trabajar provisionalmente con archivos de video de baja resolución y/o calidad. Esto permitirá que tu sketch cargue más rápido al ejecutarlo.
+
+También, podría suceder que si tu programa realiza operaciones muy intensivas computacionalmente en cada frame, el *frame rate* podría reducirse, en especial manipulando video en vivo.
+
+Si la prioridad es la ejecución en vivo puedes bajar la resolución y/o calidad, y si la prioridad es el resultado del procesamiento entonces puedes guardar cada *frame* con `saveFrame("frames/frame-####.png");` y después ensamblarlas en un video.
+
+## Uso de cámara web
+
+El uso de cámara web con `Capture` funciona sin problema en GNU/Linux y Windows.
+
+Para versiones recientes de Mac OS X, al parecer hay que realizar el siguiente procedimiento:
+
+[Video Library 2.0 - MacOS Mojave / Catalina Issues](http://wiki.iad.zhdk.ch/CV/904626177/Video+Library+2.0#VideoLibrary2.0-MacOSMojave/CatalinaIssues)
+
+(por confirmar)
+
+
+# Movie: Videos pregrabados
+
+La clase `Movie` maneja videos pregrabados. Con ella podemos cargar videos, iniciar o detener su avance, obtener datos temporales, etc. 
+
+## Estructura básica
+
+Este sketch muestra la estructura básica para utilizarla:
+
+```java
+// estructura básica para cargar y reproducir video
+
+// agrega 'library' de Video
+import processing.video.*;
+
+// variable de clase Movie
+Movie video;
+
+void setup(){
+  size(640, 360);
+  // crea objeto de clase Movie, cargando video
+  video = new Movie(this, "epilogue.mp4");
+  
+  // reproduce video una vez
+  video.play();
+  // reproduce video en loop:
+  // video.loop();
+}
+
+void draw(){
+ // revisa si hay una nueva frame de video:
+ if( video.available() ){
+  // lee la frame hacia video
+  video.read(); 
+  // realiza aquí dentro operaciones como redimensiones, recortes y máscaras
+ }
+ 
+ // dibuja la frame de video:
+ image(video, 0, 0);
+}
+```
+
+Nota las similitudes y diferencias con el uso de `PImage`.
+
+La principal diferencia aquí es el condicional con el método `.available()`, que carga en nuestro programa cada *frame* de video únicamente cuando está listo. Esto se debe a que el *frameRate* de reproducción de video y el *frameRate* de ejecución del sketch puede variar o desfasarse un poco.
+
+## Evento `movieEvent( )`
+
+En lugar del condicional podemos usar la función `movieEvent( )` que se llama cada vez que hay alguna actualización en la lectura del video.
+
+El sketch anterior quedaría de la siguiente forma:
+
+```java
+// estructura básica para cargar video con movieEvent()
+
+// agrega 'library' de Video
+import processing.video.*;
+
+// variable de clase Movie
+Movie video;
+
+void setup(){
+  size(640, 360);
+  // crea objeto de clase Movie, cargando video
+  video = new Movie(this, "epilogue.mp4");
+  
+  // reproduce video una vez
+  video.play();
+  // reproduce video en loop:
+  // video.loop();
+}
+
+void draw(){
+ // dibuja la frame de video:
+ image(video, 0, 0);
+}
+
+void movieEvent(Movie v){
+ // lee la frame de video
+ v.read(); 
+ // realiza aquí dentro operaciones como redimensiones, recortes y máscaras
+}
+```
+
+## Métodos
+
+La clase `Movie` tiene más métodos para controlar la reproducción del video:
+
+* `.play()`
+* `.pause()`
+* `.stop()`
+* `.loop()` y `.noLoop()`
+* `.jump( t )`: para saltar a cierto momento `t` en el video (en segundos)
+* `.speed( s )`: cambia la velocidad relativa de reproducción: 1.0 es normal, 2.0 es el doble de rápido, 0.5 es la mitad, etc.
+* `.frameRate( f )`: cambia el *frameRate* de reproducción del video
+* `.time()`: indica en qué ubicación temporal del video se encuentra la reproducción
+* `.duration()`: regresa la duración del video en segundos
+
+Encuentra más detalles sobre ellos en la referencia de la biblioteca:
+
+[Video \ Libraries \ Processing.org](https://processing.org/reference/libraries/video/index.html)
+
+## Ejemplos
+
+### Recortes
+
+Este ejemplo recorta e intercambia de lugar las mitades horizontales del video cargado.
+
+Nota cómo los recortes se realizan justo después de que se lee cada *frame* del video (`.read()`), y en el ciclo `draw()` únicamente se dibujan.
+
+```java
+// este ejemplo recorta e intercambia las mitades horizontales del video
+
+// agrega 'library' de Video
+import processing.video.*;
+
+// variable de clase Movie
+Movie video;
+
+// variables para los recortes
+PImage mitad1, mitad2;
+
+void setup(){
+  size(640, 360);
+  // crea objeto de clase Movie, cargando video
+  video = new Movie(this, "epilogue.mp4");
+  
+  // crea los objetos de clase PImage para recortes
+  mitad1 = createImage(width/2, height, RGB);
+  mitad2 = createImage(width/2, height, RGB);
+  
+  // reproduce video en loop:
+  video.loop();
+}
+
+void draw(){
+ // dibuja las mitades en posiciones intercambiadas
+ // mitad izquierda dibujada a la derecha:
+ image(mitad1, width/2, 0);
+ // mitad derecha dibujada a la izquierda
+ image(mitad2, 0, 0);
+}
+
+void movieEvent(Movie v){
+ // lee la frame de video
+ v.read(); 
+ // redimensiona frame al tamaño del canvas
+ v.resize(width, height);
+ // obtén la mitad izquierda 
+ mitad1 = v.get(0, 0, v.width/2, v.height);
+ // obtén la mitad derecha
+ mitad2 = v.get(width/2, 0, v.width/2, v.height);
+}
+```
+
+# Capture: Cámara(s) web
+
+La clase `Capture` maneja cámaras web. Con ella podemos escoger entre cámaras, asignar alguna resolución, encenderla o apagarla. 
+
+## Estructura básica
+
+Este sketch muestra la estructura básica para utilizarla. Es muy parecida al uso de `Movie`, con la diferencia de que en lugar de cargar un video, hay que escoger una cámara y asignarle una resolución.
+
+```java
+// estructura básica para usar una cámara web
+
+// importa 'library' de Video
+import processing.video.*;
+
+// variable de clase Capture
+// para la cámara web
+Capture cam;
+
+void setup(){
+ size(640, 480);
+ 
+ // obtén lista de cámaras conectadas
+ String[] camaras = Capture.list();
+ // muestra la lista en la consola
+ printArray( camaras );
+ 
+ // crea objeto de clase Capture
+ // utilizando la primera cámara
+ // con resolución de 640x480
+ cam = new Capture(this, 640, 480, camaras[0]);
+ // enciende la cámara
+ cam.start();
+}
+
+void draw(){
+ // revisa si hay una nueva frame de video
+ if ( cam.available() ){
+   // lee la nueva frame de la cámara
+   cam.read(); 
+   // realiza aquí operaciones como redimensiones, recortes y máscaras
+ }
+ // dibuja la frame de la cámara
+ image(cam, 0, 0); 
+}
+```
+
+### Espejo
+
+Nota que el video no está "espejado"; se muestra literalmente lo que ve la cámara.
+
+Para dibujar en espejo podemos utilizar estas líneas de código con transformaciones:
+
+```java
+ scale(-1, 1); // invierte el eje X
+ translate(-width, 0); // mueve esq. sup. izq. a la "derecha"
+ image(cam, 0, 0);
+```
+
+Lo que sucede aquí es que primero el eje X se invierte. Luego se traslada el origen `width` pixeles a "la izquierda" (porque es negativo), pero como el eje X está invertido esto se traduce en trasladar el origen `width` pixeles a "la derecha" del canvas. 
+
+De esta forma, lo que era la esquina superior izquierda de la imagen ahora queda en la esquina superior derecha del canvas, todo en espejo.
+
+[[Transformaciones]](/notas/transformaciones.html)
+
+## Evento `captureEvent( )`
+
+Al igual que con `movieEvent( )` (ver arriba), aquí un equivalente que se llama con cada nueva frame de la cámara web. 
+
+La estructura básica quedaría así:
+
+```java
+// estructura básica para usar una cámara web con captureEvent
+
+// importa 'library' de Video
+import processing.video.*;
+
+// variable de clase Capture
+// para la cámara web
+Capture cam;
+
+void setup(){
+ size(640, 480);
+ 
+ // obtén lista de cámaras conectadas
+ String[] camaras = Capture.list();
+ // muestra la lista en la consola
+ printArray( camaras );
+ 
+ // crea objeto de clase Capture
+ // utilizando la primera cámara
+ // con resolución de 640x480
+ cam = new Capture(this, 640, 480, camaras[0]);
+ // enciende la cámara
+ cam.start();
+}
+
+void draw(){
+ // dibuja la frame de la cámara
+ image(cam, 0, 0); 
+}
+
+void captureEvent( Capture c ){
+ // lee la nueva frame de la cámara
+ c.read(); 
+ // realiza aquí operaciones como redimensiones, recortes y máscaras
+}
+```
+
+## Ejemplos
+
+### Recortes
+
+Similar al ejemplo de arriba con `Movie`, este programa recorta e intercambia de lugar las mitades horizontales del video proveniente de la cámara web.
+
+```java
+// este ejemplo recorta e intercambia las mitades horizontales del video de la cámara
+
+// agrega 'library' de Video
+import processing.video.*;
+
+// variable de clase Capture
+// para la cámara web
+Capture cam;
+
+// variables para los recortes
+PImage mitad1, mitad2;
+
+void setup(){
+  size(640, 480);
+  
+  // crea los objetos de clase PImage para recortes
+  mitad1 = createImage(width/2, height, RGB);
+  mitad2 = createImage(width/2, height, RGB);
+
+  // obtén lista de cámaras conectadas
+  String[] camaras = Capture.list();
+  // muestra la lista en la consola
+  printArray( camaras );
+ 
+  // crea objeto de clase Capture
+  // utilizando la primera cámara
+  // con resolución de 640x480
+  cam = new Capture(this, 640, 480, camaras[0]);
+  // enciende la cámara
+  cam.start();
+}
+
+void draw(){
+ // "espejea" video
+ scale(-1, 1); // invierte el eje X
+ translate(-width, 0); // mueve esq. sup. izq. a la "derecha"
+
+ // dibuja las mitades en posiciones intercambiadas
+ // mitad izquierda dibujada a la derecha:
+ image(mitad1, width/2, 0);
+ // mitad derecha dibujada a la izquierda
+ image(mitad2, 0, 0);
+}
+
+void captureEvent(Capture c){
+ // lee la frame de video de la cámara
+ c.read(); 
+ // redimensiona frame al tamaño del canvas
+ //c.resize(width, height);
+ // obtén la mitad izquierda 
+ mitad1 = c.get(0, 0, c.width/2, c.height);
+ // obtén la mitad derecha
+ mitad2 = c.get(width/2, 0, c.width/2, c.height);
+}
+```
diff --git a/src/notas/visualizacion-contadores.md b/src/notas/visualizacion-contadores.md
new file mode 100644
index 0000000..f1c7b54
--- /dev/null
+++ b/src/notas/visualizacion-contadores.md
@@ -0,0 +1,168 @@
+---
+title: "Visualización de contadores"
+---
+
+En ocasiones buscamos mostrar de manera visual el resultado de un conteo, como el número de veces que sucedió algún evento.
+
+# Contadores
+
+Un *contador* es una variable de tipo entero (`int`) que incrementamos en uno.
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
+
+## Declaración e inicialización
+
+Necesitamos declarar y dar un valor inicial al contador antes de utilizarlo.
+
+```java
+int cuenta = 0;
+```
+
+## Cuenta
+
+Podemos utilizar cualquiera de las siguientes notaciones para indicar un incremento en uno a la variable.
+
+La que decidamos usar ha de ir dentro del bloque de código correspondiente al evento que queremos contar:
+
+```java
+// todas estas son equivalentes:
+cuenta = cuenta + 1;
+cuenta += 1;
+cuenta++;
+```
+
+## Reinicia
+
+Si en algún momento deseamos reiniciar la cuenta, basta con asignarle el valor de cero como parte del bloque de código correspondiente a ese reinicio:
+
+```java
+cuenta = 0;
+```
+
+## Ejemplo
+
+El siguiente código es una animación de un cuadrado que desciende y al llegar hasta abajo reinicia su posición; es un ejemplo de animación básica con acumuladores y expresiones condicionales.
+
+[[Animación básica con acumuladores]](/notas/animacion-basica.html)
+
+Nota el uso de una variable que funciona como *contador*, incrementándose cada vez que el cuadrado llega hasta abajo
+
+```java
+int cuenta; // 1) declaración del contador
+float y;
+void setup(){
+ size(400, 400);
+ y = -50;
+
+ cuenta = 0; // 2) inicialización del contador
+}
+
+void draw(){
+  background(0);
+ // cuadrado dibujado respecto a "y":
+ rect(150, y, 50, 50);
+ 
+ // incremento de "y":
+ y = y + 2;
+
+ // reinicia "y" cuando sea mayor o igual a height
+ if( y >= height){
+  y = -50; 
+
+  cuenta++; // 3) incremento del contador
+ }
+}
+```
+
+# Cambio de dimensiones
+
+Una forma común de visualizar un contador es con alguna figura básica que cambia sus dimensiones de manera proporcional al valor de la variable.
+
+El siguiente ejemplo es un rectángulo en 0,0 que crecerá 10 pixeles a la derecha con cada incremento del contador, y que tiene 20 pixeles de altura:
+
+```java
+// rectángulo con ancho en función de 'cuenta'
+rect( 0, 0,   cuenta*10, 20);
+```
+
+Alternativamente, podemos utilizar la función `map( )` para definir el rango de nuestro contador y las dimensiones correspondientes.
+
+El siguiente ejemplo es un rectángulo que decrece con cada incremento del contador:
+
+```java
+// calcula el ancho en función de 'cuenta'
+// rango del contador: 0 a 10
+// rango del ancho: 200 a 0
+float ancho = map( cuenta, 0, 10,   200, 0);
+
+rect(0, 0, ancho, 20);
+```
+
+[[Mapeo/conversión de valores]](/notas/map.html)
+
+# Indicadores con condicionales
+
+Podemos utilizar condicionales para modificar un dibujo de acuerdo al valor del contador.
+
+[[Expresiones condicionales]](/notas/condicionales.html)
+
+## Acumulación de indicadores
+
+El siguiente ejemplo dibuja de 1 a 5 puntos horizontales de manera condicional de acuerdo a la cuenta:
+
+```java
+strokeWeight(5);
+
+if( cuenta >= 1 ){ // si la cuenta es mayor o igual a 1...
+  point(10, 10); // dibuja primer punto
+}
+if( cuenta >= 2){
+  point(20, 10); // dibuja segundo punto
+}
+if( cuenta >= 3){
+  point(30, 10); // dibuja tercer punto
+}
+if( cuenta >= 4){
+  point(40, 10); // dibuja cuarto punto
+}
+if( cuenta >= 5){
+  point(50, 10); // dibuja quinto punto
+}
+```
+
+Nota que cada expresión condicional funciona por separado (no hay `else if`), pues queremos que sea posible que más de una sea verdadera a la vez.
+
+## Indicadores por número
+
+Alternativamente podemos definir un dibujo distinto por cada valor posible del contador.
+
+Este ejemplo muestra una combinación diferente de puntos según el número:
+
+```java
+strokeWeight(5);
+
+if( cuenta == 1){
+  point( 40, 40 ); // punto al centro
+}
+else if( cuenta == 2){
+  point( 20, 20 );
+  point( 60, 60 );
+}
+else if( cuenta == 3){
+  point( 20, 20 );
+  point( 40, 40 ); // punto al centro
+  point( 60, 60 );
+}
+// etc...
+```
+
+Nota que aquí usamos `else if` para dejar(nos) claro que en un momento *dado* solo puede ocurrir una de todas las opciones.
+
+# Texto
+
+Podemos literalmente escribir el valor del contador utilizando funciones de texto:
+
+```java
+textSize(50);
+text( cuenta, 20, 50); // escribe el valor de 'cuenta' en 20, 50
+```
diff --git a/src/notasP3D/cilindricos-y-conicos.md b/src/notasP3D/cilindricos-y-conicos.md
new file mode 100644
index 0000000..6343d78
--- /dev/null
+++ b/src/notasP3D/cilindricos-y-conicos.md
@@ -0,0 +1,354 @@
+---
+title: "P3D: Sólidos cilíndricos y cónicos"
+---
+
+# Coordenadas polares
+
+Las siguientes funciones se basan en la herramienta de las coordenadas polares, con las que en lugar de ubicar un punto de acuerdo a coordenadas `x`, `y`, `z` (distancia al origen paralela a cad eje), lo ubicamos de acuerdo a un radio (distancia al centro) y a un ángulo respecto a una referencia.
+
+[[Coordenadas polares]](/notas/coordenadas-polares.html)
+
+![](/img/xyar.png)
+
+Estas son las fórmulas para convertir coordenadas polares `r,a` con centro en `cx,cy`, a coordenadas rectangulares `x,y`.
+
+```java
+// calcula coordenadas rectangulares x,y a partir de:
+// r: radio
+// a: ángulo
+// cx,cy: centro / punto de referencia
+float x = r*cos(a) + cx;
+float y = r*sin(a) + cy;
+```
+
+# Ejemplos de mallas cónicas
+
+Las siguientes funciones aprovechan el modo de dibujo `TRIANGLE_FAN` y la conversión de coordenadas polares a rectangulares para dibujar distintas mallas cónicas.
+
+## Cono tradicional
+
+![](/img/conos-tradicionales.png)
+
+Esta función dibuja un cono de radio r, altura h, y una base con N lados.
+
+```java
+void cono(float r, float h, int N){
+// dibuja un cono tradicional
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+
+  // variables auxiliares:
+  float x,y,angulo;
+
+  beginShape(TRIANGLE_FAN);
+  vertex(0,0,h); // vértice de la punta
+
+  // ciclo para los vértices de la base
+  for(int i=0;i<=N;i=i+1){
+    angulo = i*TWO_PI/N;
+    x = r*cos(angulo);
+    y = r*sin(angulo);
+    vertex(x,y,0);
+  }
+  endShape();
+}
+```
+
+## Cono con base aleatoria
+
+![](/img/conos-aleatorios.png)
+
+Aquí se le suma o resta una cantidad aleatoria al radio que le corresponde a cada vértice.
+
+Los parámetros son el radio r, altura h, una base con N lados, y un rango de cuánto puede variar el radio.
+
+```java
+void cono(float r, float h, int N, float rango){
+// dibuja un cono con base pseudoaleatoria
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+// rango: cuánto puede variar el radio hacia arriba y hacia abajo
+
+  int seed = 100;
+  randomSeed(seed);
+  // variables auxiliares:
+  float x,y,angulo,radio;
+
+  beginShape(TRIANGLE_FAN);
+  vertex(0,0,h); // vértice de la punta
+
+  // ciclo para los vértices de la base
+  for(int i=0;i<=N;i=i+1){
+    angulo = i*TWO_PI/N;
+    radio = r + random(-rango, rango);
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    vertex(x,y,0);
+
+    if(i==N-1){ randomSeed(seed); }
+  }
+  endShape();
+}
+```
+
+## Cono con base periódica
+
+![](/img/conos-periodicos.png)
+
+En este ejemplo se utiliza una función senoidal para ir cambiando de manera continua y periódica la magnitud del radio.
+
+Los parámetros son el radio r, altura h, una base con N lados, un rango de cuánto puede variar el radio, y un número de ciclos/picos nciclos que existirán en la base.
+
+```java
+void cono(float r, float h, int N, float rango, int nciclos){
+// dibuja un cono con base periódica
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+// rango: cuánto puede variar el radio hacia arriba y hacia abajo
+// nciclos: cuántos ciclos/picos tiene la base
+
+  // variables auxiliares:
+  float x,y,angulo,radio;
+
+  beginShape(TRIANGLE_FAN);
+  vertex(0,0,h); // vértice de la punta
+
+  // ciclo para los vértices de la base
+  for(int i=0;i<=N;i=i+1){
+    angulo = i*TWO_PI/N;
+    radio = r + rango*sin( i*TWO_PI*nciclos/N );
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    vertex(x,y,0);
+  }
+  endShape();
+}
+```
+
+# Ejemplos de mallas cilíndricas
+
+
+En estos ejemplos se aprovecha el modo de dibujo QUAD_STRIP y la conversión de coordenadas polares a rectangulares para establecer mallas cilíndricas.
+
+## Cilindro tradicional
+
+![](/img/cilindros-tradicionales.png)
+
+Esta función recibe tres parámetros: r para el radio, h para la altura, y N para el número de lados en la base/tapa.
+
+```java
+void cilindro(float r, float h, int N){
+// dibuja un cilindro tradicional
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+
+  // variables auxiliares
+  float x,y,angulo;
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i=i+1){
+    angulo = i*TWO_PI/N;
+    x = r*cos(angulo);
+    y = r*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+    // vértice en la tapa
+    vertex(x,y,h);
+  }
+  endShape();
+}
+```
+
+## Cilindro con base/tapa aleatoria
+
+![](/img/cilindros-aleatorios.png)
+
+Esta función recibe cuatro parámetros: r para el radio, h para la altura, N para el número de lados en la base/tapa, y rango para cuánto puede variar el radio.
+
+```java
+void cilindro(float r, float h, int N, float rango){
+// dibuja un cilindro con base pseudoaleatoria
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+// rango: cuánto puede variar el radio hacia arriba y hacia abajo
+
+  // variables auxiliares
+  float x,y,angulo,radio;
+  int seed = 100;
+  randomSeed(seed);
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i=i+1){
+    angulo = i*TWO_PI/N;
+    radio = r + random(-rango, rango);
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+    // vértice en la tapa
+    vertex(x,y,h);
+
+    if(i==N-1){ randomSeed(seed); }
+  }
+  endShape();
+}
+```
+
+## Cilindro con base/tapa periódica
+
+![](/img/cilindros-periodicos.png)
+
+Esta función recibe cinco parámetros: r para el radio, h para la altura, N para el número de lados en la base/tapa, rango para cuánto puede variar el radio, y nciclos para indicar cuántos picos tendrá la base/tapa.
+
+```java
+void cilindro(float r, float h, int N, float rango, int nciclos){
+// dibuja un cilindro con base periódica
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+// rango: cuánto puede variar el radio hacia arriba y hacia abajo
+// nciclos: cuántos ciclos/picos tiene la base
+
+  // variables auxiliares
+  float x,y,angulo,radio;
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i=i+1){
+    angulo = i*TWO_PI/N;
+    radio = r + rango*sin( i*TWO_PI*nciclos/N );
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+    // vértice en la tapa
+    vertex(x,y,h);
+  }
+  endShape();
+}
+```
+
+## Cilindro con base/tapa periódica y desfasada
+
+![](/img/cilindros-periodicos-desfasados.png)
+
+Esta función recibe seis parámetros: r para el radio, h para la altura, N para el número de lados en la base/tapa, rango para cuánto puede variar el radio, nciclos para indicar cuántos picos tendrá la base/tapa, y fase para indicar el desfase entre la base y la tapa.
+
+```java
+void cilindro(float r, float h, int N, float rango, int nciclos, float fase){
+// dibuja un cilindro con base periódica
+// r: radio de la base
+// h: altura
+// N: número de divisiones en la base
+// rango: cuánto puede variar el radio hacia arriba y hacia abajo
+// nciclos: cuántos ciclos/picos tiene la base
+// fase: cuánto está desfasada (en radianes) la tapa de la base
+
+  // variables auxiliares
+  float x,y,angulo,radio;
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i=i+1){
+    angulo = i*TWO_PI/N;
+    radio = r + rango*sin( i*TWO_PI*nciclos/N );
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+
+    radio = r + rango*sin( i*TWO_PI*nciclos/N + fase);
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la tapa
+    vertex(x,y,h);
+  }
+  endShape();
+}
+```
+
+# Ejemplos de mallas cónico-cilíndricas
+
+Estas mallas son modificación de las cilíndricas, con la posibilidad de cambiar el radio y/o la forma de la base respecto a la tapa
+
+## Cono-cilindro 1
+
+![](/img/cilindrocono-simple.png)
+
+
+En esta malla se puede cambiar el radio de la base y de la tapa.
+
+Los parámetros que recibe con: r1 para el radio de la base, r2 para el radio de la tapa, h para la altura, y N para el número de lados en base y tapa.
+
+```java
+void cilindroCono(float r1, float r2, float h, int N){
+// dibuja un cilindro con base y tapa de diferente radio
+// r1: radio de la base
+// r2: radio de la tapa
+// h: altura
+// N: número de divisiones en la base/tapa
+
+  // variables auxiliares
+  float x,y,angulo;
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i++){
+    angulo = i*TWO_PI/N;
+    x = r1*cos(angulo);
+    y = r1*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+
+    x = r2*cos(angulo);
+    y = r2*sin(angulo);
+    // vértice en la tapa
+    vertex(x,y,h);
+  }
+  endShape();
+}
+```
+
+## Cono-cilindro 2
+
+![](/img/cilindrocono-complejo.png)
+
+En esta malla la tapa y la base son figuras periódicas, con diferente radio, rango de cambio de radio, y número de picos/ciclos.
+
+Los parámetros que recibe con: r1 para el radio de la base, r2 para el radio de la tapa, h para la altura, N para el número de lados en base y tapa, rango1 para indicar cuánto cambia el radio de la base, rango2 para indicar cuánto cambia el radio de la tapa, nciclos1 para indicar cuántos picos tiene la base, y nciclos2 para indicar cuántos picos tiene la tapa.
+
+```java
+void cilindroCono(float r1, float r2, float h, int N, float rango1, float rango2, int nciclos1, int nciclos2){
+// dibuja un cilindro con base y tapa de diferente radio y diferente rango
+// r1: radio de la base
+// r2: radio de la tapa
+// h: altura
+// N: número de divisiones en la base/tapa
+// rango1: cuánto puede variar el radio de la base hacia arriba y hacia abajo
+// rango2: cuánto puede variar el radio de la tapa hacia arriba y hacia abajo
+// nciclos1: cuántos ciclos/picos tiene la base
+// nciclos2: cuántos ciclos/picos tiene la tapa
+
+  // variables auxiliares
+  float x,y,angulo,radio;
+
+  beginShape(QUAD_STRIP);
+  for(int i=0; i<=N; i++){
+    angulo = i*TWO_PI/N;
+    radio = r1 + rango1*sin( i*TWO_PI*nciclos1/N);
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la base
+    vertex(x,y,0);
+
+    radio = r2 + rango2*sin( i*TWO_PI*nciclos2/N);
+    x = radio*cos(angulo);
+    y = radio*sin(angulo);
+    // vértice en la tapa
+    vertex(x,y,h);
+  }
+  endShape();
+}
+```
diff --git a/src/notasP3D/footer.html b/src/notasP3D/footer.html
new file mode 100644
index 0000000..49bbd9a
--- /dev/null
+++ b/src/notasP3D/footer.html
@@ -0,0 +1,5 @@
+<nav>
+<a href="/">🍃 jardínBit</a> | J.Vega 2021 | 
+<img src="/img/cc0_small.png" alt="CC0 Public Domain"/>
+<a href="https://kopimi.com/kopimi"><img src="/img/kopimi_square.png" alt="kopimi" height="20"/></a>
+</nav>
diff --git a/src/notasP3D/funciones.md b/src/notasP3D/funciones.md
new file mode 100644
index 0000000..4bf699f
--- /dev/null
+++ b/src/notasP3D/funciones.md
@@ -0,0 +1,123 @@
+---
+title: "P3D: Ejemplos de Funciones"
+---
+
+Podemos agrupar expresiones que construyen objetos en forma de funciones, ya sea con o sin parámetros.
+
+[[Funciones de dibujo]](/notas/funciones-dibujo.html)
+
+Recuerda declarar las funciones fuera de `setup()` y de `draw()`. No olvides llamarlas cuando desees utilizarlas.
+
+# Funciones con figuras básicas
+
+## Escalinata
+
+![](/img/escalerasLoop.png)
+
+Tomando el primer ejemplo de las notas de repetición
+
+[[P3D: Ejemplos de repetición]](/notasP3D/repeticion.html)
+
+Podemos identificar que una estructura en forma de *escalinata* consiste en múltiples *cajas* desplazadas en dos dimensiones.
+
+Estas dos expresiones repetidas múltiples veces resultan en una estructura de ese tipo:
+
+```java
+box(ancho, huella, peralte);
+translate(0, huella, peralte);
+```
+
+Un ciclo `for` que dibuja 10 cajas de este tipo se vería así:
+
+```java
+for( int n=1; n<=10; n=n+1){
+  box(ancho, huella, peralte);
+  translate(0, huella, peralte);
+}
+```
+
+### Sin parámetros
+
+Ese bloque de código puede ir dentro de una función `escalinata()`, que siempre dibujará 10 escalones:
+
+```java
+void escalinata() {
+  // dibuja 10 escalones
+  float ancho = 2; // (en X)
+  float huella = 0.3; // (en Y)
+  float peralte = 0.2;  // (en Z)
+  pushMatrix();
+  for( int n=1; n<=10; n=n+1){
+    box(ancho, huella, peralte);
+    translate(0, huella, peralte);
+  }
+  popMatrix();
+}
+```
+
+Nota el uso de `pushMatrix()` y `popMatrix()` para que las transformaciones realizadas no afecten nada más en el código.
+
+Podemos llamar esa función desde `draw()`, transformándola si queremos para dibujar múltiples:
+
+```java
+escalinata(); // dibuja escalinata
+translate( 4, 0, 0 ); // traslada 4 unidades a la "derecha"
+escalinata(); // dibuja otra escalinata
+```
+
+### Con parámetros
+
+Podemos tener más flexibilidad con funciones que tengan parámetros.
+
+Por ejemplo, una función de dibujo `escalinata( )` con dos parámetros: el número de escalones, y el ancho del escalón:
+
+```java
+void escaleras(int numeroEscalones, float ancho){
+  float huella = 0.3; // (en Y)
+  float peralte = 0.2;  // (en Z)
+
+  for(int n=1; n<=numeroEscalones; n=n+1 ) {
+    box(ancho, huella, peralte);
+    translate(0, huella, peralte);
+  }
+}
+```
+
+Nota cómo el ciclo `for` ahora tiene el parámetro `numeroEscalones` en vez del 10 literal. 
+
+Al llamar la función hemos de especificar los parámetros, ya sea con literales o con variables.
+
+```java
+escalinata( 30, 2.5 ); // dibuja escalinata de 30 escalones de 2.5 unidades de ancho
+```
+
+![](/img/escaleras30.png)
+
+Practica modificando la función para que todas las dimensiones sean parámetros de la función.
+
+# Funciones con mallas propias
+
+Revisa previamente las notas sobre mallas propias
+
+[[P3D: Mallas propias]](/notasP3D/mallas.html)
+
+## Plano
+
+Esta función dibuja un plano cuadrado de `lado` unidades, centrado en el origen y sobre el plano XY
+
+```java
+void plano(float lado) {
+  beginShape(QUADS);
+  vertex(lado/2, -lado/2);
+  vertex(lado/2, lado/2);
+  vertex(-lado/2, lado/2);
+  vertex(-lado/2, -lado/2);
+  endShape();
+}
+```
+
+Para llamarla:
+
+```java
+plano( 10 ); // dibuja plano de 10 unidades de lado
+```
diff --git a/src/notasP3D/fundamentos.md b/src/notasP3D/fundamentos.md
new file mode 100644
index 0000000..33c1c47
--- /dev/null
+++ b/src/notasP3D/fundamentos.md
@@ -0,0 +1,173 @@
+---
+title: "P3D: Fundamentos y configuración"
+---
+
+# Espacio 3D Computacional
+
+## Ejes y coordenadas
+
+Por defecto, en Processing:
+
+* El eje X aumenta hacia la derecha de la pantalla
+* El eje Y aumenta hacia abajo de la pantalla
+* El eje Z aumenta hacia la persona viendo la pantalla
+
+A diferencia del trabajo en 2D, en el que cada unidad de distancia generalmente correspondía a *un pixel*, en 3D las unidades se vuelven arbitrarias debido a que su tamaño aparente depende completamente de dónde se ubica la *cámara* (ver abajo). 
+
+Y no solo el tamaño, sino también la orientación y localización: Para bien y para mal, todo se vuelve relativo. 
+
+Por eso abajo escribo entre comillas palabras como "arriba" y "origen".
+
+Si lo que estamos modelando tiene equivalente en el mundo fuera de la pantalla, nos tocará determinar la equivalencia entre las unidades del mundo "virtual" y el "real".
+
+## Cámara
+
+Por el momento trabajaremos en un mundo 3D virtual al que podremos acceder solamente a través de una pantalla 2D. Esto requiere *proyectar* el mundo 3D hacia un plano finito.
+
+Nos saltaremos las matemáticas involucradas y automatizadas en el proceso, y nos quedaremos con que normalmente una cámara virtual "ve" lo que está adentro de un volumen con forma de pirámide truncada (*view frustum* en inglés), y lo proyecta sobre un plano que corresponde a la ventana de nuestro *sketch*.
+
+(imagen)
+
+Algunos atributos de una cámara virtual típica:
+
+* Posición en el espacio (un punto en 3D)
+* Posición a la que está *viendo*, "*lookAt point*" (otro punto en 3D)
+* Dirección de "arriba" (un vector 3D apuntando hacia "arriba")
+* Distancia mínima: la distancia a partir de la cual la cámara empieza a ver 
+* Distancia máxima: la distancia hasta la cual la cámara alcanza a ver
+* Relación de aspecto (*aspect ratio*): Proporción entre el ancho y alto del plano de proyección
+* Ángulo de campo de visión (*field of view*): El ángulo máximo que puede formarse entre dos "rayos de luz" virtuales que llegan a la cámara en cuestión.
+
+Es conveniente tener presentes esos conceptos para entender mejor qué se ve (y por qué) dentro de nuestro sketch. 
+
+En Processing es posible manipular la cámara a ese nivel de detalle, pero es una complicación que va más allá del objetivo del curso.
+
+Así que empezaremos utilizando una biblioteca/*library* llamada PEasyCam, que nos permite manipular la cámara 3D de manera intuitiva con un mouse. 
+
+**Recomendación**: *así como en otros programas que trabajan en 3D, es de gran ayuda utilizar un mouse de dos botones y una "scroll wheel"*
+
+## Salidas
+
+Empezaremos trabajando con mundos en 3D que se ven y navegan a través de una pantalla 2D.
+
+Eventulamente podremos exportar como archivos OBJ lo que construyamos - esto nos permitirá añadirlo a otros programas de 3D por ejemplo para hacer un *render* con características específicas, o incluso llevarlo a programas de fabricación digital para de ahí materializarlos con las máquinas de control numérico correspondientes.
+
+También, lo que hagamos puede llegar a tener como salida un visor de VR (presencia en espacios virtuales) y/o aplicaciones de AR.
+
+# Configuración
+
+## Instalación
+
+Para trabajar en 3D en Processing, vamos a instalar la _library_ PeasyCam:
+
+*Sketch -> Importar biblioteca -> Añadir biblioteca*. Ahí busca: *PeasyCam* y presiona en *Instalar*
+
+## Consideraciones
+
+Es importante agregar el *P3D renderer* en la declaración del tamaño del sketch (ya sea dentro de `size()` o `fullscreen()`).
+
+La función `lights()` agrega una configuración básica de iluminación. Más adelante en el curso veremos cómo trabajar más deliberadamente con luces virtuales.
+
+## Sketch plantilla
+
+Este sketch nos puede servir de base para empezar a construir en 3D:
+
+```java
+// Importa PeasyCam y declara la cámara
+import peasy.PeasyCam;
+PeasyCam cam;
+
+void setup() {
+  // Determina el tamaño de la ventana
+  // y que usaremos el renderer P3D
+  size(800, 600, P3D);
+
+  // Crea el objeto de la cámara
+  // a 60 unidades de distancia del punto "lookAt"
+  // (por defecto, en (0,0,0)
+  cam = new PeasyCam(this, 60);
+}
+
+void draw() {
+  // Dibuja un fondo para limpiar la ventana en cada frame
+  background(255);
+  // Establece "luces" por defecto para notar mejor el 3D
+  lights();
+  
+  // Empieza a dibujar...
+  // Por ejemplo, crea un cubo de lado 5:
+  box(5);
+}
+```
+
+### Ajuste de perspectiva
+
+La siguiente expresión ajusta la cámara para que "vea" cualquier objeto que esté entre 1 y 100 unidades de distancia. Úsala cuando notes que los objetos que dibujes desaparezcan al hacer *zoom*
+
+```java
+// ajusta perspectiva: ve en un rango entre 1 a 100 unidades
+perspective(PI/3, 1.0*width/height, 1, 100);
+```
+
+### Punto *lookAt*
+
+Al crear la cámara podemos especificar el punto al que está viendo la cámara originalmente, además de la distancia a la que se encuentra:
+
+```java
+// mira hacia (10,10,0) desde una distancia de 50 unidades
+cam = new PeasyCam(this, 10, 10, 0, 50);
+```
+
+## Sketch plantilla con ejes
+
+Esta es otra plantilla. Incluye el ajuste de perspectiva, y utiliza una función propia `dibujaEjes( )` para dibujar los ejes coordenados:
+
+```java
+import peasy.*;
+PeasyCam cam;
+
+void setup() {
+  size(800, 600, P3D);
+
+  // cámara a 50 unidades de 0,0,0
+  cam = new PeasyCam(this, 50);
+
+  // ajusta perspectiva: ve en un rango entre 1 y 500 unidades
+  perspective(PI/3, 1.0*width/height, 1, 500);
+} // cierra setup()
+
+void draw() {
+  background(255);
+  // Establece "luces" por defecto
+  lights();
+  
+  // guía de ejes coordenados con largo de 10
+  dibujaEjes(10);
+
+  // dibuja aquí:
+
+  
+
+} // cierra draw()
+
+void dibujaEjes(float d) {
+  // esta función dibuja los ejes coordenados X, Y, Z
+  // de colores R, G, B respectivamente
+  // d: longitud de las líneas
+  
+  // eje X: rojo
+  stroke(255, 0, 0);
+  line(0, 0, 0, d, 0, 0);
+
+  // eje Y: verde
+  stroke(0, 255, 0);
+  line(0, 0, 0, 0, d, 0);
+
+  // eje Z: azul
+  stroke(0, 0, 255);
+  line(0, 0, 0, 0, 0, d);
+
+  // regresa al color negro de línea
+  stroke(0, 0, 0);
+} // cierra función dibujaEjes( )
+```
diff --git a/src/notasP3D/head.html b/src/notasP3D/head.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/notasP3D/head.html
diff --git a/src/notasP3D/iluminacion.md b/src/notasP3D/iluminacion.md
new file mode 100644
index 0000000..f69adf0
--- /dev/null
+++ b/src/notasP3D/iluminacion.md
@@ -0,0 +1,140 @@
+---
+title: "P3D: Iluminación"
+---
+
+# Fundamentos
+
+Las luces en un ambiente 3D determinan los colores y la intensidad de color en cada cara de las mallas dibujadas ("rendereadas") en la pantalla.
+
+Processing utiliza el llamado [Modelo de reflexión de Phong](https://es.wikipedia.org/wiki/Modelo_de_reflexi%C3%B3n_de_Phong), en el que se suman los componentes de luz *ambiental*, *difusa*, y *especular*.
+
+![](https://upload.wikimedia.org/wikipedia/commons/6/6b/Phong_components_version_4.png)
+
+
+Ejemplos sobre la aplicación de iluminación virtual:
+
+[Lighting Artist Realizes People Have No Idea What His Job Means And Gives Some Amazing Examples](https://www.demilked.com/lighting-artist-explains-his-job-dan-o-brien/)
+
+# Tipos de luces
+
+En Processing y en otros ambientes 3D, hay cuatro tipos básicos de luces a colocar en el espacio:
+
+* `ambientLight`
+* `pointLight`
+* `directionalLight`
+* `spotLight`
+
+## ambientLight
+
+Es una luz que colorea desde y hacia todas direcciones
+
+![](/img/ambientLight.png)
+
+Los tres parámetros que recibe son los valores de color (RGB, HSB, dependiendo del modo)
+
+```java
+ambientLight( r, g, b);
+```
+
+## pointLight
+
+Es una luz que tiene una posición específica x,y,z, y que desde ese punto emite luz en todas direcciones
+
+![](/img/pointLight.png)
+
+Los seis parámetros que recibe son:
+
+* los 3 valores de color
+* sus coordenadas x,y,z
+
+```java
+pointLight( r, g, b, x, y, z);
+```
+
+## directionalLight
+
+Es una luz que tiene una dirección específica que es emitida desde todos los puntos del espacio.
+
+![](/img/directionalLight.png)
+
+Los seis parámetros que recibe son:
+
+* los 3 valores de color
+* la magnitud de la dirección en cada eje x,y,z:
+
+```java
+directionalLight( r, g, b, dx, dy, dz);
+```
+
+## spotLight
+
+Esta luz es combinación de `pointLight` y `directionalLight`: tiene una posición específica, desde la cual emite luz en una dirección específica, con cierto ángulo de apertura y un parámetro de *concentración* de luz en ese centro.
+
+![](/img/spotLight.png)
+
+Los doce parámetros que recibe son
+
+* los 3 valores de color
+* coordenadas x,y,z
+* dirección dx, dy, dz
+* ángulo de apertura del cono (en radianes)
+* concentración de luz en el centro del cono (valor entre 1 y 10000)
+
+```java
+spotLight( r, g, b, x, y, z, dx, dy, dz, angulo, concentracion);
+```
+
+[[Ángulos en radianes]](/notas/angulos.html)
+
+# Consideraciones
+
+Algunos detalles sobre las luces que utilizaremos en Processing 3D:
+
+* Tienen un alcance *infinito* (a menos que las configuremos con `lightFalloff`).
+* No tienen una *fuente visible* - si queremos que se vea por ejemplo una lámpara, tenemos que dibujarla aparte.
+* No generan sombra ni son obstruidas por superficies en las que se reflejan.
+
+## Suma de luces
+
+El modelo de reflexión de Phong consiste en sumar todas las luces que están incidiendo sobre una superficie y que reflejan hacia la cámara. 
+
+Si, por ejemplo, establecemos una luz ambiental al 100% en todos los canales de color, todas las superficies están complemente iluminadas y las otras luces no tendrán efecto alguno:
+
+```java
+ambientLight( 255, 255, 255); // luz ambiental al 100% en r,g,b
+```
+
+Si establecemos la luz ambiental blanca al 50%, y una luz direccional blanca también al 50%, entonces veremos lo siguiente:
+
+* Solo las caras perpendiculares a la dirección de la luz estarán completamente iluminadas
+* Las caras a las que no les da la luz direccional estarán iluminadas al 50%
+* Otras caras tendrán una base del 50% de iluminación, más un componente proporcional respecto a qué ángulo forman con la luz direccional.
+
+```java
+ambientLight(128, 128, 128); // luz ambiental blanca al 50%
+directionalLight(128, 128, 128, 0, 0, -1); // luz direccional blanca al 50%, con dirección hacia abajo en Z
+```
+
+Esas dos luces son las que establece por defecto la función `lights()`.
+
+
+# Otras configuraciones
+
+## Falloff
+
+La función [lightFalloff](https://processing.org/reference/lightFalloff_.html) configura qué tanto o no decae la luz conforme se aleja de su origen. Útil especialmente para las pointLights y spotLights.
+
+Por defecto, los valores de esta función hacen que la luz no decaiga:
+
+```java
+lightFalloff(1, 0, 0);
+```
+
+## Materiales
+
+Es posible cambiar el *material* de las mallas, que determina qué tanto o de qué forma reacciona con la luz. Las funciones para configurarlo son:
+
+* [ambient](https://processing.org/reference/ambient_.html)
+* [shininess](https://processing.org/reference/shininess_.html)
+* [specular](https://processing.org/reference/specular_.html)
+* [emissive](https://processing.org/reference/emissive_.html)
diff --git a/src/notasP3D/mallas.md b/src/notasP3D/mallas.md
new file mode 100644
index 0000000..db12f78
--- /dev/null
+++ b/src/notasP3D/mallas.md
@@ -0,0 +1,235 @@
+---
+title: "P3D: Mallas"
+---
+
+# Definiciones
+
+Un objeto 3D está compuesto de una o más **mallas** (*meshes* en inglés)
+
+Una malla es una colección de **vértices**, **aristas**, y **caras** (*vertices*, *edges*, y *faces*)
+
+![](/img/vertices-aristas-caras.png)
+
+Los **vértices** son puntos, posiciones en el espacio 3D, que además pueden contener información como color o coordenada de alguna textura.
+
+Las **aristas** son la conexión o relación entre dos vértices.
+
+Las **caras** son un conjunto cerrado de aristas. Generalmente tienen forma **triangular** o **cuadrangular** (*quad*).
+
+El método que utilizaremos para definir mallas en Processing se llama **Cara-vértice** (*Face-vertex*): Definiremos cuál es nuestro conjunto de vértices, y definiremos cuáles son las caras que dichos vértices conforman.
+
+# Modos de dibujo con beginShape()
+
+Para dibujar nuestras propias mallas en Processing, necesitamos hacer uso de las funciones beginShape() y endShape(), que nos permiten agrupar en caras un conjunto de vértices descritos por la función vertex().
+
+Los siguientes modos de dibujo le indican a Processing cómo queremos que se conecten los vértices, dando paso a aristas y caras:
+
+* `TRIANGLES`
+* `QUADS`
+* `TRIANGLE_STRIP`
+* `TRIANGLE_FAN`
+* `QUAD_STRIP`
+
+(El nombre es así, todo en mayúsculas)
+
+![](/img/shapeModes.png)
+
+## TRIANGLES y QUADS
+
+Estos dos modos de dibujo son los básicos, con los que conviene empezar a trabajar.
+
+* En el caso de `TRIANGLES`, cada grupo de tres vértices se agrupa como una cara triangular.
+* En el caso de `QUADS` cada grupo de cuatro vértices se agrupa como una cara cuadrangular.
+
+Se recomienda que el orden de los vértices se coloque en la dirección de las manecillas del reloj (*CW: Clockwise*).
+
+Con estos modos "no hay pierde". El único inconveniente es que cuando queremos hacer mallas más complicadas, donde hay vértices que le pertenecen a más de una cara, usar estos dos modos nos hará tener muchas declaraciones `vertex()` repetidas.
+
+## TRIANGLE_STRIP, TRIANGLE_FAN, y QUAD_STRIP
+
+Estos modos de dibujo son un poco más complejos de utilizar, pero tienen la ventaja de que en mallas complicadas podemos ahorrarnos líneas de código.
+
+* `TRIANGLE_STRIP`: Cada nuevo vértice que se declare va a formar una cara triangular con los dos vértices anteriores.
+* `TRIANGLE_FAN`: Cada nuevo vértice que se declare va a formar una cara triangular con el vértice anterior, y con el primer vértice de la malla. El primer vértice de la malla se vuelve el "centro" al que todos los triángulos convergen.
+* `QUAD_STRIP`: Cada par de vértices nuevos que se declaren, van a formar una cara cuadrangular con los dos vértices antriores.
+
+En la ilustración, vemos que el ejemplo de `TRIANGLE_STRIP` tiene 5 triángulos y 7 vértices. Crear esa figura con `TRIANGLE_STRIP` solo requiere escribir 7 líneas de `vertex()`, mientras que crearla con TRIANGLES requeriría 15 líneas de `vertex()`.
+
+# PVector como vértices
+
+Podemos utilizar la clase PVector para almacenar y eventualmente manipular vértices 3D.
+
+La forma de declararlos:
+
+```java
+PVector punto1 = new PVector( 0, 10, 5); // crea el vértice punto1 en (0,10,5)
+PVector punto2 = new PVector( 1, 1, 1); // crea el vértice punto2 en (1,1,1)
+PVector punto3 = new PVector( 10, 50, 10); // crea el vértice punto3 en (10,50,10)
+```
+
+La forma de utilizarlos como vértices dentro de `beginShape()`:
+
+```java
+beginShape(TRIANGLES);
+vertex(punto1.x, punto1.y, punto1.z);
+vertex(punto2.x, punto2.y, punto2.z);
+vertex(punto3.x, punto2.y, punto3.z);
+endShape();
+```
+
+Es posible usar los métodos `add()` y `sub()` para incrementar o decrementar los valores x,y,z del vértice:
+
+```java
+punto1.add(0, 2, 0); // súmale 2 unidades en Y al punto1
+punto1.sub(1, 0, 0); // réstale 1 unidad en X al punto1
+```
+
+# Ejemplo: Pirámide
+
+Como primer ejemplo de malla, construimos una pirámide triangular. 
+
+## Boceto
+
+Partimos de un boceto para ubicar vértices y caras:
+
+![](/img/boceto-piramide.png)
+
+## Identificación de vértices y caras
+
+Los cuatro vértices que tiene la malla son: `a`, `b`, `c`, `d`
+
+Las cuatro caras con las que cuenta la pirámide son, con los vértices escritos en la dirección de las manecillas del reloj (*clockwise*)
+
+* `acb`
+* `adc`
+* `abd`
+* `bcd`
+
+## Pirámide con TRIANGLES
+
+El modo de dibujo `TRIANGLES` crea un triángulo por cada tres vértices (`vertex()`) que coloquemos.
+
+Es el método más claro para dibujar una malla, pero puede implicar repetir múltiples llamadas a los mismos vértices.
+
+```java
+void piramide(){
+  // Define vertices
+  PVector a = new PVector(0,0,1);
+  PVector b = new PVector(-1,-1,0);
+  PVector c = new PVector(1,-1,0);
+  PVector d = new PVector(0,1,0);
+
+  // Define caras (TRIANGLES)
+  beginShape(TRIANGLES);
+  // cara acb
+  vertex( a.x, a.y, a.z );
+  vertex( c.x, c.y, c.z );
+  vertex( b.x, b.y, b.z );
+
+  // cara adc
+  vertex( a.x, a.y, a.z);
+  vertex( d.x, d.y, d.z);
+  vertex( c.x, c.y, c.z);
+
+  // cara abd
+  vertex( a.x, a.y, a.z);
+  vertex( b.x, b.y, b.z);
+  vertex( d.x, d.y, d.z);
+
+  // cara dbc
+  vertex(d.x, d.y, d.z);
+  vertex(b.x, b.y, b.z);
+  vertex(c.x, c.y, c.z);
+  endShape();
+}
+```
+
+## Pirámide con TRIANGLE_FAN
+
+Podemos notar que la parte superior de la pirámide consiste en tres triángulos que en común tienen el vértice `a`, y que esto se parece al modo de dibujo `TRIANGLE_FAN`.
+
+Entonces, toda esa sección superior puede construirse de la siguiente forma:
+
+```java
+  beginShape(TRIANGLE_FAN);
+  vertex(a.x, a.y, a.z); // punto central, común entre todos los triángulos
+  vertex(d.x, d.y, d.z);
+  vertex(c.x, c.y, c.z); // termina triángulo a-d-c
+  vertex(b.x, b.y, b.z); // agrega triángulo b-a-c
+  vertex(d.x, d.y, d.z); // agrega triángulo d-a-b
+  endShape();
+```
+
+Son menos líneas de código, pero un poco más difícil de leer. Además, la cara inferior de la pirámide no entra en el patrón, por lo que hay que dibujarla aparte.
+
+La función completa quedaría así:
+
+```java
+void piramide(){
+  // Vertices
+  PVector a = new PVector(0,0,1);
+  PVector b = new PVector(-1,-1,0);
+  PVector c = new PVector(1,-1,0);
+  PVector d = new PVector(0,1,0);
+  
+  // Caras
+  // caras parte superior
+  beginShape(TRIANGLE_FAN);
+  vertex(a.x, a.y, a.z);
+  vertex(d.x, d.y, d.z);
+  vertex(c.x, c.y, c.z); // termina triángulo c-a-d
+  vertex(b.x, b.y, b.z); // agrega triángulo b-a-c
+  vertex(d.x, d.y, d.z); // agrega triángulo d-a-b
+  endShape();
+
+  // cara base
+  beginShape(TRIANGLES);
+  vertex(d.x, d.y, d.z);
+  vertex(b.x, b.y, b.z);
+  vertex(c.x, c.y, c.z);
+  endShape();
+}
+```
+
+![](/img/piramideSide.png)
+![](/img/piramideTop.png)
+
+
+# Construyendo una malla (manualmente)
+
+Para construir una malla asignando los vértices y las caras de manera manual, sugiero llevar a cabo los siguientes pasos:
+
+* Boceto(s) de malla
+* Identificación de vértices
+* Identificación de aristas y caras
+* Codificación
+
+## Boceto(s) de malla
+
+Como hemos visto en otras ocasiones, conviene tener a la mano al menos una proyección paralela de lo que queremos construir.
+
+![](/img/boceto-malla.png)
+
+## Identificación de vértices
+
+Al identificar los vértices, hay que nombrarlos/numerarlos, y encontrar su ubicación 3D (aproximada o no, tomando en cuenta que las posiciones se pueden ajustar en el código).
+
+Si el boceto tiene líneas curvas, hay que asignar algunos vértices para aproximarlas.
+
+En el código los declararemos como variables de tipo PVector (PVector como Vértices)
+
+![](/img/boceto-malla-con-vertices.png)
+
+## Identificación de aristas y caras
+
+Este proceso también se llama *teselación*. En nuestro caso, buscamos identificar caras triangulares y/o cuadrangulares (quads), formadas a partir de conectar vértices con aristas.
+
+![](/img/boceto-malla-con-vertices-y-caras.png)
+
+Conviene tomar en cuenta los Modos de dibujo en `beginShape()`, por si podemos/queremos hacer que nuestra teselación quede parcial o completamente descrita por los modos `TRIANGLE_STRIP`, `TRIANGLE_FAN`, o `QUAD_STRIP`, para escribir menos código.
+
+Si no, no hay problema, y podemos definir todas las caras como triángulos (`TRIANGLES`) o quads (`QUADS`) individuales.
+
+## Codificación
+
+Ya que tenemos todos nuestros elementos - vértices nombrados/numerados y con posición, y caras definidas - podemos pasar a escribirlos en Processing. Como referencia, tenemos la Pirámide de arriba.
diff --git a/src/notasP3D/nav.html b/src/notasP3D/nav.html
new file mode 100644
index 0000000..eb9f94b
--- /dev/null
+++ b/src/notasP3D/nav.html
@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>
diff --git a/src/notasP3D/obj.md b/src/notasP3D/obj.md
new file mode 100644
index 0000000..76436f2
--- /dev/null
+++ b/src/notasP3D/obj.md
@@ -0,0 +1,3 @@
+---
+title: "P3D: Exportar e importar mallas OBJ"
+---
diff --git a/src/notasP3D/primitivas.md b/src/notasP3D/primitivas.md
new file mode 100644
index 0000000..3da6aca
--- /dev/null
+++ b/src/notasP3D/primitivas.md
@@ -0,0 +1,59 @@
+---
+title: "P3D: Figuras básicas / primitivas"
+---
+
+Processing tiene por defecto dos figuras en 3D, `box()` y `sphere()`, que se dibujan **centradas en el "origen" actual**.
+
+# Funciones
+
+## box( d ) 
+
+Dibuja un cubo de `d` unidades de lado, centrado en el origen.
+
+```java
+noFill();
+
+box( 5 ); // dibuja cubo de 5 unidades
+box( 10 ); // dibuja cubo de 10 unidades
+```
+
+## box( dx, dy, dz )
+
+Dibuja una caja rectangular con dimensiones `dx`,  `dy` y `dz`, con centro en el origen.
+
+```java
+box( 10, 5, 2 ); // caja de 10x5x2
+```
+
+## sphere( r )
+
+Dibuja una esfera con `r` unidades de radio, centrada en el origen.
+
+```java
+noFill();
+
+sphere( 5 ); // dibuja esfera de 5 unidades de radio
+sphere( 10 ); // dibuja esfera de 10 unidades de radio
+```
+
+## sphereDetail( rs )
+
+Cambia la resolución de las esferas dibujadas a continuación. Esta resolución se refiere al número de vértices en cada circunferencia.
+
+El valor por defecto es 30, y el mínimo es 3.
+
+```java
+// dibuja una esfera de baja resolución:
+sphereDetail(4); 
+sphere(5);
+```
+
+### sphereDetail( urs, vrs )
+
+Con esta función podemos elegir la resolución longitudinal `urs` (alrededor) y latitudinal `vrs` (de arriba a abajo) de manera independiente.
+
+```java
+// dibuja una "esfera" con diferentes resoluciones en latitud y longitud
+sphereDetail(4, 10); 
+sphere(5);
+```
diff --git a/src/notasP3D/repeticion.md b/src/notasP3D/repeticion.md
new file mode 100644
index 0000000..e8f5ae2
--- /dev/null
+++ b/src/notasP3D/repeticion.md
@@ -0,0 +1,132 @@
+---
+title: "P3D: Ejemplos de Repetición"
+---
+
+# Estrategias para usar construcción basada en repetición
+
+Recordemos que la estructura básica de un ciclo `for` es:
+
+```java
+for( int n=1; n<=10; n++){
+// repite este bloque de código 10 veces
+// ...
+}
+```
+
+[[Ciclos while y for]](/notas/ciclos.html)
+
+La clave para construir algo basado en ciclos es identificar el patrón a repetir:
+
+* ¿Qué tienen en común los elementos repetidos?
+* ¿Hay algo constante?
+* ¿Qué es lo que cambia entre cada elemento?
+* ¿Cómo es que cambia?
+
+Ya que lo identifiquemos, es posible aprovechar que las transformaciones (`translate`, `rotate`) se van acumulando. También es posible usar la variable `n` para parametrizarlas. Además, es posible usar una variable como "acumulador".
+
+Veamos cómo se puede hacer una hilera de 10 cubos con estas diferentes opciones.
+
+![](/img/filadecubos.png)
+
+## Transformaciones acumuladas
+
+En esta versión, aprovechamos que mientras no usemos `pushMatrix()` y `popMatrix()`, el origen se va a quedar en el último lugar en el que estábamos.
+
+```java
+for(int n=1; n<=10; n++){  
+  box(1);
+  translate(2, 0, 0);
+}
+```
+
+Esta versión la podemos leer en lenguaje natural de la siguiente forma:
+
+*repite 10 veces lo siguiente: dibuja un cubo de lado 1, y muévete 2 unidades en x*
+
+## Transformaciones parametrizadas
+
+Otra opción es:
+
+```java
+for( int n=0; n<10; n++){
+  pushMatrix();
+    translate(2*n, 0, 0);
+    box(1);
+  popMatrix();
+}
+```
+
+Esta la podemos leer algo así:
+
+*dibuja 10 cubos de la siguiente forma: para el cubo número `n`, muévete `2\*n` unidades en `x`, y dibuja un cubo de lado 1.*
+
+## Transformaciones con parámetro acumulador
+
+Esta es un poco la mezcla de las otras dos. La idea es tener una variable que cambia de valor con cada iteración del ciclo.
+
+Para nuestro ejemplo:
+
+```java
+int x = 0;
+for(int n=1; n<=10; n++){
+  pushMatrix();
+    translate(x, 0, 0);
+    box(1);
+  popMatrix();
+  x = x + 2;
+}
+```
+
+Todas estas opciones son equivalentes, pero puede ser que alguna te acomode más que otra :)
+
+Para este ejemplo básico la primera probablemente es la mejor, pero conviene tener presentes las otras opciones que pueden ser más versátiles en otras ocasiones.
+
+# Ejemplos / Inspiración
+
+Las siguientes son algunas construcciones realizadas gracias al uso de ciclos `for`.
+
+Los ejemplos están ordenados más o menos por orden de dificultad.
+
+## Escalera
+
+![](/img/escalerasLoop.png)
+
+Tal vez el ejemplo más básico y útil a la vez. ¿Qué diferencía a un escalón del siguiente?
+
+Si te cuesta obtener el patrón, puedes intentar construirla manualmente para que notes cuáles son las acciones que estás repitiendo.
+
+## Múltiples pisos / "Jenga"
+
+![](/img/jenga.png)
+
+![](/img/jenga2.png)
+
+Hay varias formas de hacer esta construcción. Dependiendo de cómo lo veas, puedes o no utilizar rotaciones.
+
+Además de las figuras del "jenga", puedes utilizar alguna una otra construcción que ya hayas realizado, y hacer varios pisos al repetirla.
+
+¿Qué es lo que diferencía a un piso del siguiente?
+
+## Múltiples pisos / "Jenga" - con rotación
+
+![](/img/jengaRot.png)
+
+Parecido al anterior, pero incorporando rotaciones en cada piso.
+
+## Pirámide
+
+![](/img/piramide.png)
+
+Esta se parece a la construcción de varios pisos, pero con una diferencia importante. De nuevo: ¿qué es lo que varía entre cada uno de los pisos?
+
+## Círculo de columnas
+
+![](/img/circuloColumnas.png)
+
+Parece sencilla, pero hay que poner atención en el orden en el que se aplican las rotaciones y traslaciones. Lo bueno es que si te "equivocas", puede ser que te salgan otras construcciones interesantes.
+
+## Escalera de caracol
+
+![](/img/escaleraCaracol.png)
+
+Aquí hay un poco de todo: translaciones, rotaciones, y probablemente varios `pushMatrix()` y `popMatrix()`.
+\ No newline at end of file
diff --git a/src/notasP3D/reticula.md b/src/notasP3D/reticula.md
new file mode 100644
index 0000000..8063194
--- /dev/null
+++ b/src/notasP3D/reticula.md
@@ -0,0 +1,243 @@
+---
+title: "P3D: Retícula"
+---
+
+Llamaremos retícula a una malla que consiste en una "red" de vértices.
+
+![](/img/reticula-plano2.png)
+
+Una manera de construirla consiste en establecer una serie de `QUAD_STRIP`s (filas) una al lado de la otra, con vértices en coordenadas x,y separadas de manera uniforme.
+
+Podemos tener una función `z(x,y)` que de acuerdo a los valores de x,y, regresa el valor de la altura que le corresponde a ese vértice. Esa función `z(x,y)` la podemos modificar libremente para encontrar distintos resultados.
+
+# Una posible función "retícula"
+
+La siguiente es una función que dibuja una red de n filas y m columnas de celdas, cada celda con d unidades de lado, y toda centrada en el origen:
+
+```java
+void reticula(int n, int m, float d) {
+  // n: número de filas
+  // m: número de columnas
+  // d: longitud del lado de la celda
+  float x,y1,y2,z1,z2;
+  for (int f=0; f<n; f++) {
+    // dibuja una fila
+    beginShape(QUAD_STRIP);
+    for(int c=0; c<n; c++){
+      x = c*d  - n*d/2;
+      y1 = f*d - m*d/2;
+      y2 = (f+1)*d - m*d/2; 
+      z1 = z(x, y1);
+      z2 = z(x, y2);
+      // vértice de "arriba"
+      vertex(x, y1, z1);
+      // vértice de "abajo"
+      vertex(x, y2, z2);
+    }
+    endShape();
+  }
+}
+```
+
+Esta función necesita de una función `z` que podemos definir de la siguiente forma:
+
+## Función "z":
+
+Forma básica de la función "z":
+
+```java
+float z(float x, float y){
+  // esta función determina el valor que tendrá z
+  // para una determinada coordenada x,y
+ float z = 1;
+ return z; 
+}
+```
+
+Podemos leerla como una función que regresa un número de punto flotante (float), que recibe dos parámetros: x, y.
+
+En el caso de arriba, para cualquier valor de x,y, el valor de z es 1, por lo que resulta un plano.
+
+![](/img/reticula-plano.png)
+
+# Posibilidades a probar
+
+En la función `z( x, y )` podemos escribir distintas operaciones en términos de x,y
+
+## Parábolas
+
+Por ejemplo una **parábola** en términos de y:
+
+```java
+float z(float x, float y){
+ float z = -0.1*y*y;
+ return z; 
+}
+```
+
+![](/img/reticula-parabola1.png)
+
+O una parábola en x,y:
+
+```java
+float z(float x, float y){
+ float z = -0.1*y*y -0.1*x*x;
+ return z; 
+}
+```
+
+![](/img/reticula-parabola2.png)
+
+## Trigonométricas
+
+
+También podemos incluir **funciones trigonométricas**, por ejemplo combinaciones de funciones `sin()` y `cos()`:
+
+```java
+float z(float x, float y){
+ float z = sin(x) + cos(y);
+ return z; 
+}
+```
+
+![](/img/reticula-trigo1.png)
+
+[[Funciones trigonométricas]](/notas/trig.html)
+
+## Más funciones y operadores
+
+Podemos utilizar otras **funciones matemáticas**:
+
+```java
+float z(float x, float y){
+ float z = sqrt(x*x + y*y);
+ return z; 
+}
+```
+
+![](/img/reticula-funciones.png)
+
+**Operadores aritméticos** en general (por ejemplo **módulo**):
+
+```java
+float z(float x, float y){
+ float z = y%2;
+ return z; 
+}
+```
+
+![](/img/reticula-modulo.png)
+
+Otro ejemplo con **módulo**:
+
+```java
+float z(float x, float y){
+ float z = y%2+x%3;
+ return z; 
+}
+```
+
+![](/img/reticula-modulo2.png)
+
+## Combinaciones
+
+Y en general combinaciones que pueden volverse muy complejas:
+
+```java
+float z(float x, float y){
+ float z = cos(sqrt((x*x + y*y)*10))/exp((x*x+y*y)*0.1);
+ return z; 
+}
+```
+
+![](/img/reticula-funciones2.png)
+
+## Condicionales
+
+También podemos utilizar **condicionales** para realizar cambios que se llamarían no lineales:
+
+```java
+float z(float x, float y){
+ float z = 1;
+ if ( x < 0){
+   z = -1;
+ }
+ return z; 
+}
+```
+
+![](/img/reticula-condicional1.png)
+
+## Combinación de todo
+
+Y bueno, en general combinar todas las opciones:
+
+```java
+float z(float x, float y){
+ float z = sqrt(x*x + y*y);
+ if ( x < 0){
+   z = cos(y);
+ }
+ return z; 
+}
+```
+
+![](/img/reticula-condicional2.png)
+
+Te invito a explorar con diferentes posibilidades - no es necesario saber de antemano qué va a surgir.
+
+# Programa completo
+
+El programa completo para mostrar una retícula con una función "z" dada, quedaría algo así:
+
+```java
+import peasy.*;
+PeasyCam cam;
+void setup() {
+  size(600, 600, P3D);
+  cam = new PeasyCam(this, 15);
+  perspective(PI/3, 1.0*width/height, 0.1, 100);
+}
+void draw() {
+  background(255);
+  ambientLight(50,50,50);
+  pointLight(230, 230, 230, 0, 10, 0);
+  noStroke();
+  reticula(100, 100, 0.1);
+}
+
+float z(float x, float y){
+  // esta función determina el valor que tendrá z
+  // para una determinada coordenada x,y
+ float z = sqrt(x*x + y*y);
+ if(x<0){
+   z = cos(y); 
+ }
+ return z; 
+}
+
+void reticula(int n, int m, float d) {
+  // n: número de filas
+  // m: número de columnas
+  // d: longitud del lado de la celda
+  float x,y1,y2,z1,z2;
+  for (int f=0; f<n; f++) {
+    // dibuja una fila
+    beginShape(QUAD_STRIP);
+    for(int c=0; c<n; c++){
+      x = c*d  - n*d/2;
+      y1 = f*d - m*d/2;
+      y2 = (f+1)*d - m*d/2; 
+      z1 = z(x, y1);
+      z2 = z(x, y2);
+      // vértice de "arriba"
+      vertex(x, y1, z1);
+      // vértice de "abajo"
+      vertex(x, y2, z2);
+    }
+    endShape();
+  }
+}
+```
+
+
diff --git a/src/notasP3D/transformaciones.md b/src/notasP3D/transformaciones.md
new file mode 100644
index 0000000..3aedc6e
--- /dev/null
+++ b/src/notasP3D/transformaciones.md
@@ -0,0 +1,99 @@
+---
+title: "P3D: Transformaciones"
+---
+
+Para dibujar en el mundo 3D usamos las transformaciones extendidas a tres dimensiones.
+
+[[Transformaciones]](/notas/transformaciones.html)
+
+Estas funciones alteran el estado de la *matriz de transformaciones*, que indica la posición del origen, dimensiones de los ejes, y rotaciones.
+
+# Funciones
+
+## translate( dx, dy, dz )
+
+Traslada la posición del origen `dx` unidades sobre el eje `x`, `dy` unidades sobre el eje `y`, y `dz` unidades sobre el eje `z`, *respecto a la posición anterior*.
+
+Los argumentos son de tipo `float` y pueden ser positivos o negativos.
+
+```java
+// dibuja un cubo centrado en el origen
+box(5); 
+
+// traslada el origen 5 unidades sobre X
+translate( 5, 0, 0 );
+
+// dibuja otro cubo centrado en el nuevo origen
+box( 5 );
+```
+
+## rotateX(a), rotateY(a), rotateZ(a)
+
+Estas funciones nos permiten rotar sobre cualquiera de los ejes, en uno a la vez:
+
+* `rotateX( a )`: rota `a` radianes sobre el eje `x` (*roll*, o *alabeo*)
+* `rotateY( a )`: rota `a` radianes sobre el eje `y` (*pitch* o *cabeceo*)
+* `rotateZ( a )`: rota `a` radianes sobre el eje `z` (*yaw* o *guiñada*)
+
+```java
+// dibuja un cubo centrado en el origen
+box(5); 
+
+// rota un octavo de vuelta
+rotateX( PI/4 );
+
+// dibuja otro cubo centrado en el nuevo origen
+box( 5 );
+```
+
+En las notas de Funciones Trigonométricas se detalla el uso de los radianes:
+
+[[Funciones trigonométricas]](/notas/trig.html)
+
+Para especificar ángulos de rotación en grados, utizamos la función `radians( )` que hace la conversión:
+
+```java
+rotateX( radians(45) ); // rota 45 grados sobre el eje x
+```
+
+## scale( )
+
+Multiplica (escala) las dimensiones de las unidades por un factor.
+
+Si el factor es 1, las dimensiones se mantienen. Si el factor es menor a 1, las dimensiones se reducen, y si es mayor a 1, las dimensiones incrementan.
+
+Por ejemplo: un factor de 0.5 divide las dimensiones a la mitad, y un factor de 2 las multiplica al doble.
+
+* `scale( s )`: escala todas las dimensiones por un factor `s`
+* `scale( sx, sy, sy )`: escala cada dimensión por un factor correspondiente `sx`, `sy`, `sz`
+
+```java
+// dibuja un "disco" aplanando a una esfera
+scale( 2, 2, 0.5); // incrementa en x, y, decrementa en z
+sphere(5); // dibuja la esfera
+```
+
+## pushMatrix() y popMatrix()
+
+Estas funciones nos permiten guardar (`pushMatrix()`) y recuperar (`popMatrix()`) el estado de la matriz de transformaciones.
+
+**Nota**: Por cada `pushMatrix()` tiene que haber un `popMatrix()` correspondiente.
+
+Como toda nuestra construcción se basa en transformaciones acumuladas, conviene utilizar estas funciones para *regresar* a estados anteriores.
+
+Por ejemplo:
+
+```java
+box(2); // dibuja cubo en el origen
+  
+pushMatrix(); // guarda el origen
+translate(1.5, 0, 0); // traslada en x (derecha)
+rotateX( PI/4 ); // rota en el eje X
+box(1); // dibuja otro cubo
+popMatrix(); // recupera el origen
+  
+translate( 0, 0, 1.5); // traslada en z (arriba)
+scale( 2, 2, 0.5); // "aplana" escalando
+sphere(1); // dibuja esfera
+```
+
diff --git a/src/tutoriales/c2-patrones-lineas.md b/src/tutoriales/c2-patrones-lineas.md
new file mode 100644
index 0000000..04fefdf
--- /dev/null
+++ b/src/tutoriales/c2-patrones-lineas.md
@@ -0,0 +1,76 @@
+---
+title: "Tutorial: Patrones con líneas"
+---
+
+Este tutorial detalla el proceso para dibujar un patrón de líneas paralelas horizontales en Processing.
+
+# Boceto
+
+Primero que nada, vale la pena aterrizar qué es lo que queremos dibujar, y especificarlo a nivel numérico.
+
+Hacemos un boceto de nuestra imagen deseada:
+
+![](/img/c2-patrones-lineas/01boceto.png)
+
+Necesitamos un marco de referencia, así que establecemos las dimensiones en el eje `X` y en el eje `Y`. 
+
+En este caso, de manera arbitraria decidimos que el lienzo tendrá 600 pixeles de ancho (`width`) y también 600 de alto (`height`):
+
+![](/img/c2-patrones-lineas/02dimensiones.png)
+
+Para dibujar nuestras líneas, necesitamos los puntos donde inician y terminan.
+
+Marcamos los puntos en nuestro boceto...
+
+![](/img/c2-patrones-lineas/03puntos.png)
+
+...y encontramos sus coordenadas. Podemos notar que todos los puntos de la izquierda tienen una coordenada `X` de 0, y todos los de la derecha una coordenada `X` de 600.
+
+Además, como las líneas están separadas por la misma distancia entre ellas, podemos determinar que en el eje `Y` su posición varía por 100 entre cada una:
+
+![](/img/c2-patrones-lineas/04coordenadas.png)
+
+## Conclusiones
+
+Ya con este boceo anotado, podemos obtener las siguientes conclusiones:
+
+* Todas las líneas tienen las mismas coordenadas en `X`: la inicial es 0, y la final es 600
+* Cada línea tiene la misma coordenada `Y` en su punto inicial y en su punto final. *Esto hace que sea una línea horizontal*
+* Entre cada línea, las coordenadas `Y` varían por una diferencia de 100. 
+
+# Código
+
+Gracias al boceto, ya tenemos los cuatro parámetros que se necesitan para dibujar cada línea en Processing: `x` inicial, `y` inicial, `x` final y `y` final.
+
+[[Dibujo con puntos y líneas]](/notas/lineas.html)
+
+Solo hay que crear nuestro *canvas* con las dimensiones deseadas, y transcribir las coordenadas de los puntos.
+
+[[Canvas y sistema de coordenadas]](/notas/canvas-y-coordenadas.html)
+
+El código podría quedar de la siguiente forma. Nota cómo los parámetros de las funciones `line();` corresponden a los números del boceto:
+
+```java
+// crea un lienzo de 600x600
+size( 600, 600 );
+
+// dibuja líneas:
+line( 0, 100, 600, 100 );
+line( 0, 200, 600, 200 );
+line( 0, 300, 600, 300 );
+line( 0, 400, 600, 400 );
+line( 0, 500, 600, 500 );
+
+// guarda imagen:
+save("lineas-paralelas.png");
+```
+
+El código tiene *comentarios* para indicar qué realiza cada sección, aquí hay más información al respecto:
+
+[[Notas sobre sintaxis]](/notas/sintaxis.html)
+
+La imagen resultante se ve de la siguiente forma:
+
+![](/img/c2-patrones-lineas/05resultado.png)
+
+¡Listo! Ahora a practicar con otros patrones :)
diff --git a/src/tutoriales/c3-copos-flores.md b/src/tutoriales/c3-copos-flores.md
new file mode 100644
index 0000000..71eddf7
--- /dev/null
+++ b/src/tutoriales/c3-copos-flores.md
@@ -0,0 +1,300 @@
+---
+title: "Tutorial: Copos y flores (Funciones y transformaciones)"
+---
+
+Este tutorial es un ejemplo sencillo que realiza a la siguiente actividad:
+
+[ACTIVIDAD: Copos de nieve, flores, y más](/actividades/c3-copos.html)
+
+Donde el objetivo es realizar una composición visual basada en una *función propia con parámetros* que construya una flor/copo de nieve/etc a partir de la rotación de pétalos construidos con otra *función propia*.
+
+# Diseño del pétalo
+
+Boceteamos e implementamos una figura *pétalo* con su base (punto de rotación) en las coordenadas 0,0.
+
+Por ejemplo, la siguiente es una línea vertical acompañada de cuatro líneas diagonales
+
+```java
+ line(0,0, 0, d); 
+ line(0,d, -20, d+20);
+ line(0,d,  20, d+20);
+ line(0,d/2, -20, d/2+20);
+ line(0,d/2,  20, d/2+20);
+```
+
+![](/img/c3-copos-flores/petalo.png)
+
+Nota que hay un parámetro `d` que se refiere al largo de la línea. 
+
+# Función de dibujo del pétalo
+
+Podemos agrupar el código dentro de una función propia con un parámetro `d`:
+
+```java
+void petalo( float d ){
+// dibuja un pétalo con largo 'd'
+ line(0,0, 0, d); 
+ line(0,d, -20, d+20);
+ line(0,d,  20, d+20);
+ line(0,d/2, -20, d/2+20);
+ line(0,d/2,  20, d/2+20);
+}
+```
+
+Esta función, en contexto de todo el programa, se vería así:
+
+```java
+void setup() {
+  size(500, 500);
+  background(0);
+  stroke(255);
+  strokeWeight(5);
+}
+void draw() {
+  // dibuja un pétalo con largo 100
+  petalo( 100 );
+}
+
+void petalo(float d) {
+// dibuja un pétalo con largo 'd'
+  line(0, 0, 0, d); 
+  line(0, d, -20, d+20);
+  line(0, d, 20, d+20);
+  line(0, d/2, -20, d/2+20);
+  line(0, d/2, 20, d/2+20);
+}
+```
+
+Nota que con el programa en esa forma, el pétalo se dibuja con su base en 0,0 y se ve incompleto.
+
+# Transformaciones
+
+## Traslación
+
+Para dibujar el pétalo con su base en otra posición, podemos utilizar `translate( )`, que cambia la posición del origen. Solamente enfocándonos en la función `draw()`:
+
+```java
+void draw() {
+  // mueve el origen 200 pixeles a la derecha
+  // y 100 pixeles hacia abajo:
+  translate( 200, 100 );
+
+  // dibuja un pétalo con largo 100
+  petalo( 100 );
+}
+```
+![](/img/c3-copos-flores/petalo-trasladado.png)
+
+
+## Repetición y rotación
+
+La función `rotate( )` va a rotar el lienzo usando al *origen* como punto del eje de rotación. 
+
+Dibujar la punta de nuestro pétalo respecto a 0,0 nos facilita usar esa punta como posición del eje de rotación.
+
+Lo añadido a continuación repite 5 veces una rotación, donde en cada rotación se gira `360/5` grados:
+
+```java
+void draw() {
+  // mueve el origen 200 pixeles a la derecha
+  // y 100 pixeles hacia abajo:
+  translate( 200, 100 );
+
+  // repite 5 veces lo siguiente:
+  for(int i=0; i<5; i=i+1){
+    petalo( 100 ); // dibuja el pétalo
+    rotate( radians( 360/5 ) ); // rota 360/5 grados
+  }
+}
+```
+
+![](/img/c3-copos-flores/petalos-rotados-repetidos.png)
+
+## Guardado y recuperación del origen
+
+Es buena práctica siempre preceder cualquier grupo de transformaciones con `pushMatrix()` y terminarlas con `popMatrix()` para que lo que dibujemos después parta de un origen en 0,0 y un lienzo sin rotaciones ni escalamientos:
+
+```java
+void draw() {
+  // guarda el origen
+  pushMatrix();
+  // mueve el origen 200 pixeles a la derecha
+  // y 100 pixeles hacia abajo:
+  translate( 200, 100 );
+
+  // repite 5 veces lo siguiente:
+  for(int i=0; i<5; i=i+1){
+    petalo( 100 ); // dibuja el pétalo
+    rotate( radians( 360/5 ) ); // rota 360/5 grados
+  }
+  // recupera el origen
+  popMatrix();
+}
+```
+
+# Función de dibujo de la flor
+
+A partir de lo anterior, podemos identificar que la función de `translate( )` coloca el centro de nuestro copo/flor en la posición que deseemos.
+
+Agrupamos todo ese código dentro de una función `flor( )` con dos parámetros, `x` y `y`. Nosotras les asignamos nombre y orden dentro de los argumentos de nuestra función.
+
+Nota que esas variables reemplazan a los valores previos de `200` y `100` dentro de `translate( )`:
+
+```java
+void flor( float x, float y) {
+  // dibuja una flor con centro en x, y
+
+  // guarda el origen
+  pushMatrix();
+  // mueve el origen x pixeles a la derecha
+  // y pixeles hacia abajo:
+  translate( x, y );
+
+  // repite 5 veces lo siguiente:
+  for(int i=0; i<5; i=i+1){
+    petalo( 100 ); // dibuja el pétalo
+    rotate( radians( 360/5 ) ); // rota 360/5 grados
+  }
+  // recupera el origen
+  popMatrix();
+}
+```
+
+Podemos llamar esta función dentro de `draw()` para dibujar la flor en coordenadas específicas. 
+
+## En contexto
+
+Este programa dibuja una flor en el centro del lienzo:
+
+```java
+void setup() {
+  size(500, 500);
+  background(0);
+  stroke(255);
+  strokeWeight(5);
+}
+void draw() {
+  // dibuja una flor en el centro del lienzo
+  flor( width/2, height/2 );
+}
+
+void flor( float x, float y) {
+  // dibuja una flor con centro en x, y
+
+  // guarda el origen
+  pushMatrix();
+  // mueve el origen x pixeles a la derecha
+  // y pixeles hacia abajo:
+  translate( x, y );
+
+  // repite 5 veces lo siguiente:
+  for(int i=0; i<5; i=i+1){
+    petalo( 100 ); // dibuja el pétalo
+    rotate( radians( 360/5 ) ); // rota 360/5 grados
+  }
+  // recupera el origen
+  popMatrix();
+}
+
+void petalo(float d) {
+// dibuja un pétalo con largo 'd'
+  line(0, 0, 0, d); 
+  line(0, d, -20, d+20);
+  line(0, d, 20, d+20);
+  line(0, d/2, -20, d/2+20);
+  line(0, d/2, 20, d/2+20);
+}
+```
+
+![](/img/c3-copos-flores/flor-centro.png)
+
+# Función de dibujo con más parámetros: largo y repeticiones 
+
+La función anterior siempre dibujará una flor de 5 pétalos de 100 pixeles de largo.
+
+Para tener más flexibilidad, podemos agregar esas cantidades como parámetros: `d` será el largo del pétalo y `n` el número de pétalos. Esos nombres los decidimos tanto en nombre como en orden dentro de la lista de parámetros.
+
+Nota cómo estas variables reemplazan las cantidades que previamente eran números literales:
+
+```java
+void flor( float x, float y, float d, int n) {
+  // dibuja una flor con:
+  // x,y: coordenadas del centro
+  // d: largo de petalo
+  // n: número de pétalos
+
+  // guarda el origen
+  pushMatrix();
+  // mueve el origen x pixeles a la derecha
+  // y pixeles hacia abajo:
+  translate( x, y );
+
+  // repite n veces lo siguiente:
+  for(int i=0; i<n; i=i+1){
+    petalo( d ); // dibuja el pétalo de largo d
+    rotate( radians( 360/n ) ); // rota 360/n grados
+  }
+  // recupera el origen
+  popMatrix();
+}
+```
+
+## En contexto
+
+Con esta nueva función, podemos dibujar flores en distintas posiciones, de distintos tamaños, y con distinto número de pétalos:
+
+```java
+void setup() {
+  size(500, 500);  
+  background(0);
+  stroke(255);
+  strokeWeight(5);
+}
+void draw() {
+  // flor en el centro del lienzo, tamaño 120, 8 pétalos
+  flor(width/2, height/4, 120, 8);
+  
+  // flor abajo a la izquierda, tamaño 50, 10 pétalos
+  flor(width/4, height*3/4, 50, 10);
+  
+  // flor abajo a la derecha, tamaño 80, 5 pétalos
+  flor(width*3/4, height*3/4, 80, 5);
+}
+
+void flor( float x, float y, float d, int n) {
+  // dibuja una flor con:
+  // x,y: coordenadas del centro
+  // d: largo de petalo
+  // n: número de pétalos
+
+  // guarda el origen
+  pushMatrix();
+  // mueve el origen x pixeles a la derecha
+  // y pixeles hacia abajo:
+  translate( x, y );
+
+  // repite n veces lo siguiente:
+  for(int i=0; i<n; i=i+1){
+    petalo( d ); // dibuja el pétalo de largo d
+    rotate( radians( 360/n ) ); // rota 360/n grados
+  }
+  // recupera el origen
+  popMatrix();
+}
+
+void petalo(float d) {
+// dibuja un pétalo con largo 'd'
+  line(0, 0, 0, d); 
+  line(0, d, -20, d+20);
+  line(0, d, 20, d+20);
+  line(0, d/2, -20, d/2+20);
+  line(0, d/2, 20, d/2+20);
+}
+```
+![](/img/c3-copos-flores/flor-variaciones.png)
+
+# Notas relacionadas
+
+* [[Funciones de dibujo]](/notas/funciones-dibujo.html)
+* [[Transformaciones]](/notas/transformaciones.html)
+* [[Ciclos while y for]](/notas/ciclos.html)
diff --git a/src/tutoriales/c3-patrones-lineas-ciclos.md b/src/tutoriales/c3-patrones-lineas-ciclos.md
new file mode 100644
index 0000000..24d0758
--- /dev/null
+++ b/src/tutoriales/c3-patrones-lineas-ciclos.md
@@ -0,0 +1,186 @@
+---
+title: "Tutorial: Patrones con líneas con ciclos"
+---
+
+Este tutorial detalla el proceso para dibujar un patrón de líneas paralelas horizontales en Processing, utilizando varias opciones de expresiones repetitivas.
+
+# Boceto
+
+Primero que nada, vale la pena aterrizar qué es lo que queremos dibujar, y especificarlo a nivel numérico.
+
+![](/img/c2-patrones-lineas/01boceto.png)
+
+De manera arbitraria decidimos que el lienzo tendrá 600 pixeles de ancho (`width`) y también 600 de alto (`height`), y que las líneas estarán separadas por 100 pixeles en lo vertical.
+
+Marcamos los puntos de inicio y final de cada línea, y encontramos sus coordenadas correspondientes:
+
+![](/img/c2-patrones-lineas/04coordenadas.png)
+
+# Hallazgos
+
+Con este boceto anotado, podemos hallar y describir lo siguiente:
+
+* Todas las líneas tienen las mismas coordenadas en `X`: la inicial es 0, y la final es 600
+* Cada línea tiene la misma coordenada `Y` en su punto inicial y en su punto final. *Esto hace que sea una línea horizontal*
+* Entre cada línea, las coordenadas `Y` varían por una diferencia de 100. 
+
+# Pseudo-código
+
+De acuerdo a los hallazgos, podemos describir a la *plantilla* de nuestras líneas de esta manera:
+
+```java
+line( 0, y, 600, y);
+```
+
+Así, dejamos claro que las cantidades en `X` son *constantes*, y las cantidades en `Y` son *variables*. La misma cantidad en `Y` se repite en el punto inicial y en el punto final.
+
+Según lo que establecimos, en cada línea la variable `y` tiene una diferencia de 100 con la anterior.
+
+
+# Código
+
+Hay varias posibilidades para describir en código este comportamiento.
+
+## Ciclo a partir de cantidad de repeticiones
+
+La forma más común de utilizar los ciclos `for` es como una forma de indicar cuántas veces va a repetirse algún bloque de código.
+
+Los siguientes son dos ejemplos de ciclo `for` que se repiten 5 veces:
+
+```java
+// Repite 5 veces, i vale: 0, 1, 2, 3, 4:
+for( int i=0; i<5; i++ ){
+	// 
+}
+
+// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
+for( int i=1; i<=5; i++){
+	//
+}
+```
+
+*Nota que la diferencia entre ambos es el valor inicial de `i`, y la comparación con el número 5 dentro de la condición*
+
+Con esta estructura de ciclo, hay diversas maneras de "insertar" nuestra plantilla de línea:
+
+### Versión escala
+
+Podemos utilizar a la variable `i` como el factor de una multiplicación, para que en cada iteración, `y` tome el valor correspondiente.
+
+En nuestro ejemplo, `y` sigue la secuencia *100, 200, 300, 400, 500*. Así que si `i` sigue la secuencia *1, 2, 3, 4, 5*, podemos multiplicarla por 100:
+
+```java
+// Variable y
+float y;
+
+// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
+for( int i=1; i<=5; i++){
+	y = i * 100; // i como factor
+	line( 0, y, 600, y ); // plantilla de línea
+}
+```
+
+### Versión acumulador
+
+Otra forma de conceptualizar lo que sucede, es establecer que en cada iteración de ciclo, la variable `y` aumenta 100 al valor que tenía previamente. Es decir, se comporta como acumulador.
+
+[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)
+
+Así que `y` ha de tener un valor inicial, y en cada iteración la incrementamos 100. En este caso no es crucial cuál es la secuencia que sigue `i`, puede ser *0, 1, 2, 3, 4* o *1, 2, 3, 4, 5*
+
+```java
+// Variable y, con valor inicial
+float y = 100;
+
+// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
+for( int i=1; i<=5; i++){
+	line( 0, y, 600, y ); // plantilla de línea
+	y = y + 100; // incrementa 100 al acumulador
+}
+```
+
+Como nota, la expresión de incremento del acumulador también puede escribirse:
+
+```java
+y += 100; // incrementa 100 al acumulador
+```
+
+### Versión mapeo
+
+Podemos utilizar la función `map( )`, que se encargará de realizar las cuentas de acuerdo a los valores de la variable `i`.
+
+Solo hay que tener claro cuál es el rango de `i` (valor mínimo y máximo), y cuál es el rango que le asignaremos a `y`:
+
+```java
+// Variable y
+float y;
+
+// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
+for( int i=1; i<=5; i++){
+	// mapea i, de un rango original entre 1 y 5
+	// a un rango entre 100 y 500
+	y = map( i, 1, 5, 100, 500);
+
+	line( 0, y, 600, y ); // plantilla de línea
+}
+```
+
+## Ciclo a partir de condición
+
+El ciclo `for` es muy flexible y nos permite tener comportamientos como los descritos arriba sin necesidad de variables extra.
+
+Podemos usar el ciclo para iterar directamente con la variable `y` de nuestra plantilla. Solo necesitamos identificar lo siguiente para nuestro caso:
+
+* **Valor inicial** de `y`: 100
+* **Condición "mientras"**: el ciclo se repetirá *mientras*: `y < 600` (o `y <= 500` )
+* **Incremento** o cambio en cada iteración: `y` aumenta 100
+
+Esto se traduce a:
+
+```java
+for( float y=100; y < 600; y = y + 100 ) {
+	line( 0, y, 600, y ); // plantilla de línea
+}
+```
+
+O un poco más conciso:
+
+```java
+for( float y=100; y < 600; y += 100 ) {
+	line( 0, y, 600, y ); // plantilla de línea
+}
+```
+
+## Estructura general
+
+Al final, si no usaremos animación e interacción, nuestro código puede quedar de la siguiente forma:
+
+```java
+// crea un lienzo de 600x600
+size( 600, 600 );
+
+// Agrega aquí el ciclo que prefieras
+
+// guarda imagen:
+save("lineas-paralelas.png");
+```
+
+O, usando la estructura del ciclo de animación `draw()`:
+
+```java
+void setup(){
+    // crea un lienzo de 600x600
+    size( 600, 600 );
+}
+
+void draw(){
+    // Agrega aquí el ciclo de dibujo que prefieras
+
+}
+```
+
+De cualquier forma, la imagen resultante se ve de la siguiente forma:
+
+![](/img/c2-patrones-lineas/05resultado.png)
+
+¡Listo! Ahora a practicar con otros patrones :)
diff --git a/src/tutoriales/footer.html b/src/tutoriales/footer.html
new file mode 100644
index 0000000..28dd87b
--- /dev/null
+++ b/src/tutoriales/footer.html
@@ -0,0 +1,6 @@
+<nav>
+<a href="/">🍃 jardínBit</a> | J.Vega 2021 | 
+<a href="https://instagram.com/jardinbit" target=_blank>@jardinbit</a> |
+<img src="/img/cc0_small.png" alt="CC0 Public Domain"/>
+<a href="https://kopimi.com/kopimi"><img src="/img/kopimi_square.png" alt="kopimi" height="20"/></a>
+</nav>
diff --git a/src/tutoriales/head.html b/src/tutoriales/head.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/tutoriales/head.html
diff --git a/src/tutoriales/nav.html b/src/tutoriales/nav.html
new file mode 100644
index 0000000..eb9f94b
--- /dev/null
+++ b/src/tutoriales/nav.html
@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>
author	sejo <sejo@texto-plano.xyz>	2021-05-24 17:31:42 -0500
committer	sejo <sejo@texto-plano.xyz>	2021-05-24 17:31:42 -0500
commit	a68ba2d63cc3abcd73c728c48eb14f34a2a7fb98 (patch)
tree	e159d5f35d9b1500a8d4c48c8cd303ecd908f9ac
download	jardinbit-a68ba2d63cc3abcd73c728c48eb14f34a2a7fb98.tar.gz