Inspired by starship’s viewscreen from Star Trek & the Stellar Cartography scene from ST: Generations, this web app was created to provide some interesting 3D visuals of warp-speed (lightspeed, FTL) traveling with a Trek UI right in a modern browser without requiring any extra plugins. Many aspects of the scene & LCARS UI are generated dynamically & randomly, so the overall animation presented is always slightly different & unique.
👉 To access the User Guide within the site, click on the name “STARFIELD 47” in lower right corner. Or type ? to see all keyboard shortcuts.
Over the past month or so, I’ve been refining STARFIELD 47. Initially, it was going be a small maintenance update, with the goal of creating a long-form video for YouTube that can be run on TV or perhaps used as a type of ASMR video.
Been working on this update gradually over the past few months — schedule was rather chaotic. Though I’m really happy that this update is finally complete.
In essence, I integrated my Starfield 47 project into Titan.DS. And a new module was born. I’ve named it the STELLAR CARTOGRAPHY module!
You’ll find the button for this module, labeled STLR-CRTO, positioned just above the DNA Module button, towards the lower right corner of the main display. Once activated, Titan.DS will attempt to load the Starfield 47 website within an iframe (a website within a website). Due to the difference in UI design, the original interface of Starfield 47 wouldn’t fit well with Titan.DS. To resolve this, I created a new UI layer within Titan.DS that would communicate with the SF47 iframe. You can still interact with the 3D Space in this module, just like in Starfield 47. The keyboard shortcuts with Starfield 47 retain their functionality here as well. (Remember to click on the 3D Space before utilizing the shortcuts to ensure the module gains focus first.)
Stellar Cartography module infographic
It’s been while since my last update on this project… There’s this one feature that I wanted to add ever since I saw an example on Babylon.js Playground website. It’s a 3D star generated by using Babylon.js’s awesome particle system. I finally incorporated it in Starfield 47 with a few modifications & randomization.
So how to see the 3D big stars in STARFIELD 47? When the warp speed sits at zero, first turn on the Star Markers (STARS button) from the Control Panel (shortcut key T). Then click on any one of the star markers floating in the space to toggle the 3D star. Double-click on the 3D star or the text marker to change the camera’s zoom level. Or hit the shortcut key Y to focus on a random big star. Oh, black holes are out there too😉
Finally spent some time playing with Electron.js framework to turn Starfield 47 website into a desktop app. Once the desktop app is downloaded, it runs locally on your system without needing an internet connection. Multiple windows can be launched by using the Ctrl+N or Cmd+N keyboard shortcut. For Windows with multiple monitors, try Ctrl+Shift+F to activate the Super Fullscreen mode — a single Starfield 47 screen would span & display across on all of your screens. Additional keyboard shortcuts can be found in the README file.
Preview version of the Starfield 47 Desktop App can be downloaded from this Google Drive shared folder. Mac & Windows versions are available. Please read the “README” text file, especially for Mac users because of Mac OS’s built-in security measure could prompt the downloaded file being damaged.
Two long duration STARFIELD 47 videos are now available on my YouTube channel. Both are in 4K quality, perfect to be displayed on those large TV screens😉 Cheers~
The mini LCARS Display in STARFIELD 47 has gone through several small improvements & bug fixes in the past few months. The goal is to provide unique chart/graph animations that are aesthetically pleasing, that’s all 😊
I structured the mini LCARS Display with 3 root elements — a frame, a graph type and an optional panel of buttons. Each element has its own degree of variations & randomness:
Whew… finally finished adding sound effects to STARFIELD 47. Definitely more challenging than I anticipated to mix sound variations & randomness with interactive elements 😬 Also, modern web browsers do not allow audio playback right from the beginning if there’s no user interaction. This is a good thing in general. However, for developers, it’s rather tricky to work out the AudioContext detection in Javascript.
16 sound clips are used & mixed for various tasks in STARFIELD 47. And one of 6 different “whooshing” sounds is randomly used when the “space vector” is swinging.
Are you watching the new Star Trek: Strange New Worlds (SNW) TV series? Highly recommended! Not only the stories & characters were great, the tech displays on the show were phenomenal. Between this series and Star Trek: Picard, there were so many eye-catching fictional user interface effects to enjoy.
In SNW season 1 episode 7 “The Serene Squall,” I caught this interesting circular scanning display on Enterprise’s viewscreen. The show’s designer Timothy Peel shared this display animation on his Twitter account, link below. I thought it’d be cool to emulate & integrate it into STARFIELD 47.
When I started the STARFIELD 47 project, I was targeting for the modern desktop browser platform. Prior to this, the only touch screen tests I had done were right on my phone. Recently I was lucky to get a hold on an old PC laptop with touch-screen capability. And here’s a recorded session of the test.
After the recent addition of the ClipArt graph, it wasn’t too difficult to repurpose it and implement the slide-show-like SpaceImages graph for the Mini LCARS Display in STARFIELD 47.
I originally created the clipart sprites in Flash for System47 screensaver by using the Flash’s built-in rudimentary drawing tools. Each clip was just a static image, with no animation. In System47, I created a “info searching” animation effect by flipping a random static clip to another in several quick secessions. I recalled seeing similar effect several times on ST:TNG when Data or Geordi was looking up some database info from a display terminal. I thought it would be nice to repurpose these clipart images into STARFIELD 47.
Added an interactive mini-LCARS displays😀 The mini-LCARS can display several different types of graphs. Best to experience it on your desktop. STARFIELD 47
A new webapp project I started making this year. It’s like a bridge’s viewscreen on Star Trek. It’s also like a stellar cartography. It features: 3D + Warp Speed + LCARS. It’s a website, and no additional installation is needed. For best experience, please view STARFIELD 47 on a not-too-old desktop machine with modern browsers. Hope you’ll enjoy it😀
👉Tip: put it on fullscreen mode & wait for the AutoNav to kick in. STARFIELD 47
