Valentina Leiva: IE 2021
| Título | Imagen Escrita |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Del Curso | Imagen Escrita 2021 |
| Carreras | Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Valentina Leiva |
| URL | https://vleivacespedess.github.io/IE2021/ |
Imágen Escrita.
Valentina Leiva, 2021.
Encargo 1: Acercamiento con P5js (09/08)
Ejercicios: Del libro "Introducción a p5.js." y hechos en clases.
Ejercicio interactivo del libro "Introducción a p5.js."
Preview
[2] Link al ejercicio.
Ejercicios hechos en clases.
Clase II (16/08)
Se trabajó a partir de la reconstrucción de obras de Sol Lewitt en p5.js.
"10,000 random straight lines about four inches long".
Preview
[3] Link al ejercicio.
Encargo 2: Recreación de obra de Sol Lewitt.
Recreación de obra de Sol Lewitt.
Preview
Nombre: Colors from Corners.
Autor: Sol LeWitt.
Fuente: [4] WikiArt, enciclopedia de Artes Visuales.
[5] Link al ejercicio.
Encargo 3. Interactividad con sliders.
Encargo 4. Función recursiva.
Encargo 5. Función recursiva 2.
Encargo 7. Función "Boid y Noise".
Ejercicio con Boid y Noise.
Versión 1 (Sin Noise).
Preview.
- Presiona el mouse para lanzar las bolitas.
- Modifica el color de las bolitas y el fondo con los cuadros inferiores.
Link al editor. [10]
Versión 2 (Con Noise).
Preview.
- Presiona el mouse para lanzar las bolitas.
- Modifica el color de las bolitas y el fondo con los cuadros inferiores.
Link al editor. [11]
Encargo 8. Herramienta de animación.
Herramienta de animación.
Preview.
- Slider 2: Modifica el tamaño de los círculos.
Link al editor. [12]
Encargo 9. Ejercicio con "Stamps".
Ejercicio con Timbres.
Preview.
- Presiona el mouse para colocar timbres.
- Presiona "enter" para restaurar y volver el fondo negro.
- Presiona "b" para restaurar y cambiar al fondo rojo.
Slider 1: Tamaño del cículo.
Slider 2: Tamaño del cuadrado.
Slider 3: Tamaño del ancho del cuadrado (convertirlo en rectángulo).
Link al editor. [13]
Proyecto Final: Gráfica Vaporwave 3D.
Proyecto Final: Gráfica Vaporwave 3D.
Preview.
Recogiendo la estética "vaporwave" como objeto de inspiración, se trabajó en una gráfica generativa 3D con cualidades interactivas por medio de sliders, pudiendo modificar la altura, la velocidad y el sentido del vuelo sobre un terreno montañoso, así como también la altura de las montañas. Los colores de los elementos compositivos de la gráfica son igualmente modificables.
- Slider 1: Altura de vuelo.
- Slider 2: Velocidad del vuelo. Al deslizar hacia la izquierda va hacia atrás y al deslizar hacia la dercha va hacia adelante.
- Slider 3: Altura de las montañas.
Link al editor. [14]
Link a repositorio web. [15]
Proceso constructivo.
Malla de trángulos.
En primera instancia se generó un patrón de trángulos en dos dimensiones, generando una especie de malla que posteriormente sería utilizada como base para codificar en tres dimensiones. Esto se logró con la función de beginShape (TRIANGLE_STRIP) y las variables personalizadas de "columnas", "filas", "w" y "h" (weight, height). Además se definió un valor equivalente a 20.
Link al editor. [16]
Malla de triángulos 3D.
La malla de un triángulos se transformó a un formato de tres dimensiones, agregando un grado de rotación estándar de 60°, o bien PI/3. Esto dió como resultado la generación de un terreno plano en perspectiva. Además de esto, se le aplicó una traslación de (-w/2, -h/2), para ubicar así el plano al centro del bosquejo.
Link al editor. [17]
Terreno Vaporwave 3D: versión inmóvil.
Se implementó un arreglo (vaporwave = [];) para darle relieve a la malla de triámgulos. Generando así una especie textura de colinas tridimensionales, esto a partir de ciclos for y el comando "random".
Link al editor. [18]
Terreno Vaporwave 3D + Noise.
Se añadió la función "noise" y la variable personalizada "movimiento" para darle dinamismo al terreno 3D, estableciendo los parámetros estándar de -100 y 100 que serían posteriormente modificables por medio de sliders.
Link al editor. [19]
Resultado Final.
Se añadieron sliders interactivos para modificar los valores correspondientes a la altua, el sentido y la valeocidad del vuelo, así como también la altura de las montañas que conforman la composición. Además de esto, el código fue modificado gráficamente en base a la estética "vaporwave", guiándose por colores azules y rosas de alto contraste, pero igualmente modificables a través de cuadros de "createInput".
Link al editor. [20]
Imágenes de referencia.
bkjbk.png)
.jpg)
.jpg)
ghjkFHGH.jpg)
