notas exportar

src/actividades/c3-transformando-oscilaciones.md

@@ -0,0 +1,106 @@
+---
+title: "Reto: Transformando Oscilaciones"
+---
+
+# Descripción
+
+Desarrolla una composición visual basada en la repetición de un elemento gráfico, donde cada instancia de ese elemento tenga un aspecto y/o comportamiento distinto pero relacionado al de sus vecinos.
+
+Plantea la repetición utilizando expresiones de ciclo `for`, e invoca funciones trigonométricas (`sin()`, `cos()`) y/o de *noise* (`noise()`) para darle a cada elemento su aspecto y/o comportamiento distinto.
+
+Obtén al menos tres variaciones distintas modificando parámetros numéricos de tu código.
+
+Considera la aplicación de la composición visual: ¿es una portada de libro? ¿un póster? ¿el prototipo de un muro animado y/o interactivo?
+
+## Parámetros
+
+Considera que el *aspecto y/o comportamiento distinto* de cada elemento lo puedes realizar a partir de las siguientes cantidades, estáticas o en movimiento:
+
+* Posiciones
+* Dimensiones
+* Ángulo(s) de rotación
+* Colores
+* Cantidad de componentes (e.g. cantidad de vueltas de espiral, cantidad de picos de estrella)
+* etc
+
+## Repetición
+
+Algunas ideas para ordentar tu elemento usando repetición:
+
+* Fila
+* Cuadrícula
+* Cuadrícula desfasada
+* Aleatoria
+* Alrededor de un punto
+* y más...
+
+# Entrega
+
+## Avances
+
+Comparte en el canal *#workshop* tus avances de cada día, siguiendo el cronograma especificado debajo.
+
+Incluye lo siguiente, según aplique:
+
+* Referencias visuales / Análogo
+* Boceto(s) realizados
+* Resultados visuales: Capturas y/o grabaciones de pantalla
+* Descripción de tu proceso: cuáles eran tus objetivos, qué pudiste lograr, qué *obstáculos* y *hallazgos* encontraste, cómo te sentiste.
+* Código fuente (formatéalo escribiendo \`\`\` antes y después del código) 
+* Dudas que tengas
+
+## Final
+
+Cuando termines tu composición, compártela en el canal *#showroom*:
+
+* Imágenes resultantes
+* Título
+* Breve descripción
+
+## Retroalimentación
+
+Comenta, pregunta y/o agrega *reacciones* a las publicaciones de las demás!
+
+# Cronograma
+
+Tendremos cinco sesiones para realizar el reto.
+
+Los temas que revisaremos en cada una son:
+
+1. Repaso y posibilidades de **repetición** con más de una variable (**cuadrículas**, **gradientes**)
+2. **Oscilación** y funciones **trigonométricas**
+3. Aleatorio pero continuo: **noise()**
+4. **Coordenadas polares**
+5. Integración
+
+Los avances a lograr en cada sesión son:
+
+1. Prototipo de *layout* general, con cuadrículas y gradientes
+2. Experimenta implementando oscilación a tu composición:
+	- Busca que cada elemento tenga un aspecto y/o comportamiento distinto pero relacionado a sus vecinos
+3. Experimenta implementando *noise* a tu composición, en lugar o además de la oscilación:
+	- Busca que cada elemento tenga un aspecto y/o comportamiento distinto pero relacionado a sus vecinos
+4. Experimenta con coordenadas polares, ya sea con figuras u ordenamientos construidas con ellas
+5. Completa y documenta tu composición con sus variaciones
+
+# Notas relevantes
+
+## Repetición
+
+* [[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)
+* [[Gradientes de color]](/notas/gradientes.html)
+
+## Oscilación
+
+* [[Ángulos en radianes]](/notas/angulos.html)
+* [[Funciones trigonométricas]](/notas/trig.html)
+* [[Coordenadas polares]](/notas/coordenadas-polares.html)
+
+## Animación
+
+* [[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)
+* [[Animación básica con acumuladores]](/notas/animacion-basica.html)
+
+

src/index.md

@@ -15,6 +15,7 @@ title: "🍃 jardínBit"
 * [[Dibujo con figuras]](/notas/figuras.html)
 * [[Color]](/notas/color.html)
 * [[Notas sobre sintaxis]](/notas/sintaxis.html)
+* [[Exportar a diferentes formatos]](/notas/exportar.html)
 
 ### Polígonos, transformaciones y funciones
 

src/notas/exportar.md

@@ -0,0 +1,118 @@
+---
+title: "Exportar a diferentes formatos"
+---
+
+Lo que creamos en Processing puede salir del lienzo en diferentes formatos descritos a continuación.
+
+# Mapa de bits (PNG)
+
+La función `save()` o `saveFrame()` nos permiten guardar
+
+## Modo estático
+
+En este modo, podemos concluir nuestro sketch con una de estas funciones, y `exit()`:
+
+```java
+size(500, 500);
+background(0);
+stroke(255);
+ellipse( width/2, height/2, 100, 100);
+
+save("imagen.png");
+exit();
+```
+
+## Modo dinámico
+
+Al utilizar `setup()` y `draw()`, conviene utilizar algún mecanismo para solo guardar el cuadro de animación que queremos, y no toda la secuencia (ve abajo en Video para ver cómo conviene guardar toda la secuencia)
+
+```java
+// guarda imagen al dar click en el lienzo
+
+void setup(){
+  size( 500, 500 );
+}
+void draw(){
+  // dibuja aquí
+}
+
+void mousePressed(){
+  // guarda un archivo donde #### se reemplaza por el número de frame
+  saveFrame("frame-####.png");
+}
+```
+
+En ocasiones, en vez de querer utilizar el número de frame, conviene más guardar el archivo con la fecha y hora de captura. En esos casos, reemplazaríamos `saveFrame()` con:
+
+```java
+// guarda un archivo en formato captura-YYYYMMDD-HHmmss.png
+save( String.format("captura-%04d%02d%02d-%02d%02d%02d.png", year(), month(), day(), hour(), minute(), second() ) );
+```
+
+
+# Vectores (SVG)
+
+Podemos exportar en `.svg` para utilizar las figuras en software de dibujo con vectores, reemplazando la función `size()` por una con más argumentos:
+
+```java
+import processing.svg.*;
+
+void setup() {
+  size(400, 400, SVG, "archivo.svg");
+}
+
+void draw() {
+  // dibuja
+  noFill();
+  ellipse(width/2, height/2, 150, 150);
+  ellipse(width/2, height/2, 50, 50);
+
+  // Termina y cierra el programa
+  exit();
+}
+```
+
+Hay más formas de exportar en SVG que pueden verse en [SVG \ Libraries \ Processing.org](https://processing.org/reference/libraries/svg/index.html)
+
+# Video
+
+La forma para capturar video desde Processing consiste en primero exportar los cuadros (*frames*) de animación, y luego convertirlas a un video.
+
+## Exporta frames
+
+Parecido a lo mostrado arriba para mapa de bits, pero aquí se guardan todas las frames. Toma en cuenta que este proceso puede alentar a tu *sketch*; la recomendación es que primero lo desarolles, y ya que esté listo entonces lo grabes.
+
+El `if()` que se incluye hace que solo se guarden las primeras 300 *frames*; lo puedes quitar o modificar si así lo deseas.
+
+```java
+void setup(){
+  size(500, 500);
+}
+
+void draw(){
+  // dibuja aquí
+
+
+  // si estamos en las primeras 300 frames
+  if(frameCount <= 300 ){
+    // guarda frame
+    saveFrame("frames/frame-####.png");
+  }
+}
+```
+
+El formato `.png` tarda más en guardarse pero las imágenes pesan menos. Si prefieres más rapidez al guardar, usa el formato `.tif` o `.tga`.
+
+## Convierte a video
+
+Los cuadros de animación que exportaste, reproducidos a 60 frames por segundo, corresponderán a la velocidad de tu sketch.
+
+Processing tiene una herramienta incluida para convertir un conjunto de imágenes exportadas de esta forma, a un video.
+
+* Ve al menú *Herramientas -> Creador de películas* (*Tools -> Movie Maker*).
+* Agrega tu carpeta de cuadros exportados en el formulario correspondiente.
+* Configura los parámetros del video que desees: dimensiones e imágenes por segundo (60)
+* Opcionalmente agrega algún archivo de sonido
+* Crea el archivo de video, que será tipo `.mov`, escogiendo en dónde guardarlo
+
+Nota que también puedes usar otras herramientas de video para ensamblar estos cuadros de animación.

src/notas/trig.md

@@ -14,7 +14,7 @@ tan( a ) <-> y/x
 
 [[Ángulos en radianes]](/notas/angulos.html)
 
-## Seno y coseno
+# Seno y coseno
 
 Estas dos funciones son periódicas y tienen un rango de resultados entre -1 y 1.
 
@@ -24,7 +24,7 @@ Suelen usarse para generar comportamientos oscilatorios y para trabajar con *coo
 
 Las dos funciones tienen la misma forma pero están desfasadas por `HALF_PI`.
 
-### En función del espacio
+## En función del espacio
 
 Estos ejemplos utilizan ciclos `for` para dibujar un conjunto de puntos.
 
@@ -103,7 +103,7 @@ for(float x=0; x<=width; x++){
 
 ![](/img/sin4.png)
 
-### En función del tiempo 
+## En función del tiempo 
 
 Estos ejemplos utilizan el ciclo de animación para funcionar.
 
@@ -136,8 +136,3 @@ void draw(){
 * [[Mapeo/conversión de valores]](/notas/map.html)
 
 *Nota: si bien frameCount sigue incrementándose más allá de 300, la función `map()` se encarga de seguirlo convirtiendo con la misma relación de 300 frames a `TWO_PI`*
-
-
-# Notas que enlazan aquí
-
-* [[Coordenadas polares]](/notas/coordenadas-polares.html)