Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 32 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,46 @@
Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
Readme
---

## AudiViz - A digital audio visualizer

Link: https://a4-jchengz.glitch.me/

The application I built is an audio visualizer. I was inspired to create the visualizer with two concentric rings of rotating cubes, where the rings are
rotating in opposite directions for effect. There are three songs included: techno, musician, and pop. There is a feature to upload an MP3 file.

Controls for the user:
Menu:
- Play => Play audio
- Pause => Pause audio
- Reset => Set audio to play from start
- Choose File => Click to upload MP3 file locally

Dat.Gui:
- cameraX => change the x position of the camera
- cameraY => change the y position of the camera
- cameraZ => change the z position of the camera
- colorOuterRing => change the color of the blocks in the outer ring
- colorInnerRing => change the color of the blocks in the inner ring
- colorIcosahedron => change the color of the icosohedron (geometry in the center)

The application I built is an audio visualizer. I was inspired to create the visualizer with two concentric rings rotating in opposite directions for effect.

I had a lot of difficulty coming up with original ideas and ideas that would address all of the requirements of this project, yet also be a feasible project for me
to complete with the allotted time. In particular, I had a lot of difficulting with the modularization of js files, as well as "installing" a linter. I searched for an online
JS linter and found JSLint:https://www.jslint.com/ . The settings underwhich I checked my code wereto tolerate for statements, this, and long lines (the default is to
have 80 characters max per line). Details on the specifics of the rules followed by this linter can be found at: https://www.jslint.com/help.html ,
but the linter checked for presence of semicolons, double quotes, and flagged extra spaces (spaces between and after lines) as well as proper selective importing.
JS linter and found JSHint:https://jshint.com/. Details on the specifics of the rules followed by this linter can be found at: https://jshint.com/docs/ ,
but the linter checked for presence of semicolons, double quotes, and flagged extra spaces (spaces between and after lines) as well as proper selective importing. Additionally,
this linter also checked for unused resources, improper construction of objects, as well as flagging for ES versions. Camel Case was accounted for externally.
One of the most difficult technical challenges was getting the cubes to rotate and appear as they do, as well as figuring out how to get the camera to be properly placed
with the correct field of view. It's not perfect but it does the job. Similarly, it took a lot of time to figure out how to properly read a mp3 file in. I found an implemented
a solution that allowed me to be play the audio as well as process the frequency to be used for the animations.

## Technical Achievements
- **Tech Achievement 1**: I wrote my own custom GLSL shaders to use as a material for my Three.js objects.
- **Tech Achievement 2**: My audiovisualizer uses both FFT and amplitude analysis to drive visualization.
- **Tech Achievement 3**: I optimized the efficiency of my reaction-diffusion algorithm by...
- **Tech Achievement 1**: Orbital Controls enable the use of clicking and dragging to change view.
- **Tech Achievement 2**: Three.js 3D shapes controlled by audio frequency
- **Tech Achievement 3**: MP3 File uploading & data processing (to be analysed by the analyser)


### Design/Evaluation Achievements
- **Design Achievement 1**: Bootstrap for styling.
- **Design Achievement 2**: Cross-browser utilization for popular browers like Chrome, FF (except for IE/Edge)
- **Design Achievement 3**:
- **Design Achievement 1**: Bootstrap for styling buttons and formatting buttons + dropdown menu.
- **Design Achievement 2**: Cross-browser utilization for popular browers like Chrome & Edge
- **Design Achievement 3**: Play, Pause, and reset for music (with multiple music options) and gemoetry shading features.