TUAN_HUANG

WEB
GRAPHIC
SYSTEMS



MT ALBUM SERIES | 01: Yemakanshan + 02: Dongyanshan


This project transforms sound recordings of Yemakanshan(野馬瞰山)and Dongyanshan(東眼山) mountains into flip books, using data analysis and visualization to represent the sensory immensity of nature in a tangible, collectible form.



BRAND IDENTITY GENERATIVE WEB DESIGN BOOK DESIGN


TOOL

HTML/CSS/JS, Three.js, Adobe InDesign, Illustrator




Origin


Growing up in Taiwan, surrounded by mountains, I was constantly exposed to their immensity and intangibility. For me, this sensorial experience, fulfilled only through continuity, is akin to how I experience sound. I began to wonder: how could I represent this immensity in a tangible and collectible form? This question led me on a journey of play, feeling, lingering, and recollecting my experiences from home.




left page is the sound data that generates 
the visual on the right page.


Process


The process involves several steps—from creating an automated system to designing and printing the final product.

  1. Building a Data Analysis and Visualization System
    I
    developed a browser-based interface that automates the system. Using the Essentia library, I extracted sound data and visualized it through Three.js sketches. The sound is analyzed every 6 frames, stored as a JSON file, while the visualizations are saved as images in a directory.

  2. Creating a CSV File and Running InDesign Script
    I compiled the JSON data into a CSV file, cleaned the data, and added a column linked to the corresponding image names in the directory. Using a layout template I designed for the book, I wrote an InDesign script to automatically populate the content from the CSV file.

  3. Book Design & Print
    The book's appearance is inspired by CD jewel cases—not only in its dimensions and thickness, but also through a graphic belt around the cover, similar to those used by some record labels. The book was printed and bound at Pinmo, a small print shop in Taipei, using subtle textures and coatings to enhance the tactile experience.








TUAN_HUANG © 2024


REACH ME AT