creación del repo
|
@ -0,0 +1 @@
|
||||||
|
archivos fuente y script generador del sitio jardinbit.neocities.org
|
|
@ -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ó!"
|
|
@ -0,0 +1,5 @@
|
||||||
|
verde oscuro #B3CC57
|
||||||
|
verde claro #ECF081
|
||||||
|
naranja #FFBE40
|
||||||
|
rosa #EF746F
|
||||||
|
moradito #AB3E5B
|
|
@ -0,0 +1 @@
|
||||||
|
🌟 U+1F31F
|
|
@ -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í!)
|
|
@ -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)
|
|
@ -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)
|
|
@ -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?
|
|
@ -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)
|
|
@ -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)
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
|
@ -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)
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
|
@ -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)
|
|
@ -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)
|
|
@ -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)
|
|
@ -0,0 +1,3 @@
|
||||||
|
<nav>
|
||||||
|
<a href="/">🍃 jardínBit</a>
|
||||||
|
</nav>
|
|
@ -0,0 +1 @@
|
||||||
|
<meta name="robots" content="noindex" />
|
|
@ -0,0 +1,3 @@
|
||||||
|
<nav>
|
||||||
|
<a href="/">🍃 jardínBit</a>
|
||||||
|
</nav>
|
|
@ -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>
|
|
@ -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>
|
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 4.9 KiB |
After Width: | Height: | Size: 73 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 897 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 887 B |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 39 KiB |
After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 1.0 KiB |
After Width: | Height: | Size: 6.3 KiB |
After Width: | Height: | Size: 95 KiB |
After Width: | Height: | Size: 59 KiB |
After Width: | Height: | Size: 319 B |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 5.9 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 6.0 KiB |
After Width: | Height: | Size: 9.4 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 826 B |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 155 KiB |
After Width: | Height: | Size: 170 KiB |
After Width: | Height: | Size: 138 KiB |
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 7.1 KiB |