Connections 2018: Experiments
-
v0.1 Planes: 13th September.
- First version of webGL piece for discussion.
- 2D photo planes arranged in a 3D space, with mouse-look to see perspective.
-
v0.2 Cubes: 20th September.
- Photos now mapped onto cubes. 2 sides only for performance issues. pos-x and neg-x planes.
- Cubes arranged in a shuffled 3D space array such that individual cubes cannot overlap each other. Durstenfield shuffle, optimized version of Fisher-Yates shuffle.
- Entire group of 900 objects rotates on y-axis vector around world center 0,0,0. Rotation delta set by clock.
- Mouselook changed to mousedown->drag->mouseup. Triggers rotation function
- Scene set to white background, fog distance set to 5000.
-
v0.3 Cubes - transitions: 24th September.
- Test transition: zoom in on particular cube.
- Test transition: sort function based on gender mock-up data
- Simple mousewheel - FOV. Should perhaps change to z-index distance?
- Touch gesture library - pan only.
- Auto-rotation added.
- Branch version with 3 colors.
-
v0.4 Cubes / connections 3D icon: 29th September.
- Refactored colors function.
- Equations to define the coloured bands of the logo in 3D space. 16 bands, 8 colours - parameters in cos, sin, x, y and z
- Keyboard hooks for demo.
-
v0.5 3D bands connections icon: 3rd October.
- Keyboard hooks removed for this demo version.
- Animation for all the bands so that it looks like they are spinning around a central space - a 3D representation of how the logo will be if animated.
- Tweaks to all the equations, such that the bands, upon animation, pass over each other nicely in the z-plane.
-
Animation tests/examples: 9th October.
- Bands v2. 8 bands, tweaked, in 1/4 phase.
- Bands v3. 8 bands, tweaked, in phase. Radius is smaller. Get to see all the bands together, so I like this best.
- Cube v5. sliced planes of cube animated to move in x and y direction, giving sense of movement.
-
v0.6 Visualization with interface: 16th October.
- Major refactor - data structure, library packages, CSS and JS files delineated.
- Animation transitions resolved so that they do not conflict. Setting and clearing of timeOut conflicts.
- 3 major animation modes - bands, cube, inspect.
- All major animation modes tweaked. E.g. cube refactored so that no cube can ever collide with another.
- Inspect mode turns off rotation and correctly picks a random correct cube to zoom to.
- visibilityChange API management to gracefully deal with requestAnimationFrame. When not focused/tabbed out, cancelAnimationFrame is called. On focus, repaint canvas with cube animation. Otherwise animation has errors as animation position updates but requestAnimationFrame does not.
- Investigating Chrome hardware acceleration functions to get better framerates if possible for demo machine.
-
- Demo machine procured and configuration.
- Code-created test file started.
-
v0.7 Visualization with CSV data: 18th October.
- Used sample file Aedan sent as base data for mock.
- Load of data file, and interface tweaked to allow searching of names.
- Text autocomplete library added to make it easy for user to complete and access names.
- Test idea for department animation.
- Test idea for committee animation.
-
v0.75 New animation beta: 22nd October.
- New animation ideas, to be merged with existing piece.
- Temasek SVG animation.
- WebGL animation version.
-
v0.85 Major version update: 24th October.
- Integrated with test data that Temasek passed over.
- Base UI added, included animated pull drawers and display tabs. To tweak for mobile.
- All functionalities added - department, year joined, committee.
- Finally solved on tab out bug, thanks to help from Kok Keong. Solution took very few lines of code, but the research and tracing took three days.
- To make the on tab out change perfect, should pause and restart TimeOuts as well.
-
v0.9 Main visualization done: 25th October.
- Load manager now integrated. All photo textures are loaded before scene is rendered. Requires integration of load screen, otherwise what you see is just a black screen as all the files are loaded in the background.
- Visualization now on base black. Shadows and fog tweaked.
- Empty cubes (with missing photos) now loaded with the cube's colours
- Lighting sort of tweaked by using a separate, darker colour pane for the cubes. Now looks more 3D.
- Base UI has been tweaked, with all new CSS to make it look nice, cleaning up of icons, etc.
- Animation of the base UI.
- Display font is now Noto Sans.
- Error text display for empty or wrong name on search.
-
v0.95 Splash screen changed: 27th October.
- Latest splash screen
- Connections logo added to text and animated.
- Icon fields now "blended" closer together, with a space in the center devoid of icons so it seems you're always headed towards the horizon.
- To integrate: add in the progress elements, and a play button/transition to move to viualization.
- Replaced window.InnerHeight and window.InnerWidth with Jquery $(window).width() and $(window).height(). Solves sizing problems.
- 300 x 300 photos now added.
-
v0.99 Final: 27th October.
- Splash screens now added to final piece.
- Went with a click/tap interface to transit to photo visualization from the infinite icon field animation. A UX cue is needed.
- Making sure all the animations, user interaction hooks do not conflict was the most time consuming and problematic part of the piece. E.g. mouselook disabled for photo viz, and pan/zoom disabled for iconfield, etc.
- New committee 2019 mode and icon added. Committee2018 tweaked as requested.
- Lots of animation timing tweaks and changes.
- Tab out, loss of focus TimeOut issues solved. Not the most graceful way, but will not break app on this edge use case.
- Small UI tweaks like display bar sizing, margin, padding and text size.
- Mobile tweaks - quality of life changes like closing drawer on portrait, shortening drawer items on small height, etc.
- Simple browser testing - Latest Chrome, Firefox and Edge. Changed flexbox space-evenly to center tag for Edge. Curses IE Edge. Die already!
- Simple load progress bar left in for visual cue on over the internet load, but might take out for actual event.
-
v1.1 Post-event: 7th November.
- All photo image textures in and resized to power of 2 for optimization. Image size lowered by a few MB.
- All splash screens integrated into web app (was taken out for event).
- Load screen now only is the Temasek SVG animation. Load bar left in so user knows how long it takes to load assets.
- Animations tweaked and in general speeded up.
- Zoom z-factor scaling now a general algorithm rather than a specific if-then-else loop.
- Unusual use case where tabbing out/losing focus during horizon transition would cause a bug now fixed. Now all tab out/lose focus events at any point handled properly.
- Horizon animation refactored to fit animation loop.
- Mobile tweaks and form factors checked - Chrome, Firefox, IE Edge, Android Chrome (Samsung S9+).
-
v1.2 Post-event cleanup 2: 25th November.
- TC 2019 committee logo and TC2019 viz function removed entirely.
- CSS tweaks for mobile (iOS Safari).
- Speed timings tweaked for menu sidebar so it is faster now.
- Detection written in for IE11 and older IE browsers. Now if you try to run on IE11, you will get a nag text saying no support and telling you to upgrade.
-
v1.3 Forked version: 4th December.
- Raycasting detection added. Necessary to detect if rays cast from the camera intersect with a mouse event action.
- Now clicking on a cube in any mode transits to inspect mode. This makes it more of even a true data visualization. Not only can you search for your name, but you can also tap on any cube and see who that photo belongs to!
- Mouse functions were quite significantly rewritten. They were conflicting with each other on all the various modes and functions (mouselook, pan, tap vs click, etc.).
- Mobile devices were also not very compatible with a lot of mouselook functions. So more heavily leaned into hammer.js touch functions and events to simulate the required touch interfaces, and interfaces feel more natural now.