WAR OF ART WEB APP

A web application made with AFrame that translates the wisdom of the book, The War of Art, into an interactive experience. 

CLASS - PROGRAMMING USABLE INTERFACES

HTML/CSS/Javascript

Greensock

AFrame

Cinema 4D 

Adobe Fuse

01  /  WHY

Something that really helped me jumpstart my creative journey and overcome procrastination was a book called, The War of Art.

It was recommended by one of my favorite artists, Ash Thorp, who spoke a lot of self-learning and time management. I quickly absorbed all the book had to offer and found myself highlighting almost every sentence. After reflecting on my personal struggles, I realized how passive my mindset was and how education on a silver platter could become a toxic comfort zone. This project is my tribute to the book that pulled me out of this mindset and it's an expression of my eagerness to encourage others to leave their comfort zones.

war-of-art-hover

02  /  BRAINSTORMING

I decided that the website could act as a kind of digital journal, allowing people to document how they are fighting Resistance one attribute at a time in their lives. 

The book personifies procrastination, mediocrity, and a host of other universal attributes that prevent people from living life to the fullest, as an entity known as Resistance. And each chapter tackles an attribute of Resistance, defining it, explaining why we must fight it our own lives, and how we can fight it. 

brainstorming-1
brainstorming-2

03  /  VISUAL IDENTITY

Therefore, through my choices in designing the logotype, the colors, and the typeface pairings, I wanted to emulate themes that stressed tension and high contrast.

I wanted to go for an aesthetic that emphasized the high contrast. I knew that the book title subtly alluded to the age-old book, The Art of War, originally written by a Chinese military strategist, Sun Tzu. Viewing art in the mindset of a battle makes this allusion very fitting. Therefore, through my choices in designing the logotype, the colors, and the typeface pairings, I wanted to emulate themes that stressed tension and high contrast. For example, as shown below, I paired black with white, serif with sans-serif, and big with small. 

visual-identity

04  /  PROTOTYPING

I used Cinema4D to prototype the VR environment to see what my representations of Resistance would look like. Below are some test renders.
render_1
render_3
render_5
render_6
render_8
prototype-camera-animation

05  /  THE INTERACTION

A user can interact using a VR headset. The optimal experience is on desktop with a VR headset plugged in. Since there are links and buttons the user has to press, using the controls on the desktop is necessary. The site can be used without a headset as well. The user will look at each 3D model, and when they do, panels will pop up showing the description of the model and a strategy to defeat it. Once they press the defeat button, the progress bar will increase. However, if they later realize they’ve overestimated themselves, they can revive the model and the progress bar will decrease.

06  /  REFLECTION

The thrill of digging for an unknown solution possessed my mind.

The part I enjoyed the most was in the beginning stages. When I was brainstorming, I allowed my mind to wander about different types of interactions, how to put the user in an immersive experience, and the look and feel I wanted to give off. I remember thinking through many ideas everywhere that I went, in the shower, on the way to campus, etc. The thrill of digging for an unknown solution possessed my mind. However, in retrospect, I should've involved users more in the process and actually tested out with a VR headset what the experience was like. Nonetheless, as an artist, I believe that projects that are more RND-based, not really pursuing a perfect result, are crucial to growth and sustainable, enjoyable learning. In the end, I was satisfied with learning how to use AFrame and exploring the concept of creating an immersive and engaging experience. 

Check out the final result.