c0d3ster / fractaleyez Goto Github PK

1. Design Login icon and placement
2. Design Login Modal
3. Connect to server /login endpoint once #24 is complete

When the window is resized the particle resolution is not adjusted to match the new resolution.

1. Determine where to add login button
2. Design Account Creation screen/modal
3. Make requests to server endpoints to add account once #22 is complete

After learning the limitations of React-Three and React-Three-Renderer, we've decided it's best to remove React altogether and rely on JQuery for any DOM manipulation or additional menus. We found an awesome library which sets us up with a great boilerplate for the audio analysis. There are a few steps which we need to complete before we can move forward with development using this repo:

1. Remove aspects of the repo we don't need (GUI.js, loading page, user-selection page)

2. Upgrade package.json to include three.js instead of using cdn and upgrade to webpack v4

3. Get music analysed and playing on single page with three.js canvas

Once project structure is altered to our satisfaction, we may move forward with implementing various visual elements and utilizing the audio analysis features of this repository. We need to be sure we provide credit where credit is due on this project, updating our README document with proper accreditation.

Goal: In order to provide clear and seamless visualization experience the configuration dialog needs to be separated from the visualization window.

Behavior: The configuration dialog, once opened should act as its own "tab" in that it can be moved around independently in and outside of the visualization window.

The final step to have a working prototype before Wednesday is to link the audio analysis peak detection and band splitting to our visualization. The starter kit we used has a pretty cool shockwave effect that could serve as a starting point.

1. This first requires that we have a working sidebar which can load and analyze audio while the visualization is running without music (performance analysis required, may need to pause visualizer)

2. Use peak detection data to alter visualization at each "beat"

3. explore the option of altering variables based on "frequency bands" data

Create a reset button in the configuration tab that once clicked resets the configuration params to default values.

As Part of the configuration window certain presets need to be made that offer a unique style and visualization for different types of music.

React is my favorite and if we could integrate that for this project, it would make it a lot easier to develop. The only drawback is the potential performance hit of having all the visualizations going through the lifecycle methods. We're currently using JQuery for everything and it feels like we may be better off switching to React components for the menu at least before it gets too complex. I'll confer with some people at work and see what they say...

Create a Collapsable Settings/Info Sidebar like in Atom to display info about the visualizer and offer various setting options for the visualization

Have particle geometries expand (x and y coordinates of particles) towards the edges of the screen while still maintaining their relative geometry. Have them "shake" while doing so and hold at the "expanded point" for some amount of time while shaking. After which the particles contract in a linear fashion to their original and none expanded geometry.

When the visualization window is shrunk with the a config tab open that has sliders the sliders extend outside of the config tab boundaries

The only way to change the sprites right now is to go into the code and edit the presets/add files to the /public folder. It would be great if users could modify the sprites dynamically. A PoC for this would include:

• A separate menu tab for sprites
• The ability to select and deselect sprites from a list
• Resetting the visualization upon change

Next steps once those are complete might include:

• Dynamically adjusting the visualization for minimal disruption
• Drag and drop interface for custom user images
• Saving images for retrieval later to ensure it can be accessed upon refresh or when configs are imported in (local storage or some other means)

1. Create MongoDB
2. Determine MongoDB document structure: username, password, email?
3. Create endpoints on server for: Add Account, Change Password?, Change Email?
4. Encrypt passwords on database

We need tor provide more customization to control the input parameters for the hopalong algorithm.

Parameters to add:

1. A, B,C,D,E etc.

2. Number of Particles

3. Different PNG's besides the galaxy one for particles

Once we have user controls functioning properly, we need to actually render a visualization. Barry's hopalong orbits is a good starting point, but ideally we will progress beyond that to various fractal creation algorithms.

1. Integrate Barry's Hopalong Attractor algorithm into our three.js canvas

2. Ensure user controls are functioning as desired

3. Explore options for mandelbrot fractal generation

4. Explore options for dynamic fractal generation based on user's "perspective" from mouse control

We need to analyze and break down the procedure that Barry's Hopalong Orbits project uses to imitate traveling through 3D space. I know that it uses three.js fog to hide what's being rendered down the line, but this will be vital in creating a smooth user experience.

1. Render elements as necessary, hiding the actual creation of the elements

2. Implement arrow controls for rotation and speed

3. Implement mouse control for perspective shift relative to mouse location

4. Brainstorm ideas for other user controls

1. Add endpoint for: Attempt Login, Forgot Password?
2. Add JWT support and return JWT with login

It would help the VJ to have a clearer representation of how well the music analysis is working. If we could add similar multi-band dots to the React expanded config, it would allow real-time analysis of the sound settings effectiveness.

Values in the User configuration tab do not show the actual value of things (speed, rotation speed, etc.) if they are changed outside the configuration tab by using the arrow keys etc.

1. Determine ideal detached menu design, size, and position
2. Make settings customizable and save in cookie/JWT
3. Attach to account

Controlling the camera from the viewable area of the visualizer is distracting. We should create a mouse pad on the expanded config menu that matches the dimensions of your screen at a smaller scale.