Harvard GSD VIS 2476 - Visualizing the Invisible# Santa Fe Night Sky Timelapse Workflow ## Ricoh Theta X to 360° Panorama Video ### Overview This document describes the complete workflow for creating an interactive 360° timelapse from images shot on a Ricoh Theta X camera, hosted on geo.camera, and viewed through custom web interfaces. ### Equipment & Setup - **Camera**: Ricoh Theta X - **Location**: Santa Fe, NM - **Date**: August 10, 2025 (2:36 AM to 5:21 AM MT) - **Total Frames**: 157 individual 360° images (10-11MB each as 11004px x 5502px equirectangular JPEGs) ### Workflow Steps #### 1. Image Capture - Shot 157 frames on the Ricoh Theta X over approximately 2.5 hours - Files named sequentially: R0010024.JPG through R0010182.JPG - Each frame is a full 360° equirectangular image #### 2. File Upload & Hosting - Uploaded all original frames to geo.camera server - **Original frames directory**: https://geo.camera/guerin/cameras/theta-x/2025-08-10/ - Apache directory listing provides easy access to individual frames #### 3. Video Creation - Created an 8K timelapse video from the frames using FFMPEG - **8K Timelapse Video (equirectangular .mp4)**: https://geo.camera/guerin/cameras/theta-x/star_timelapse_8k_hq.mp4 - Note: "Did a short test and then restarted the timelapse halfway through - you'll see the camera position nudge a bit" #### 4. Video Processing - Resized the 8K video down for web playback using FFMPEG - Created a scrubbing-friendly version at 1920px resolution - **Web-optimized video**: https://geo.camera/guerin/cameras/theta-x/star_timelapse_1920_scrub.mp4 #### 5. Archive Creation - Compressed all original frames into a downloadable archive - **1.5 GB ZIP of all frames**: https://geo.camera/guerin/cameras/theta-x/redfish-ricoh-theta-x-1.zip ### Interactive Viewers Created #### Viewer 1: Full Screen 360° Video Player **URL**: https://geo.camera/guerin/pano-view.html **Features**: - Full screen immersive experience with no borders or scrollbars - Custom control panel with: - Play/Pause button - Loop toggle (default ON) - Speed slider (0.25x to 2x playback) - Fullscreen mode button - Auto-hiding controls for unobstructed viewing - Uses Pannellum.js for 360° navigation - Video.js for playback control **Technical Stack**: - Pannellum.js for panoramic viewing - Video.js with pannellum plugin - Custom CSS for full-screen experience - Responsive controls with blur effects #### Viewer 2: Static Frame Navigator **URL**: https://geo.camera/guerin/pano-frame-viewer.html **Features**: - Advances through individual frames instead of video playback - Reads Apache directory listing dynamically to get frame list - Subtle navigation controls: - Previous/Next frame buttons - Keyboard navigation (Arrow keys or A/D) - Number keys 1-9 for quick jumping (10%-90% of sequence) - Home/End keys for first/last frame - Smart image preloading (3 frames ahead/behind) - Frame counter showing current position - Maintains view angle when switching frames **URL Parameters**: - Accepts `?url=` parameter for loading different directories - Example: `https://geo.camera/guerin/pano-frame-viewer.html?url=https://geo.camera/guerin/cameras/theta-x/2025-08-10/` - Default URL is the Santa Fe timelapse directory - Users can also input custom URLs through the interface **Technical Implementation**: - Fetches and parses Apache directory listings - Creates Pannellum scenes for each image - Preserves pitch/yaw/zoom when advancing frames - Progressive image preloading with visual indicator - Memory management for preloaded images ### Development Notes Note the simple Claude.ai prmopt to make the frame reading pano viewer: > > 'great. now make a more static pano page that advances through the frames here: https://geo.camera/guerin/cameras/theta-x/2025-08-10/ > > read the apache directory to get the playlist. > > make the page start with that as the default url. but let the user change it. Also accept a query string. And if a query string is given just start in the full screen with frame advance and back button (subtle).'" ### File Structure Summary