tally-ncsu-viz

Notes

• Unity 2020.1, URP

To do items

Setup

• Create repo
• Create Unity project (2020.1.2f1)
• Git, Git LFS, SmartMerge
• Choose a name!

Data & Timeline

• Data
  • Update API with basic feed data
  • Get Feed data in Unity
  • Convert Feed data to JSON object
  • Create EventManager
  • Update API with detailed feed data
    • Change format of feeds table to use JSON_OBJECT()
    • Update feeds on website to use eventData object from each row
    • Update API to use eventData object from each row
• Timeline
  • Timeline class
  • Create playback
  • Coroutine to play event at specific time

Playback History and Buffer automation

• Create code that
  • Automatically gets, or handles a lack of, new events
  • Can consume data from the live API or local JSON files without changing anything
  • Potentially do it like:
    • Use two C# collections (either a List or Dictionary) named buffer and a history that can be sorted by a date string.
    • As the events are visualized, the event object is moved from the buffer to the history.
    • If no (or not enough) new events are found on the next API call, then a "rewind" can happen where a chunk of events from history are placed back in the buffer and the "playhead" can restart at the end of the buffer (until the next check).

Timeline visualization

• Build timeline Visualization that shows history and buffer 👈
  • "Playhead" that moves horizontally with the current event
  • History and buffer are both visualized, with dots showing number in each collection, on either side
  • Playhead moves right as new events happen, increasing the history and decreasing the size of the buffer
  • As buffer is filled back up history is deleted and playhead resets to left.
  • Use Colors from the website palette in the interface

Interaction

• Add methods so viewer with a controller (keyboard, joystick, etc.) in the Visualization Studio OR someone using this with an iPad can: 👈
  • Use horiz/vert axis (controller) or pinch/zoom (tablet) to select different players
  • Click / press button / touch to zoom camera into and follow player
  • While zoomed-in, display additional data on that player (from feed, username, etc.)
  • Use horiz/vert axis (controller) or swipe (tablet) to shift to different player
  • Either after a period of no activity automatically, or with player click / press button to, zoom back out

Testing

• Build Feed data testing / monitor UI
  • Dropdown to switch between live / local
  • Button: playback restart

Monsters

• Sprite animation slicing
• Add monster sprites to follow players 👈

Players

• Initialize
  • Use Feed data to build GameObjects and display in "Universe"
  • Ensure players aren't added twice with new feed data
• Movement
  • Create player (physics controlled) floating movement (Jellyfish?)
• Actions (controlled from code) that visualize different event types on playback
  • 👆 Stream - Click ✅
    • Player movement: Pop_Shake_md.anim
    • Sound: Click.ogg
    • Extra effects: expanding concentric rings similar to "radar" effect but with better colors, maybe toned down color
  • 👍 Stream - Like
    • Player movement: Pulses bigger then glows, similar to "light bulb" effect
    • Sound: Like.ogg
    • Extra effects: hearts particle system like trailer?
  • 🧨 Attack - awarded
    • Player movement: ?
    • Sound: Attack.ogg
    • Extra effects: make particle effect with icon
  • 🏆 Badge - awarded (changes depending level)
    • Player movement: accelerates right along the x-axis or concentric circles emanating from player’s icon
    • Sound: Badge.ogg
    • Extra effects: make particle effect with icon
  • 🍪 Consumable - found (changes depending type, stat)
    • Player movement: accelerates right along the x-axis or concentric circles emanating from player’s icon
    • Sound: Consumable.ogg
    • Extra effects: make particle effect with icon
  • 😎 Disguise - awarded
    • Player movement: Opacity Shake, CSShake
    • Sound: Disguise.ogg OR Spell/magic sound like https://freesound.org/people/suntemple/sounds/241809/
    • Extra effects: make particle effect with icon
  • 🕷️ Tracker - blocked
    • Player movement: ?
    • Sound: Tracker.ogg
    • Extra effects: make particle effect with icon
  • 💥 Battle - In-progress
    • Player movement: "rumble" CSShake little shake
    • Sound: Battle-In-Progress.ogg OR Light battle music (on zoomed in)
    • Extra effects: Rumble animation appears over player (dust clouds or too much?)
  • 💥 Battle - Win
    • Player movement: does a celebratory flip
    • Sound: Battle-Win.ogg
    • Extra effects: Show win screen from game OR tracker animation, drawn like "this icon", use Miguel's icons in leaderboard's feed
  • 💥 Battle - Lost
    • Player movement: Y-value increases +50 px (down on screen)
    • Sound: Battle-Lost.ogg
    • Extra effects: Goes grey or loses opacity
  • 🔢 Leaderboard position changes
    • Player movement: Higher in leaderboard —> longer tail
    • Sound: Leaderboard.ogg
    • Extra effects: ?

Other ideas on movement:

• CSShake hard shake
• Rumble glitch GIF, see "this pigeon"

Effects

• PlayerTrails 👈
  • Create "Nyan Cat" trails (particle system?) (some examples on google)
  • Connect each trail to a product marketing category from streams using colors from the monster gradients
  • Add/remove trails based on streams updates
  • Add/remove monsters from data trail based on streams updates
• Anaglyph3D
  • Add / test Anaglyph3D shader
• Marine Snow / Floating stars 👈
  • Use particle system to create small floating objects to give the visual display depth, for example:
    • Snow similar to the upside down floaty bits
    • Detritus in undersea life a.k.a "marine snow"
    • Stars in cosmos

Lighting

• Change project to URP (Universal Render Pipeline)
• Setup 2D renderer and lights
• Point lights on GameObjects
• Light emitters on player trails
• Environmental lighting
• Changes to lighting depending on time of day
• Baking, etc. performance considerations
• Add Fog
  • Examples 1, 2, 3
• Add texture to background

Delivery

• NCSU Visualization Studio
  • Implement 8 camera system
  • Figure out player control device
• Mobile app?

Notes on the setup of this Unity project

• How to get Good Graphics in Unity (8:13)
• REALTIME LIGHTING in Unity (15:47)

Documentation / Instructions

Testing

• You can change the type of data to see either all data (mainly streams, but also game data) or feed (only game objects, which is more diverse). Select DataManager and change “Chosen endpoint” to “Range plus stream 1 hour” or “Recent 20” (this is the more diverse game objects).