Amparo Pérez - Portafolio

Sobre la Asignatura

El curso de Imagen Escrita nos enfrenta a la paradoja de escribir para ver. Cada línea de código deja de ser un mero cálculo para transformarse en trazo, color y movimiento. A través de p5.js el curso se vuelve un laboratorio de arte recreativo, donde la programación deja de intimidar y se descubre como un lenguaje que, lejos de separar, une lo lógico con lo sensible. El paso metódico del papel al experimento, del experimento a la animación, enseña que crear es también traducir, y que en esa traducción el diseño encuentra nuevas formas de expresarse.

Al mismo tiempo, la asignatura abre preguntas sobre nuestro vínculo con las tecnologías. La inteligencia artificial, aparece como aliada: un eco que responde a nuestras instrucciones y que exige claridad en cómo nos comunicamos con la máquina. Así, Imagen Escrita no solo entrega herramientas técnicas, sino que instala una manera de mirar el futuro del diseño, donde escribir, pensar y crear se entrelazan en un mismo gesto.

Visita la Wiki del Curso de Imagen Escrita

Encargos

Aquí se presentan los trabajos de clase, explorando diferentes enfoques creativos y técnicos en el desarrollo de cada encargo.

Tarea 1

El ejercicio consistió en reinterpretar una portada musical a través de figuras geométricas básicas en p5.js. El proceso partió con un bosquejo para reconocer las formas esenciales, luego trasladado a GeoGebra para obtener coordenadas precisas. Con ello, la composición se organizó como capas, inspiradas en la lógica de la cámara multiplano, mientras los colores se extrajeron cuidadosamente con un ColorPicker.

El resultado fue una traducción digital de la imagen: líneas y vértices que, al ser codificados, se transformaron en un nuevo trazo, donde el lenguaje de programación se convierte en herramienta de dibujo y el código en un modo distinto de crear.

Ver Sketch Tarea 1 en P5.js

Tarea 2

El encargo pedía explorar for loops y condicionales en un sketch libre. Mi propuesta transformó una grilla de pelotitas en un campo viviente: cada círculo reacciona al paso del mouse, parpadea, desaparece al click, y se mueve en ondas independientes.

El código se volvió trazo: bucles que ordenan, condicionales que deciden cuándo aparecen o desaparecen, arrays que mantienen el latido de cada esfera. Así, lo lógico se hizo respirable, y la abstracción cobró movimiento gracias al diálogo entre programador, formas y máquina.

Ver Sketch Tarea 2 en P5.js

Tarea 3

El encargo consistió en crear un patrón visual usando funciones como translate, rotate, scale, push y pop, y además poder explicar la lógica que lo sostiene. En mi propuesta, titulada Estela Interactiva, combiné un patrón radial de líneas que responde al movimiento del mouse y deja un rastro cromático.

La idea fue tejer código con movimiento: con for generé muchas líneas, con push/pop cada línea tuvo su propio espacio de transformación; el uso de rotate dividido en dos rangos (dependiendo del índice) permitió que unas líneas respondieran al eje horizontal del mouse y otras al eje vertical. Los colores cambian dinámicamente con funciones trigonométricas y frameCount, creando esa sensación de estela viva. En resumen: cada instrucción es un trazo que responde, y el algoritmo es el dibujo que late bajo la imagen.

Ver Sketch Tarea 3 en P5.js

Tarea 4

El encargo propuso fusionar recursión y simetría radial para construir un patrón visual interactivo en p5.js. En mi solución, la función branch() genera ramas que se replican como un mandala, mientras que translate, rotate y push/pop organizan la estructura en torno al centro del lienzo. El mouse controla el ángulo de ramificación y la longitud inicial de las ramas, transformando el dibujo en una entidad viva.

La lógica del código actúa como un trazo orgánico: cada llamada recursiva es un giro, una ramificación, una decisión algorítmica que dibuja. Los colores varían con el nivel de recursión y el tiempo, amalgamándose en un patrón fluido donde la programación demuestra que no solo basta “hacer funcionar”, sino dibujar con intención.

Ver Sketch Tarea 4 en P5.js

Sobre Mí

¡Hola! Soy Amparo, estudiante de la carrera de Diseño en la Pontificia Universidad Católica de Valparaíso (PUCV). Este portafolio es un reflejo de mi proceso de aprendizaje en la asignatura Imagen Escrita. Mi pasión se centra en la intersección entre el diseño visual y la programación, donde puedo dar vida a mis ideas a través del código y la creatividad.

A través de este viaje, he descubierto que el código no es solo una herramienta, sino un medio para explorar nuevas formas de expresión. Este espacio digital es una prueba de mi crecimiento y dedicación para unir el arte con la tecnología.

Experimentación Personal

Aquí están algunos proyectos personales de experimentación en P5.js.