Visible
Overview
While I was studying at App Academy, we were tasked to work on a Vanilla JavaScript project. This was the final of the 4 projects we had to build, and I wanted to make sure I went out with a bang and really made this project my own.
I wanted to make this project have a flow and transitions, so I built a simple welcome screen that displays some options for the visitors when they arrive. It then transitions to the visualizer page, where visitors are greeted with different options to navigate, or to upload their own audio files.
To make all of this happen, I built it using HTML5, CSS3, and Vanilla JavaScript.
Challenges and Solutions
Challenges
- P5.JS
- DOM Manipulation
P5.JS
If you are familiar with D3, P5.JS is very similar. Personally, I found the P5.JS documentation easier to understand and follow, based on the developer community. The main things I needed from this library was the ability to analyze audio data, as well as render visuals, and P5.JS was able to achieve what I needed, while being lightweight.
After selecting P5.JS, I had to learn how it worked and how to structure my code. Once I understood P5.JS, I was able to render a wave on the background of welcome screen, all inspired by the Play Station 3 and Play Station Portable welcome screens!
With some Vanilla JavaScript code, I was able to add a transition that takes the visitor from the welcome screen to the visualizer screen. The visualizer screen is where most of the P5.JS library was used. I did also learn that you must be careful with how many animations you have, because it can overwhelm the browser.
After going through a few options P5.JS offered, I decided to base the main visualizer reactions on the sound amplitude as well as sound spectrum, which allowed me to render different visuals based on different sounds.
DOM Manipulation
Prior to studying at App Academy, I programed my websites using Angular 7, where it takes care of the DOM manipulation based on if statements embedded within the HTML. Fortunately, App Academy taught my cohort and I how frameworks like React and Angular work under the hood, and I was able to understand how DOM elements were being created, updated, and removed.
As part of the task, we were not allowed to use these frameworks, or jQuery, so I had to learn how to Manipulate the DOM. With some basic built-in functions, I learned that you can achieve so much!
Using Vanilla JavaScript, I created elements, rendered them, and removed them, all based on user behavior/clicks. Further, with the combination of CSS3, I was able to add and remove classes and HTML properties, all to help the transition be as smooth as possible.