Diferencia entre revisiones de «Beatriz Díaz Proyecto - Imagen Escrita T1 2019»

De Casiopea
Sin resumen de edición
Línea 20: Línea 20:
En primer lugar se construye la clase Anillito, con esta estructura:
En primer lugar se construye la clase Anillito, con esta estructura:


{| class="wikitable"
''class Anillito {
''class Anillito {
   float x, y; // posición
   float x, y; // posición
Línea 25: Línea 26:
   color c;
   color c;
   float g; // grosor''
   float g; // grosor''
|}


Se definen variables determinadas de posición, radio, color y grosor. Luego se declaran respecto a la clase y se especifican los valores iniciales:
Se definen variables determinadas de posición, radio, color y grosor. Luego se declaran respecto a la clase y se especifican los valores iniciales:




   ''Anillito(float x, float y) {
   {| class="wikitable"
''Anillito(float x, float y) {
     this.x = x;
     this.x = x;
     this.y = y;
     this.y = y;
Línea 40: Línea 43:
     c = color(255);
     c = color(255);
   }''
   }''
|}


Después se especifica la función del movimiento, determinando el crecimiento de radio y grosor del anillo y la condición de seguimiento del centro generador sobre su función móvil definida por las variables ''xpos'' e ''ypos''
Después se especifica la función del movimiento, determinando el crecimiento de radio y grosor del anillo y la condición de seguimiento del centro generador sobre su función móvil definida por las variables ''xpos'' e ''ypos''


  ''void grow() {
{| class="wikitable"
''void grow() {
     r *= 1.027;
     r *= 1.027;
     g *= 1.027;
     g *= 1.027;
Línea 53: Línea 58:
          
          
   }''
   }''
|}


Después se declaran los parámetros de dibujo, en donde se define la forma del objeto creciente. En este caso, una elipse, sin rellenar, con un grosor de línea perimetral sujeta a la variable ''g''. ''Init'' indica la condición que debe lograr la elipse (anillo) para reiniciarse en el programa: cuando el radio es superior al doble del ancho se reinicia.
Después se declaran los parámetros de dibujo, en donde se define la forma del objeto creciente. En este caso, una elipse, sin rellenar, con un grosor de línea perimetral sujeta a la variable ''g''. ''Init'' indica la condición que debe lograr la elipse (anillo) para reiniciarse en el programa: cuando el radio es superior al doble del ancho se reinicia.


  ''void draw() {
{| class="wikitable"
''void draw() {
     noFill();
     noFill();
     stroke(c);
     stroke(c);
Línea 66: Línea 73:
   }
   }
}''
}''
|}


Luego de crear la clase Anillito, se repite el procedimiento para crear la cantidad de anillos que se desee. Sobre otra pestaña, se deben declarar las clases creadas que se quieren poner y definir las variables para las funciones que son ajenas al anillo, o sea, el sentido del movimiento circular del centro generador de anillos, y el color del fondo.  
Luego de crear la clase Anillito, se repite el procedimiento para crear la cantidad de anillos que se desee. Sobre otra pestaña, se deben declarar las clases creadas que se quieren poner y definir las variables para las funciones que son ajenas al anillo, o sea, el sentido del movimiento circular del centro generador de anillos, y el color del fondo.  




{| class="wikitable"
''Anillito6 f;
''Anillito6 f;


Línea 112: Línea 121:
   size(500, 500);
   size(500, 500);
}''
}''
|}


Tras definir las características del espacio de trabajo, se anotan las especificaciones para lograr el movimiento circular horario del centro, y se nombran las características de cada clase para traerlos al dibujo
Tras definir las características del espacio de trabajo, se anotan las especificaciones para lograr el movimiento circular horario del centro, y se nombran las características de cada clase para traerlos al dibujo


{| class="wikitable"
''void draw() {
''void draw() {
    
    
Línea 156: Línea 167:
}
}
''
''
|}


Para hacer que el loop sea interactivo al hacerle click, se debe indicar la variable de cambio en este apartado
Para hacer que el loop sea interactivo al hacerle click, se debe indicar la variable de cambio en este apartado


{| class="wikitable"
''void mousePressed() {
''void mousePressed() {
   bColor = color(random(255), random(255), random(255));
   bColor = color(random(255), random(255), random(255));
Línea 164: Línea 177:
    
    
}''
}''
|}

Revisión del 00:17 21 may 2019




TítuloProyecto Imagen Escrita
Del CursoImagen Escrita 2019 T1
CarrerasArquitectura
1
Alumno(s)Beatriz Díaz

Imagen objetivo:

idea y visualización de lo que se quiere lograr, idealmente un dibujo propio a mano alzada. La idea es hacer un loop o imagen de parámetros infinitos que "hipnotice" a quien la mira. Consiste en la creación de varios anillos que nacen de un centro y se agrandan hasta superar el límite del cuadrado de espacio visible, dando la sensación de estar atravesándolos por dentro.

Definición de una partida procedimental

Para lograr esto, se puede generar una clase predeterminada de anillo, que contenga valores de grosor, radio y color modificables para cada anillo, en la cual se aplica una función de crecimiento exponencial para que el anillo se agrande proporcionalmente en cada fps hasta salir del área visible de trabajo. Cuando esto ocurre, la idea es que se vuelva a reiniciar el movimiento desde el centro de generación de anillos. AL repetir esto para cada clase de Anillo, se aprecia una imagen continua de túnel. Además, con una función interactiva, al presionar el mouse, el fondo se cambia de color, y el giro del centro generador cambia de sentido (horario y antihorario)

Identificación de partes o componentes:

En primer lugar se construye la clase Anillito, con esta estructura:

class Anillito { float x, y; // posición float r; // radio color c; float g; // grosor

Se definen variables determinadas de posición, radio, color y grosor. Luego se declaran respecto a la clase y se especifican los valores iniciales:


Anillito(float x, float y) { this.x = x; this.y = y; init(); } void init() { g = 1; r = .1; c = color(255); }

Después se especifica la función del movimiento, determinando el crecimiento de radio y grosor del anillo y la condición de seguimiento del centro generador sobre su función móvil definida por las variables xpos e ypos

void grow() { r *= 1.027; g *= 1.027; } void move(float xpos, float ypos) { this.x = xpos; this.y= ypos; }

Después se declaran los parámetros de dibujo, en donde se define la forma del objeto creciente. En este caso, una elipse, sin rellenar, con un grosor de línea perimetral sujeta a la variable g. Init indica la condición que debe lograr la elipse (anillo) para reiniciarse en el programa: cuando el radio es superior al doble del ancho se reinicia.

void draw() { noFill(); stroke(c); strokeWeight(g); ellipse(x, y, r, r); if (r > width*2) { init(); } } }

Luego de crear la clase Anillito, se repite el procedimiento para crear la cantidad de anillos que se desee. Sobre otra pestaña, se deben declarar las clases creadas que se quieren poner y definir las variables para las funciones que son ajenas al anillo, o sea, el sentido del movimiento circular del centro generador de anillos, y el color del fondo.


Anillito6 f; Anillito5 e; Anillito7 g; Anillito a; Anillito2 b; Anillito3 c; Anillito4 d; float angle; float diametro = 100; float xpos, ypos; color bColor = color(255, 255, 255); int direccion = 1; void setup() { angle = TWO_PI; xpos = width/2; ypos= height/2; g = new Anillito7(xpos, ypos); f = new Anillito6(xpos, ypos); e = new Anillito5(xpos, ypos); a = new Anillito(xpos, ypos); b = new Anillito2(xpos, ypos); c = new Anillito3(xpos, ypos); d = new Anillito4(xpos, ypos); } public void settings() { size(500, 500); }

Tras definir las características del espacio de trabajo, se anotan las especificaciones para lograr el movimiento circular horario del centro, y se nombran las características de cada clase para traerlos al dibujo

void draw() { angle += direccion*0.03; //esto altera la velocidad del movimiento xpos = width/2 + cos(angle) * diametro; ypos = height/2 +sin(angle) * diametro; background(bColor); e.grow(); e.draw(); e.move(xpos, ypos); f.grow(); f.draw(); f.move(xpos, ypos); g.grow(); g.draw(); g.move(xpos, ypos); a.grow(); a.draw(); a.move(xpos, ypos); b.grow(); b.draw(); b.move(xpos, ypos); c.grow(); c.draw(); c.move(xpos, ypos); d.grow(); d.draw(); d.move(xpos, ypos); println(" grosor = "+b.g+"\t radio = "+b.r); }

Para hacer que el loop sea interactivo al hacerle click, se debe indicar la variable de cambio en este apartado

void mousePressed() { bColor = color(random(255), random(255), random(255)); direccion *= -1; }