##Animation generated by server data
How can data be visualized? With the enormous amount of information available online, it must be processed visually to be better understood. Most of this information is stored in databases as strings and numbers in objects. How might these strings be be manipulated into visual information? Through injecting them into the React render as styles.
This project is a kernel of a generative graphic platform to visualize data, such as weather patterns, or home energy consumption over a billing period.
In it's current iteration it's a platform of experimentation to explore the manipulation of strings and numbers into visualizations through firebase data.
#Process
Animation generated by server data
- React
- Firebase
- CSS Animation
Phase 1 - Achieve MVP
- set up working environment
- create CSS animated react element
- set animation specifications as inline styled props
- pass in props from Firebase FUNCTIONALITY ACHIEVED
Phase 2 - Modifying React Element
- create functions that modify behavior of element
- behaviors will be saved in the state of element
- state of element can be saved to Firebase
- element can be re-loaded to page
- element can be deleted from server FUNCTIONALITY ACHIEVED
Phase 4 - GUI
- create buttons that trigger modification functions
- create buttons that trigger creation of element on server
- create buttons that trigger destruction of element on server
- create buttons that trigger save state of component on server
- amount of elements will be capped by CPU performance FUNCTIONALITY ACHIEVED
Phase 5 - User Login to Save Elements
- user can save their project
- user can have library of multiple projects
- user can share project as public web page via FB or TW
Synesthesia Sound Visualizer This project will blend sound and vision to help users gain an understanding of the condition of synesthesia.
- set timescale of elements for sense of composition
- set sound for each element
Weather Visualizer This project will animate the condition of weather throughout the day. This will help people understand not only what the current condition is, but also how the weather will develop throughout the day.
- animation of weather throughout day
- generate 12 second animation. Each second will reflect an hour of the day
- animations will blend together to give sense of time