Documentation
- functionality before further style (several data files, animation, zooming into data)
- add animation (influenced by sound?)
- look further into plotter file (d3, scatterplot,..)
- try out different inputs/interpretations of data
- try out more 3D-ish style
- focus on website/ endproduct
- still images/ porttraits and viz
- decide on sports
- create narrative/connection for sports to viz
- Test Athlete Portrait + Visual:
- smaller particle size works better (maybe random between 0.5 - 1.5 or influenced by another factor like sound)
- mirroring the data looks kinda cool
- random functions in js:
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
first OK visual output with small particles
Change particles by geometry or by material?
- adjusting shapes, color, input for 3D Scatterplot example
- First Look: Using Three.js for 2D Data Visualization
- Update: Using three.js for 2D data visualization
- Understanding scale and the three.js perspective camera
- p5.js oder three.js
- need to check where its easier to load csv files
- three & d3: 3D Scatterplot with csv upload
- example plot with csv upload
- audio/pulse as csv file?
- introduction to data loading
- create styleframes
- gradient shader in threejs
- gradient colors in threejs
- REACt für interaktive Sachen (public "bleibt eher unverändert", src: hier wird editiert)
- Props: Infos werden in Baumstruktur durchgereicht
- State: Variablen wo sich Werte ändern können (count++ oder + - button)
- index.html -> index.js -> app.js ...
- mocap library mixamo adobe
- import for packages: npm install ..
- import * as XY / {KonkreterName}/ DefaultExport from 'jasonFileName';
-
importing scripts offline
-
learn about bundeling modules (browserify/ webpack)
- in project file (three.js) npm init
- npm install webpack --save-dev (only dev file not for production)
-
codepen
- three.js documentation getting started imgage path - where am I startin the server from (three folder)
- effects anaglyph - three.js
- HDRI as environment like in effects anaglyph - Sports environment as connection to sport
- Glitch look
- research for prerecorded mocap data, sound data, pulse,..
- test out visualisation in p5.js, three.js, only 3 joints (gradient look?)
- (search for tracking devices)
I am a student in the Creative Technologies master program at the film university Babelsberg near Berlin. Currently, I am working on a project with abstract visualisation of sports movements and I would love to collaborate with you.
Sports are goal and performance oriented, and we often forget about the beauty and poetic perspective of these movements. I want to capture the essence of these motions, which are mastered for perfection and sensationalise them through abstract art.
Here is a short description of my project: The idea is to generate a visualisation of several sport disciplines by recording specific data. This will mainly be data sources such as motion tracking, but also non-visual factors like sound and pulse of the athletes. Possible sports could be climbing, skating, dancing, cycling and others. The captured data will then be processed with javascript, to enable an artistic visualisation. This will be done with the help of libraries such as P5.js, three.js or babylon.js. The output will be a combination of data-driven movement as well as artistic choices to achieve a visually appealing animation. After completion of the project, the viewer will be able to interact with the visual output on a web based platform.
The Xsens technology seems to be perfect for capturing movement in various environments, which would not be possible on a conventional motion capture stage. Would it be possible to get support for my project from Xsens by lending me the MVN Animate Motion Capture System a few weeks during January or February? I would very much appreciate any kind of help and of course credit the support of Xsens for my project.
Please let me know if you have any questions about my project or if an official statement by my professor is needed.
Machine Learning - Human Pose Estimation [bodypixel - person segementation]https://medium.com/tensorflow/introducing-bodypix-real-time-person-segmentation-in-the-browser-with-tensorflow-js-f1948126c2a0
Footageanalyse + rotation, tilt, location from iphone? + pulse + sound
Three.js is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL
- interactive part: viewer can guess sport
- still images -> mix of athletes/face and viz
- concept finalisation
- moodboard
- research for prerecorded mocap data, sound data, pulse,..
- test out visualisation in p5.js
- search for tracking devices
- create workflow
- test out visualisation in p5.js
- style testing
- search for tracking devices
- decide on visual style
- recording the data input myself
- platform/website for final product
- polishing animation
- interaction with visualisation
- beautification of input features
- still frames from animation for product design
- preperation for presentation
Finish 🎊
- Circle color gradient 
- xsens need to contact them, maybe bought by university
- mobile devices
- Kais Motion Tracking Suit
- High end look, prerendered (Houdini, C4d, Maya) houdini tutorial OR
- web based, interactive (P5.js, D3.js, RAW Graph,..)
- visually high end look
- nice (fluid) animation
- interaction
- still frames for branding
- recording data myself
- multiple sport disciplines
- visually 'ok'
- no animation
- no interaction
- one sport (movement)
- using prerecorded data
Indepent from my work would be the sound design (maybe filmmusic student/friends)
I created a moodboard on pinterest
folder with moods
I really like the gradient, soft glow, steamy look like here:
