Beatriz Díaz Proyecto - Imagen Escrita T1 2019

De Casiopea




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

Imagen objetivo:

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.

IE bea.png
IE bea2.png
IE bea3.png

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;
 

}