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
Background
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.
Strategy
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.
Design Solution
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.
Technologically, this project uses A-Frame, a Javascript library that makes possible the ability to make 3D objects using just HTML. Used alongside jQuery and D3, I was able to build a three-dimensional scene much like how one would build a website. The camera was then animated to give the user the visual impression of moving around the three-dimensional scene.
Challenges
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.
Additional Information
This project was built on open-source technologies. A complete list of these are listed below, along with their license information.
