Poema Circulatorio

How can an interface facilitate numerous interpretations of an architectural site?

UX, UI, Interaction Design

HTML/CSS, Python, p5.js, Poema Circulatorio by Octavio Paz

Interface Overview

Poema circulatorio is an interactive interface inspired by the architectural and historical harmony of ancient Aztec society with contemporary Mexico City. In Mexican poet Octavio Paz's "Poema circulatorio," he facetiously addresses European writers: although they had to invent surrealism to cope with their boredom, Mexico (and Latin America) never needed to create such a concept, because surrealism has always existed in Mexico.

Guillaume / jamás conociste a los mayas

Using three websites (one analyzing the ancient Aztec temple and two discussing the history and current events that take place on today's Plaza Mayor, which sits atop the ancient ruins), I web-scraped these sites using the Beautiful Soup library to remix a poetic visualization of ancient and modern Mexico. On the left, phrases on the ancient Aztec temple. On the right, phrases from contemporary Mexico. 


Using p5.js to create a parabola shape, I also coded key commands (LEFT_ARROW & RIGHT_ARROW) in order to allow the text to overlap. The interactivity in seeing phrases pile into each other regardless of temporarility (past or present) emphasizes how the historical past and present of this architectural site are nearly indistinguishable. 

For example, the phrases “cimientos de la capital de la futura Nueva España” and “tocar la tierra” coincidentally match up and quite perfectly: foundations for the capital of a future New Spain. / touch the earth

User Interface + Visual Inspiration

Although a writer, Octavio Paz formally challenged how his words were visually displayed on pages. He is often a graphic design inspiration for me. “Poema circulatorio” was actually first displayed in an exhibition along a spiral staircase––an appropriate display, because some of the wording in hsi poem can also be formatted in an endless loop:

Allá / sobre el camino espiral / insurgencia hacia / resurgencia / sube a convergencia / estalla en divergencia / recomienza en insurgencia / hacía resurgencia / allá...

And so on and so forth. The picture below was found while searching for a PDF of the poem.

Lo-Fidelity Wireframe

Quickly sketching out the formatting for the interface showed me that the form I wanted to create would best be achieved through working with p5.js. Also, just writing personal notes helped me define exactly what content I wanted to scrape, so that concept harmonization would make sense. 

I also fed in a series of dummy text into my p5.js code (not the scraped text using Python that eventually made up the final copy of the interface) to begin seeing how overlapping lines of text could begin to work.

Scraped Sites

- El templo mayor de Mexico-Tenochtitlan
- El corazón de la Ciudad de México comienza a latir
- La Plaza Mayor, tres siglos de dominación española