creación del repo

README.txt

@@ -0,0 +1 @@
+archivos fuente y script generador del sitio jardinbit.neocities.org

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ó!"

colores.txt

@@ -0,0 +1,5 @@
+verde oscuro #B3CC57
+verde claro  #ECF081
+naranja      #FFBE40
+rosa         #EF746F
+moradito	#AB3E5B

estrella.txt

@@ -0,0 +1 @@
+🌟 U+1F31F

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í!)

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)

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)

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?

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)

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)

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)
+

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)

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)

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)
+

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)

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)

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)

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)

src/actividades/footer.html

@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>

src/actividades/head.html

@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />

src/actividades/nav.html

@@ -0,0 +1,3 @@
+<nav>
+<a href="/">🍃 jardínBit</a>
+</nav>

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>

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>