c0d3ster / fractaleyez Goto Github PK
View Code? Open in Web Editor NEWAn easy-to-use, fully configurable, realtime music visualizer
Home Page: https://fractaleyez.com
An easy-to-use, fully configurable, realtime music visualizer
Home Page: https://fractaleyez.com
When the window is resized the particle resolution is not adjusted to match the new resolution.
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:
Remove aspects of the repo we don't need (GUI.js, loading page, user-selection page)
Upgrade package.json to include three.js instead of using cdn and upgrade to webpack v4
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.
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)
Use peak detection data to alter visualization at each "beat"
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:
Next steps once those are complete might include:
We need tor provide more customization to control the input parameters for the hopalong algorithm.
Parameters to add:
A, B,C,D,E etc.
Number of Particles
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.
Integrate Barry's Hopalong Attractor algorithm into our three.js canvas
Ensure user controls are functioning as desired
Explore options for mandelbrot fractal generation
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.
Render elements as necessary, hiding the actual creation of the elements
Implement arrow controls for rotation and speed
Implement mouse control for perspective shift relative to mouse location
Brainstorm ideas for other user controls
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.