Diferencia entre revisiones de «Imagen Escrita 2019 T1»

De Casiopea
 
(No se muestran 81 ediciones intermedias de 12 usuarios)
Línea 5: Línea 5:
|Talleres=ARQ 4º
|Talleres=ARQ 4º
|Profesores=Herbert Spencer
|Profesores=Herbert Spencer
|Alumnos=Sofía Soto, Ur Conejeros, Macarena Ramdohr, Eber Sáez, Cristóbal Carrillo, María Ignacia Morales, Marianne Welzel, Beatriz Díaz, Florencia Salgado, María Paz Zett, Valentina Véliz, Amelia Montt, Tomás Bustos, Constanza Bravo, Leonardo Maldonado, Felipe Ibarra, Gonzalo Gallo
|Alumnos=Sofía Soto, Ur Conejeros, Macarena Ramdohr, Eber Sáez, Cristóbal Carrillo, María Ignacia Morales, Marianne Welzel, Beatriz Díaz, Florencia Salgado, María Paz Zett, Valentina Véliz, Amelia Montt, Tomás Bustos, Constanza Bravo, Leonardo Maldonado, Felipe Ibarra, Gonzalo Gallo, Paloma Etchegaray
|Palabras Clave=processing, programación
|Palabras Clave=processing, programación
|Carreras Relacionadas=Arquitectura, Diseño
|Carreras Relacionadas=Arquitectura, Diseño
}}
}}
{{Proyecto
|Título=Gonzalo Gallo Proyecto chaotic drop
|Tipo de Proyecto=Proyecto de Curso
|Palabras Clave=Gonzalo, Gallo, chaotic, drop
|Año de Inicio=2019
|Año de Término=2019
|Carreras Relacionadas=Arquitectura
|Asignaturas Relacionadas=Imagen Escrita
|Cursos Relacionados=Imagen Escrita 2019 T1
|Profesor=Herbert Spencer
|Alumnos=Gonzalo Gallo
}}
=== Cronograma ===
=== Cronograma ===
* '''Clase 1''': 25/3
* '''Clase 1''': 25/3
Línea 46: Línea 59:


=== Proyectos ===
=== Proyectos ===
[[Archivo:3dmesh.gif|center]]


El proyecto consiste la puesta en práctica del pensamiento sistemático del algortimo a la definición de una imagen, una animación o una herramienta o aplicación interactiva. Para cada se tipo se propone un formato específico:
El proyecto consiste la puesta en práctica del pensamiento sistemático del algortimo a la definición de una imagen, una animación o una herramienta o aplicación interactiva. Para cada se tipo se propone un formato específico:
Línea 64: Línea 75:
[[Leonardo Maldonado - Proyecto Imagen Escrita 2019 T1]]
[[Leonardo Maldonado - Proyecto Imagen Escrita 2019 T1]]


[[http://chaleco.org/files/imagenEscrita/ Demo]]
[http://chaleco.org/files/imagenEscrita/ Demo (Processing.js)]


==== Amelia Montt ====
==== Amelia Montt ====
Línea 73: Línea 84:


==== Florencia Salgado ====
==== Florencia Salgado ====
'''Proyecto:''' Dibujo de mandala que cambia con el movimiento del mouse
'''Proyecto:''' Creación de archivo .gif final que plasma una figura basada en idea geométrica de un mandala que cambia de color y de forma. La figura obtenida se realiza desde movimiento del mouse en eje Y. 
 
[[Florencia Salgado Proyecto final - Imagen Escrita T1 2019]]
 
==== Paloma Ethegaray ====
'''Proyecto:''' con la lógica del reloj análogo crear un espiral que marque los segundos y minutos.
[[Paloma Etchegaray - Proyecto Imagen Escrita T1 2019]]
 
==== Sofia Soto ====
'''Proyecto:''' Crear un patrón final con unidad discreta que simule un suelo de baldosa.
 
*'''Dibujos para la unidad discreta'''
<gallery>
Archivo:Dibujo unidad baldosa processing.jpg
Archivo:Dibujo unidad baldosa processing 2 .jpg
Archivo:Dibujo unidad baldosa processing 3 .jpg
Archivo:Dibujo unidad baldosa processing 4 .jpg
</gallery>
 
*'''Imagen de processing '''
 
[[Archivo:Proyectofinalimagen escrita SS.png|500px|center]]
 
*'''Código explicado '''
 
Inspirandome en mi proyecto de titulo se quizo hacer un patrón, como las tramas que se observan en las baldosas, pero jugando con colores contrastados y opacidades.
 
*# 1. Prarámetros base
 
'''''size(600, 600);'''''
 
'''''smooth();'''''
 
'''''background(74, 94, 143);'''''
 
'''''stroke(247,156,64);'''''
 
*# 2. Le doi altura y ancho al triángulo y que se sobrepongan
 
'''''for (int y = 0; y <= height; y += 60) {'''''
 
'''''for (int x = 0; x <= width; x += 60) {'''''
   
*# 3. luego,establezco un color para los triangulos, jugando con su opacidad
 
'''''color anaranjado = color(171, 31,38);'''''
 
*# 4. fill(rgb, alpha) alpha= opacidad del fill.
 
'''''fill(anaranjado, 50); '''''
'''''triangle(x, y, x-45, y+90, x+45, y+90);'''''
 
'''''}'''''
'''''PImage img = createImage(100,100, RGB);'''''
 
'''''save("Proyectofinalimagen escrita.png");'''''
 
'''''}'''''


==== Felipe Ibarra ====
==== Felipe Ibarra ====
Línea 79: Línea 148:


==== Beatriz Díaz ====
==== Beatriz Díaz ====
'''Proyecto:''' Un loop visual con el efecto de túnel
'''Proyecto:''' Un loop visual con el efecto de túnel hecho por anillos blancos que atraviesan el área de trabajo y se reinician en un centro móvil.
 
[[Beatriz Díaz Proyecto - Imagen Escrita T1 2019]]
 
==== Macarena Ramdohr ====
'''PROYECTO''' crear una grilla que da la sensación de movimiento, a partir de círculos del mismo color del fondo que cubren partes de la grilla, al apretar tecla "s" se guarda una imagen del resultado
 
[[Archivo:Grilla macarena ramdohr.png|200x200px|miniaturadeimagen|centro]]
 
[[Macarena Ramdohr Proyecto - Imagen Escrita T1 2019]]


==== Constanza Bravo ====
==== Constanza Bravo ====
Proyecto de Constanza:  
[[Archivo:Imagen_escrita_Constanza.pdf]]
Crear figuras tipo flor moviles con distintas figuras geometricas


==== Valentina Véliz ====
==== Valentina Véliz ====
Línea 89: Línea 166:
Mostrar crecidas del humedal de Ciudad Abierta (en un rango de tiempo a determinar) a través de fotos unidas en un gif  
Mostrar crecidas del humedal de Ciudad Abierta (en un rango de tiempo a determinar) a través de fotos unidas en un gif  


[[Archivo:beachhouse.png]]


Similar a las visuales de este álbum de Beach House
==== Tomás Bustos ====
https://www.youtube.com/watch?v=Dyclbb_6Ycs&t=1955s
'''PROYECTO''' Pantalla de dibujo libre con un pincel oblicuo, que deja una trayectoria al mantener apretado el cursor, al cruzar distintas lineas se forma una pantalla de sombreado, mientras más lineas, mayor achurado. Posibilidad de cambios de color, cambio del angulo del pincel y volver al inicio. Al aumentar el espesor del trazo genera mas transparencia y una estela en la trayectoria y un movimiento angular cuando el cursor se mueve rápidamente.
 
[[Tomás Bustos Bravo]]-[[Tomás Bustos: Proyecto Imagen Escrita 2019]]
 
==== María Ignacia Morales ====
'''Proyecto:''' mostrar recorridos para una exposición en el patio de la escuela.
 
==== Ur Conejeros ====
'''Proyecto:''' recrear juego tipo snake
 
[[Ur Conejeros - Proyecto Imagen Escrita 2019 T1]]
 
==== Eber Sáez ====
Proyecto: Representación del comportamiento de la luz al encontrarse con distintos objetos. Se puede aplicar para estudiar la luz del sol que entra a un edificio a lo largo del año con distintos ángulos de incidencia.
 
[[Eber Sáez proyecto Luz]]
 
==== Gonzalo Gallo ====
'''Proyecto:'''  cuadro de proyeccion en cual objetos lineales caen en forma aleatoria constantemente, al presionar 'k' congela la imagen de la consola, con un fondo en negativo, dejando en evidencia la posicion de aquellos objetos, que emularían un cuadro de Sol Lewitt


==== Tomás Bustos ====
COD: //random Drop
'''PROYECTO''' Pantalla de dibujo desde el achurado
// (21, 241, 173)
// (230, 230, 250)  //  background
 
Drop[] drops = new Drop[500];  //se define el drop en pagina adjunta
float drop;
void setup() {
  size(640, 360);
 
  for (int i = 0; i < drops.length; i++) {
  drops[i] = new Drop();
 
  }
}
 
void draw(){
  background(230, 230, 250);
 
 
  if (mousePressed) // condicion para dar inicio
for (int i = 0; i < drops.length; i++) {
  drops[i].fall();
  drops[i]. show();
  }
}
void keyPressed(){
background(50); //se dibuja fondo en negativo
  if (key == 'k');
for (int i = 0; i < drops.length; i++) {
  drops[i].fall();
  drops[i]. show(); // intente generar la imagen para cuando se apretase 'k' pero solo guarda la imagen 1 seg.
  }
}
<pagina adjunta> ' drop' :  // se define el objeto lineal en cuestion al caer y sus variables.
class Drop {
  float x = random(width);
  float y = random(-500,-50);
  float z = random(0, 20);
  float len = map(z, 0, 20, 10, 20);
  float yspeed = map(z, 0, 20, 4, 10);
  void fall() {
    y = y + yspeed;
    yspeed = yspeed + 0.2;
   
    if (y > height) {
      y = random(-200,-100);
      yspeed = map(z, 0, 20, 4, 10);
    }
 
  }
 
  void show() {
    float thick = map(z, 0, 20, 1, 3);
    strokeWeight(thick);
    stroke(21, 241, 173);
    line(x,y,x,y+len);
  }


=== GIFs Animados ===
=== GIFs Animados ===
Línea 103: Línea 253:
Archivo:Amelia tarea3.gif|Amelia Montt
Archivo:Amelia tarea3.gif|Amelia Montt
Archivo:Tarea3-lmaldonadoh.gif|Leonardo Maldonado
Archivo:Tarea3-lmaldonadoh.gif|Leonardo Maldonado
Archivo:Output BTXAa5.gif| María Ignacia Morales
Archivo:Ellipse processing SS .gif| Sofia Soto
Archivo:Tarea _gif0749.gif| Eber Sáez
Archivo:Fsalgado_gif_IE2019.gif|Florencia Salgado
Archivo:UConejeros_gif_-_IE2019T1.gif|Ur Conejeros
Archivo:Bounceball.gif|Gonzalo Gallo
Archivo:Prueba_1.gif| Macarena Ramdohr
</gallery>
</gallery>



Revisión actual - 12:01 28 ago 2019



Asignatura(s)Imagen Escrita
Año2019
Tipo de CursoRamo Lectivo, Otro
TalleresARQ 4º
ProfesoresHerbert Spencer
EstudiantesSofía Soto, Ur Conejeros, Macarena Ramdohr, Eber Sáez, Cristóbal Carrillo, María Ignacia Morales, Marianne Welzel, Beatriz Díaz, Florencia Salgado, María Paz Zett, Valentina Véliz, Amelia Montt, Tomás Bustos, Constanza Bravo, Leonardo Maldonado, Felipe Ibarra, Gonzalo Gallo, Paloma Etchegaray
Palabras Claveprocessing, programación
Carreras RelacionadasArquitectura, Diseño

Estudiantes


TítuloGonzalo Gallo Proyecto chaotic drop
Tipo de ProyectoProyecto de Curso
Palabras ClaveGonzalo, Gallo, chaotic, drop
Período2019-2019
AsignaturaImagen Escrita
Del CursoImagen Escrita 2019 T1
CarrerasArquitectura
Alumno(s)Gonzalo Gallo
ProfesorHerbert Spencer


Cronograma

  • Clase 1: 25/3
    • Presentación al curso y a las herramientas
    • Estructura de un programa
    • variables y condicionales
  • Clase 2: 1/4 - Horario especial 9:00
    • Ciclos for
    • Dibujo de curvas matemáticas
    • Funciones de dibujo y color
      • fill(), stroke();
      • strokeWeight(); // grosor
      • point, line, ellipse, rect, triagle, etc.
      • beginShape(), endShape(), vertex();
  • Clase 3: 8/4
    • Arreglos
    • Transformaciones espaciales
    • Funciones personalizadas
      • Tarea: Tener la carpeta sincronizada con al menos:
        • Un ejemplo de dibujo simple (trazo, color)
        • Un ejemplo de dibujo con repetición
        • Un gif animado (300, 300)
  • Clase 4: 15/4 -
    • funciones propias
    • recursión
    • objetos
      • Tarea: Interpretar un trabajo del artista Sol Lewitt en Processing
  • Clase 5: 22/4 -
    • Semana universitaria
  • Clase 6: 29/4 -
    • objetos, parte 2
    • concepto de emergencia de sistemas simples
  • Clase 7: 6/5 -
  • Clase 8: 13/5 -
  • Clase 9: 20/5 -
    • Publicación y entrega de proyectos

Proyectos

El proyecto consiste la puesta en práctica del pensamiento sistemático del algortimo a la definición de una imagen, una animación o una herramienta o aplicación interactiva. Para cada se tipo se propone un formato específico:

  1. Una imagen estática: formato PDF
  2. Una animación: formato GIF animado
  3. Una aplicación: app exportada desde Processing

El proyecto debe considerar, a grandes trazos, la siguiente estructura:

  • Imagen objetivo: idea y visualización de lo que se quiere lograr, idealmente un dibujo propio a mano alzada.
  • Definición de una partida procedimental
  • Identificación de partes o componentes: objetos

Leonardo Maldonado

Proyecto: un pseudo-juego de plataformas, que permita desplazar y hacer saltar un "personaje" en el plano 2d.

Leonardo Maldonado - Proyecto Imagen Escrita 2019 T1

Demo (Processing.js)

Amelia Montt

PROYECTO Mostrar el ciclo de la luna

María Paz Zett

Proyecto:Dos imagenes de medusas, una más pequeña y otra más grande suben hasta quedarse estancadas en el tope de arriba.

Florencia Salgado

Proyecto: Creación de archivo .gif final que plasma una figura basada en idea geométrica de un mandala que cambia de color y de forma. La figura obtenida se realiza desde movimiento del mouse en eje Y.

Florencia Salgado Proyecto final - Imagen Escrita T1 2019

Paloma Ethegaray

Proyecto: con la lógica del reloj análogo crear un espiral que marque los segundos y minutos. Paloma Etchegaray - Proyecto Imagen Escrita T1 2019

Sofia Soto

Proyecto: Crear un patrón final con unidad discreta que simule un suelo de baldosa.

  • Dibujos para la unidad discreta
  • Imagen de processing
Proyectofinalimagen escrita SS.png
  • Código explicado

Inspirandome en mi proyecto de titulo se quizo hacer un patrón, como las tramas que se observan en las baldosas, pero jugando con colores contrastados y opacidades.

    1. 1. Prarámetros base

size(600, 600);

smooth();

background(74, 94, 143);

stroke(247,156,64);

    1. 2. Le doi altura y ancho al triángulo y que se sobrepongan

for (int y = 0; y <= height; y += 60) {

for (int x = 0; x <= width; x += 60) {

    1. 3. luego,establezco un color para los triangulos, jugando con su opacidad

color anaranjado = color(171, 31,38);

    1. 4. fill(rgb, alpha) alpha= opacidad del fill.

fill(anaranjado, 50); triangle(x, y, x-45, y+90, x+45, y+90);

}

PImage img = createImage(100,100, RGB);

save("Proyectofinalimagen escrita.png");

}

Felipe Ibarra

Proyecto: Hacer una escalera infinita, donde sus peldaños, en secuencia vaya apareciendo una profundidad, donde la cámara vaya siguiendo el rumbo mientras se extiende, de manera que la escalera no alcance el ancho de la "pantalla".

Beatriz Díaz

Proyecto: Un loop visual con el efecto de túnel hecho por anillos blancos que atraviesan el área de trabajo y se reinician en un centro móvil.

Beatriz Díaz Proyecto - Imagen Escrita T1 2019

Macarena Ramdohr

PROYECTO crear una grilla que da la sensación de movimiento, a partir de círculos del mismo color del fondo que cubren partes de la grilla, al apretar tecla "s" se guarda una imagen del resultado

Grilla macarena ramdohr.png

Macarena Ramdohr Proyecto - Imagen Escrita T1 2019

Constanza Bravo

Archivo:Imagen escrita Constanza.pdf

Valentina Véliz

Proyecto : Mostrar crecidas del humedal de Ciudad Abierta (en un rango de tiempo a determinar) a través de fotos unidas en un gif


Tomás Bustos

PROYECTO Pantalla de dibujo libre con un pincel oblicuo, que deja una trayectoria al mantener apretado el cursor, al cruzar distintas lineas se forma una pantalla de sombreado, mientras más lineas, mayor achurado. Posibilidad de cambios de color, cambio del angulo del pincel y volver al inicio. Al aumentar el espesor del trazo genera mas transparencia y una estela en la trayectoria y un movimiento angular cuando el cursor se mueve rápidamente.

Tomás Bustos Bravo-Tomás Bustos: Proyecto Imagen Escrita 2019

María Ignacia Morales

Proyecto: mostrar recorridos para una exposición en el patio de la escuela.

Ur Conejeros

Proyecto: recrear juego tipo snake

Ur Conejeros - Proyecto Imagen Escrita 2019 T1

Eber Sáez

Proyecto: Representación del comportamiento de la luz al encontrarse con distintos objetos. Se puede aplicar para estudiar la luz del sol que entra a un edificio a lo largo del año con distintos ángulos de incidencia.

Eber Sáez proyecto Luz

Gonzalo Gallo

Proyecto: cuadro de proyeccion en cual objetos lineales caen en forma aleatoria constantemente, al presionar 'k' congela la imagen de la consola, con un fondo en negativo, dejando en evidencia la posicion de aquellos objetos, que emularían un cuadro de Sol Lewitt

COD: //random Drop // (21, 241, 173) // (230, 230, 250) // background

Drop[] drops = new Drop[500];   //se define el drop en pagina adjunta 
float drop;

void setup() {

 size(640, 360);
  
 for (int i = 0; i < drops.length; i++) {
 drops[i] = new Drop();
 }

}

void draw(){

 background(230, 230, 250);


 if (mousePressed) // condicion para dar inicio

for (int i = 0; i < drops.length; i++) {

 drops[i].fall();
 drops[i]. show();
 }

}

void keyPressed(){

background(50); //se dibuja fondo en negativo

 if (key == 'k'); 

for (int i = 0; i < drops.length; i++) {

 drops[i].fall();
 drops[i]. show(); // intente generar la imagen para cuando se apretase 'k' pero solo guarda la imagen 1 seg.

 }

} <pagina adjunta> ' drop' : // se define el objeto lineal en cuestion al caer y sus variables. class Drop {

 float x = random(width);
 float y = random(-500,-50);
 float z = random(0, 20);
 float len = map(z, 0, 20, 10, 20);
 float yspeed = map(z, 0, 20, 4, 10);
 void fall() {
   y = y + yspeed;
   yspeed = yspeed + 0.2;
   
   if (y > height) {
     y = random(-200,-100);
     yspeed = map(z, 0, 20, 4, 10);
   }
 
 }
 
 void show() {
   float thick = map(z, 0, 20, 1, 3);
   strokeWeight(thick); 
   stroke(21, 241, 173);
   line(x,y,x,y+len);
 }

GIFs Animados

Herramientas

Bibliografía

  1. Processing: A Programming Handbook for Visual Designers and Artists
  2. The Nature of Code. Daniel Shiffman
  3. The Art Of Computer Designing: A Black and White Approach
  4. Eloquent Javascript
  5. Fundamentos de Programación
  6. Generative Gestaltung
  7. Curso de Programación Creativa, Herbert Spencer, Gitbub.
  8. Bees & Bombs
  9. The Coding Train, YouTube Channel
  10. Process Compendium, Casey Reas