Henry Zhang
Requirements!
1. Usability and Overall UX
Designs are very intuitive. Users should be able to pick up on the controls immediately after they see it. There are simple checkboxes, radio buttons, slides and dropdown menus. For the most part, most of the effects seen on the audio visualizer can be manipulated with the controls besides maybe the color scheme. On default we have a visually pleasing setup. Also with our design it is a little hard to manipulate it into a way that is not visually appealing. (Try your best!)
2. Interaction Design
Not only do we have at least 2 songs, we have 4 songs! All four songs should be enjoyable to the general community even though it is subjective. Users can change the song accordingly through the select option we have in the controls. We’ve also included a full screen mode to fully enjoy it as well as a hide controls checkbox.
3. Canvas API
Audio data uses basically every concept we’ve gone through in class. (Lines, Bezier curves, circles/ovals, gradient change, and rectangles). We’ve also used context state variables appropriately and canvas transformations whenever appropriately.
4. Web Audio API
Users can view in both frequency AND waveform data. It can be changed in the select box. We’ve also included another audio node that is besides the analyzer and user can manipulate it however they want in the controls.
5. Media and Presentation and CSS/HTML
Sound clips are all over 30 seconds and in the correct format. Page in general should be visually appealing to most people and the color scheme complements the overall design. Elements are spaced appropriately and no errors should be present. We used an embedded web font called DrawveticaMini for the song names!
font: http://www.dafont.com/drawveticamini.font
songs:
● Fantasy by Alina Baraz
● I’d Love to Change the World by Jetta
● Dr.Dre- The Next Episode (San Holo Remix)
● TRNDSTTR(Lucian Remix) by Black Coast ft M.Maggie
6. Code
There is no jQuery or any other JS libraries present in this project. “use strict” is on. Naming conventions are all appropriate for their purposes and easily followed. Debugger codes are all removed/commented out and the code in general is well commented.
Positives:
The idea and concepts were all implemented as we imagined it would. The animations are smooth and well thought out and visually appealing. (to us anyways) Overall the content came out great and a lot better than we expected.
Negatives:
During some parts, there were lag because of the order everything was being drawn. It took a bit but we eventually fixed it. Another problem was the controls. Sometimes the controls had issues but it is mostly fixed and working.
Contributions!
Henry:
● Concepts and Ideas
● UI design
● Heart Design
● Centerpiece implementation
● CSS
● Controls Implementation
● Debugging
Grade: ~90-100%
Work was split pretty much evenly but a lot of the concepts I thought up, I could not have implemented without Max. His expertise and knowledge really helped bring the concepts to life. I focused on the design aspect and controls implementation.
Max:
● Controls Implementation
● Concept Implementation
● Waveform/Data implementation
● Screen Implementation
● Music Implementation
● Concepts and Ideas
● Debugging
Grade: 100%
Could not have implemented all the ideas without his expertise and help. Efficiently created the canvas and display. Efficiently coded many of the controls and fixed a lot of the issues my code had. Worked hard and diligently. 10/10 would work with again.