Inspired by the unique music of Paul Dresher and Joel Davel, this project looks to build an animated poster using 3D elements. Animated to the music, this project explores a unique method of advertising an event with newer web technologies such as A-Frame, permitting the ability to create 3D content on the web.
Technology — HTML/CSS/JS, D3.js, A-Frame JS
Software — Adobe Illustrator, Photoshop, Blender
Client — Academic Project
Duration — 5 weeks
Digital signage has become a common medium for advertising events in public places. Traditionally, these digital signs just rotate between static event posters, many which appear unadapted from their print counterparts. This project explores how to design a dynamic poster for display on a digital sign, incorporating animation.
Animated three-dimensional design was something I was especially interested in exploring, being a method not possible with traditional print posters. The approach looked at using newer web technologies that permitted three-dimensional animations on the web as the medium which would animate to the music.
Taking into consideration my research of the music and comparable projects, I chose to make an animated visualizer placed on a three-dimensional model of a guitar, a stringed instrument similar to those created and played by Dresher and Davel. Text was then positioned around the guitar in three-dimensional space. The camera then orbits in a loop around the guitar, revealing the different texts and elements.
Most of the challenges faced during the development of this project were technological. Building the three-dimensional model of the guitar was of significant difficulty. After research, I found that modeling a guitar in Blender, a 3D modeling and animation tool, and then importing the three-dimensional model into HTML using A-Frame would be the best method. With three-dimensional graphics requiring more computer processing than 2d graphics and animation, I also had to ensure my graphics and textures were as small as possible to ensure quick rendering.
This project was built on open-source technologies. A complete list of these are listed below, along with their license information.