VinoZeta nos pide etiquetas personalizadas

¡Hola!

En esta oportunidad les comparto un poco del proceso creativo que dio lugar a estas etiquetas  generativas, diseñadas para las botellas de la marca VinoZeta.

 

En mi planteamiento, quise respetar la petición del cliente y hacer mi propia propuesta siguiendo los mismos
lineamientos: ajustarme en la medida de lo posible al diseño de la etiqueta, pero integrando un imagen generativa,
única para cada cliente, que simule el humo y sus movimientos vaporosos.

Así pues, del caso propuesto mantuve la estructura de la etiqueta, dejando un espacio al lado izquierdo, reservado para
los datos de fabricación del vino, el número de serie de la botella, los datos de la marca e información del grado
alcohólico. La porción del lado derecho de la etiqueta, que ocupa la mayor parte, es la destinada a la imagen generada.
Así pues, la primera parte del proceso fue planificar cómo iba a aplicar los datos de una tabla a mi diseño generativo.
Primero quise implementar la idea de crear una semilla única para cada cliente, siendo esta un número de muchos
caracteres (elemento de tipo long en Java), y a partir de ahí empecé a trabajar mi idea. Lo primero fue crear la tabla con
mis datos de ejemplo, con una columna para cada dato: Nombre del comprador, Apellidos, Añada del vino, Número de
serie de la botella y Número del pedido; trabajando también con un dato extra, el número de botellas de un pedido, que
aunque no aparece de manera explícita en la tabla, podemos obtenerlo a través de la cantidad de filas con un mismo
número de pedido.

En cuanto al aspecto del diseño, si bien tenía claro que quería incorporar el uso de formas como agentes o walkers para
lograr el aspecto vaporoso, también quería adaptar la imagen de la uva como concepto ligado al vino, por lo que pensé
que sería buena idea mapear alguno de los datos de la tabla a la cantidad de uvas presentes en un racimo, que primero
se dibujaría en pantalla y luego sus uvas, en el papel de agentes, se desplazarían dentro del área de la imagen para
generar las virutas de humo. Con esta idea en mente me planteé que, para trabajar con una semilla, debía destinar
partes de su extensión a un fin en concreto: por ejemplo, una primera cantidad de números determinaría la cantidad de
uvas presentes en el racimo, otro grupo de números de la semilla determinaría la cantidad de colores presentes en la
paleta, otro grupo los ángulos de la trayectoria de los agentes, y así sucesivamente.

Con esta base, comencé a trabajar, primero que nada extrayendo los datos de la tabla para construir mi objeto del
cliente, y así poder acceder a los datos de forma más fácil. Fue a medida que iba construyendo el objeto y sus métodos,
pensando cómo aplicar los datos a lo agentes, que decidí descartar la opción de una semilla tan extensa y en cambio
apliqué varios datos de un cliente a diferentes aspectos de los agentes, como explico a continuación:
La suma de los valores unicode del nombre completo (nombre + apellidos) determinarían la paleta de colores, única
para el cliente.

La cantidad de botellas de un pedido indicarían la cantidad de vértices presentes en la forma del agente, con un
mínimo de 3 vértices para pedidos de menos de tres botellas, así como también determinarían la cantidad de
agentes generados. Esto permite que la forma obtenida por el programa también sea personalizada según el
número de botellas del pedido.

El promedio de los dos últimos dos dígitos del número de serie de la/s botella/s del pedido se mapean para obtener
la dimensión del radio de los agentes.

También se barajaron otras ideas como, por ejemplo, utilizar la añada de alguna manera para determinar la velocidad
de los agentes, o la saturación de los colores en caso de utilizar una paleta de colores fija; sin embargo, en etapas más
avanzadas y a medida que se iba experimentando con el comportamiento del diseño, estas ideas se descartaron, ya
fuera porque complicaban el programa sin necesidad, o porque simplemente su uso no tenía cabida dentro del
comportamiento o estética deseados.

Con estas reglas en mente, creé los métodos del objeto Cliente (Customer) que me permitieran almacenar esos datos,
así como el objeto Agente (Agent), que recibiría al objeto anterior para crear los agentes a medida.

Diría que el desafío más grande vino dado por la creación y manipulación de los agentes, donde los recursos del caso de
estudio disponibles en OpenProcessing.org y la sección “Shapes from Agents” del libro Generative Design Revised
fueron esenciales para el desarrollo del comportamiento de los agentes. El lograr los valores correctos para la velocidad,
el movimiento, el tamaño, y saber de dónde se obtenían, fue un desafío, ya que a pesar de que esto se había definido
desde un principio, en muchos casos la teoría no funcionaba en la práctica. Otro de los retos fue asegurarme de que, si
bien es necesaria cierta aleatoriedad para poder generar este tipo de imágenes, era preciso poder distinguir los gráficos
generados para un cliente u otro, ya que este era el objetivo real del proceso, y por eso había cierto peligro en recurrir en
exceso al factor aleatorio, y no a los datos externos de la tabla. Asimismo, después de hacer varias pruebas, me pareció
que el generar varios agentes recargaba en exceso el diseño, así que acabé por descartar la idea y utilicé uno solo.
Así pues, mi planteamiento inicial cambió mucho a lo largo del proceso, pero estoy satisfecha con los resultados
obtenidos, que comparto a continuación.

 

Este proceso ha sido especialmente interesante para poder entender cómo se pueden utilizar datos externos en un
diseño generativo, la complejidad de esta traducción entre datos y gráficos, y cómo el manejo de la información con la
que trabajamos es crucial en la definición del resultado de nuestro diseño. Diría que los desafíos más complicados del
proyecto han sido:

  • Adaptar la información al diseño que el cliente ha solicitado, sabiendo cómo mapearla de forma que sea útil en la
    generación de nuestra imágenes, y permitiendo que cada imagen generada sea diferente de la anterior, pero
    identificable a la vez.
  • Mantener el orden al momento de asignar valores de datos externos a valores dentro de nuestro algoritmo
    generativo. Esto es así porque, cuando se trabaja con varios datos a la vez y mientras hacemos pruebas, es fácil
    olvidar para qué sirve un dato en específico, o no utilizar datos que pensábamos que serían necesarios durante las
    etapas de planificación, lo que puede resultar en código verboso.

En general, he quedado bastante contenta con el resultado 🙂

¿Y a ti, qué te parece?

Diseño Generativo de un Cartel

¡Hola! 🙂

En esta oportunidad me gustaría compartir mi primer proyecto de diseño generativo, que fue desarrollado para la segunda entrega de la asignatura homónima.

Para este encargo, se pidió analizar un caso de diseño generativo de un cartel para la edición #27 del Mercat de la Volta, un evento que une el arte y la comunidad, y que tiene lugar anualmente en el barrio de Sant Narcís, en Girona. El análisis sirvió como paso previo a la creación de mi propia versión, y como acercamiento a la estructura que sigue un proyecto generativo en fases de desarrollo.

Ya con las manos en la masa, lo primero fue plantear la pregunta ‘¿Qué es lo que identifica a un barrio?”. La respuesta es bastante amplia y varía mucho para cada caso, haciendo que fuera demasiado difícil de responder, así que la siguiente estrategia fue buscar otros trabajos de diseño que integraran la identidad visual de un vecindario, proceso del que surgió esta suerte de moodboard:

 

A partir de la creación del moodboard, el siguiente paso fue buscar fotografías del barrio de Sant Narcís para poderlas trabajar en una cuadrícula, con la idea generar la imagen a través de una matriz de cuadrados donde cada uno sería una fracción de la foto, y la intención de que la matriz fuera generada por el algoritmo de forma aleatoria, mostrando o escondiendo partes de la imagen. Estas fueron las 7 imágenes elegidas, que fueron editadas con un filtro de escala de grises:

Posteriormente, se procedió a recortar las imágenes, todas con la misma proporción y en formato vertical, para empezar a trabajar lo que sería la composición del cartel con el programa de edición vectorial Inkscape. Antes que nada, me planteé aplicar un filtro de retícula sobre cada imagen, para que después el algoritmo pudiera generar cuadrados sobre la imagen y lograr el efecto deseado, aunque finalmente por temas de cálculo esta idea se descartó. Otra de las ideas descartadas fue la integración de iconos dentro de la retícula de la imagen, que representarían el tipo de actividades que tienen lugar en el evento, con la idea de ayudar al usuario a hacer la asociación del tema del evento de manera visual. Sin embargo, la cantidad de elementos ya era bastante amplia, y al final se decidió no integrar los iconos para no acabar con un resultado demasiado sobrecargado.

Basándome en el contenido del cartel del caso de análisis, y en información de ediciones más actualizadas del Mercat de La Volta en su web oficial, decidí crear 4 bloques de texto: el título del evento con el número de la edición, el tema de la edición del caso de estudio, la programación (se utilizó la de la última edición del evento) y un último bloque de texto para la fecha, hora y lugar. Como sabía que quería trabajar las imágenes en blanco y negro, procedí a buscar una paleta de colores alegre y llamativa, para que los colores destacaran sobre el fondo y las imágenes, así como una fuente ancha y legible, que resaltara sobre el resto de elementos. A continuación se puede encontrar una captura de pantalla del área de trabajo en Inkcape:

Una vez ya contaba con una idea visual de qué era lo que quería, procedí a programar el algoritmo en Processing, así como la mayoría de elementos gráficos directamente dentro del programa (esto es los textos, la retícula y los cuadrados que cubren partes de la imagen). Los únicos componentes importados fueron las fotografías y un pie de página con los logos de las empresas organizadoras o patrocinadoras del evento, que fueron extraídos de los materiales del caso de estudio.

Reflexionando sobre el proceso creativo, diría que lo más influyó en el flujo de diseño fue la creación de un moodboard inicial, así como el ensayo y error que fue puliendo el diseño durante la propia creación del algoritmo: el primero, porque sentó las bases para saber qué estética se quería conseguir, lo que facilitó bastante el desarrollo de los primeros bocetos. El segundo punto me hace pensar nuevamente en la importancia de aceptar la naturaleza iterativa del proceso, y lo esencial de no apegarse demasiado a las primeras ideas, ya que esto truncaría la posibilidad de aplicar mejoras o ajustes que en definitiva mejoran la calidad del resultado final. Comparto algunos resultados a continuación:

 

 

 

Entrega parcial – PEC 1

¡Hola a todos!

Con un poco de retraso, les comparto mi entrega parcial para esta primera evaluación.

Me ha costado bastante decidirme por el objeto LEGO a modelar. Mi primera idea era modelar este convertible; la elección venía de que parecía ser una pieza divertida, pero al final me siento un poco intimidada porque voy con retraso, y veo que tiene demasiadas piezas diferentes:

Para hacer un ejemplo de proyección, elegí la pieza que sostiene el alerón trasero:

 

Al final, me he decantado por un objeto que tiene menos piezas, este zorro:

 

El cambio de idea también surge porque varias de las piezas son muy parecidas entre sí, y con formas más rectas en comparación al objeto anterior (asumo que serán más fáciles).

Comienzo a tocar Maya para modelado hoy, ya conozco los controles pero no he empezado con el modelado de mi primera pieza; la idea es ir a tope esta semana 🙂

 

¡Un saludo y ánimos a todos!

Sarah

PEC 06 – Creemos un producto: Parallax 2,5D

Pública

¡Hola! 🙂

En esta entrada les comparto la entradilla para esta entrega. Espero les guste.

Saludos,

Sarah.

PEC 04 – Animación Digital

Pública

¡Hola! 🙂

En esta entrada les comparto mi animación.

Saludos,

Sarah.

PEC 03 – Stop Motion – Plastilina Land

Pública

¡Hola! 🙂

En esta entrada les comparto la historia de mi clip de stop mition, titulada «plastilina land». ¡Espero que les guste!

Saludos,

Sarah.

PEC 02 – Flipbook – Un Vuelo Accidentado

¡Hola! 🙂

En esta entrada les comparto la historia de mi flipbook, titulada «Un Vuelo Accidentado». ¡Espero que la disfruten!

Saludos,

Sarah.

¡Bienvenidos y bienvenidas!

Pública

¡Hola!

Esta publicación se ha generado automáticamente y solo puedes verla tú.

Te presentamos tu Folio, un portafolios donde podrás publicar las PEC y las actividades de tus asignaturas, además de tus proyectos propios. Te invitamos a explorarlo y personalizarlo cambiando el tema, los colores o la imagen de cabecera.

Para personalizar tu Folio y empezar a publicar entradas, navega por la barra superior y haz clic en Añadir / Entrada o accede al Tablero, donde encontrarás el menú lateral de WordPress con todas las opciones de la herramienta.

Las publicaciones que vincules a las actividades de las asignaturas se mostrarán en el Ágora del aula. Desde allí podrás ver las publicaciones de tus compañeros y compañeras y dejar comentarios.

Te recordamos que puedes elegir el nivel de visibilidad de cada publicación: pública, protegida con contraseña, campus, aula, visible solo para el profesorado y privada.

Te dejamos un link al espacio de aprendizaje donde encontrarás todas las indicaciones básicas para actualizar tu Folio, hacer publicaciones, vincularlas a las actividades de las asignaturas y hacer entregas en el REC. ¡Échale un vistazo!

Si tienes cualquier duda, puedes ponerte en contacto con el profesorado de tu asignatura o con el servicio de atención.