35 log entries on Demo  / tagged with demo

devLog: How many turbolifts does the Enterprise-D have?

It’s a pretty big ship, so how many turbolifts are there on the big D?🤔 Is it unlimited like Voyager’s shuttles?😉🖖

YouTube Video thumbnail
  How many turbolifts does the Enterprise-D have?
👉devNote: New Ent-D project / work-in-progress: stress testing

devLog: Asset Prep for Ent-D LCARS

The Ent-D project development is moving along. Currently I’m setting up the lower panel LCARS. Will be adding some random blinking and color shifting to make it lively.

On an average size monitor, the buttons on this panel will be too small to be useful.🤔 Need to figure out a way to have functional buttons for the interactive features.

⬆️ Above image shows the full engineering display that I am replicating. It’s actually quite wide, in an approximately 20x9 aspect ratio.

🛠️ Dev site should be ready in less than 2 weeks, available for the paid supporters on Patreon & Ko-Fi. Cheers~

Turbolift 1: Sound Efx Added + new Startup Settings

New project development moved at a slower pace than planned over the last two months. I ended up putting focus on improving my previous project, TURBOLIFT 1. This update introduces new sound effects and a more refined ambient engine sound. I’ve also implemented a new settings section for better user customization. All settings are stored locally only.

: : Additional keyboard Shortcuts:   M for toggling audio.   ctrl+S for settings.

Happy Holidays~
🖖 Big shout out to all my Patreon & Ko-Fi supporters - Thanks!!

devLog: Enterprise-D MSD Asset Prep

I am in the early phase of creating my next LCARS project. The new web project will be an interactive version of the U.S.S. Enterprise-D’s master system display (MSD). My goal is to mimic the iconic LCARS style & color scheme from the displays used in ST:TNG era.

YouTube Video thumbnail

TURBOLIFT 1 is Now Online / new project

MAP Module, Now on Titan.DS

Remember this star chart by Andrew Jarvis featured in Season 1 of Star Trek: Picard? …Well, I’ve finally turned it into an interactive MAP module on Titan.DS🙂

This map represents a very small region of space in the Alpha & Beta quadrants of our Milky Way galaxy. To provide context, I’ve also added a Galaxy View to contrast with the Regional View. (*Our galaxy is really big!) ⬇️Here is a quick demo video of the new module. A longer walk-through video will be published soon.

Titan.DS: Now with Auto Mode!

One of my goals for Titan.DS has been to find ways to keep it visually engaging, even when you’re not actively interacting with it. It’s taken a while to get here because Titan.DS’s codebase has grown significantly over the last two years. I’ve spent the past several months reorganizing and scaling the app’s internal logic. This made it easier to develop the algorithm for Auto Mode’s controlled randomness, and I’m pretty excited to finally release it! This feature has been requested by several fans, with the first request dating back quite a while❤️ If you’ve used Auto Mode in my other projects: STARFIELD 47 & Project RITOS, you’ll feel right at home🙂

YouTube Video thumbnail
  Titan.DS Auto Mode Demo

New on Titan.DS: Customizable Settings + User Manual

App Settings

This update introduces a new Settings section for Titan.DS. Several internal variables can now be customized. These settings are stored locally only, and they will stay in effect when you revisit the site. A “reset” button has been added to the loading screen to revert all settings to their default values. This button is hidden unless a setting has been modified from its default.

NOTE: The setting, “Text Rendering on Buttons,” primarily affects the Chrome browser. Its default setting minimizes text flickering but may result slight blurriness.

Titan.DS Desktop App • v0.5.0 beta

Desktop app version of the Titan.DS website, packaged by using Electron framework. The content of the app is self-contained, no internet connection required. Right click on the app window to access options from the popup context menu.

Titan.DS Warp Drive YouTube Demo Video

New YouTube video is up! It showcases the functionalities of the latest Titan.DS module. Info about this Warp Drive module’s release can be found in the November 18 log entry.

YouTube Video thumbnail
  Titan.DS Warp Drive Module Demo

Romulan Valdore Arcade Game

Just having fun… Attempted at recreating the Romulan Valdore arcade game from that small yet adorable scene in Star Trek: Lower Decks episode 5x05 “Starbase 80?!”

So far it’s a demo, a proof of concept. Not sure if I should continue in making this one. Though I do wonder who the final boss is🤔 Btw, the Romulan emblem on top of that machine looks quite marvelous!

Titan.DS devLog: building the Warp Drive

Previewing the Matter/Antimatter Injectors and Warp Coils, part of the upcoming WARP DRIVE module on Titan.DS website.

SVG line art elements were created in Figma, then animated via CSS & Javascript. The new module is scheduled to be released later this month. Cheers🩵🖖
*Design Reference :: Star Trek: Picard & Mike Okuda’s TNG Technical Manual (wiki_link)

YouTube Video thumbnail
  Titan.DS Warp Drive Module Demo

Protostar.NX :: New Project

Protostar.NX is now active at meWho.com/protostar

Protostar Plan View Module Protostar Plan View Module

This blueish LCARS stands unique in its slight difference from the traditional Trek interface. It is based on the fictional UI seen on the starship U.S.S. Protostar in Star Trek: Prodigy.

Titan.DS new module: NCC-1031 • USS Discovery

As the TV series “ST: Discovery” coming to a close, here I present you my latest module addition, NCC-1031, to the Titan.DS website. The toggle for this new module can be found on the right side of the main display, sitting below the NCC-1701-G module button.

APOD STARDATE

APOD STARDATE is my interpretation of a webapp featuring minimal Star Trek LCARS UI, displaying astronomical image/text content from the NASA APOD website (Astronomy Picture of the Day). It includes voice narration, audio visualizer, and sound effects. The UI is interactive and responsive for various screen resolutions. Given the stunning visuals of many APOD images, this webapp is optimally developed for a desktop experience.

APOD Stardate screenshots APOD Stardate screenshots

devLog: Project E.D.E. / Creating LCARS in Figma

Project EDE :: a work in progress.
Been wanting to recreate this Enterprise-D LCARS for a while. Original graphic by Mike Okuda (& possibly Rick Sternbach* too?), seen in the ST:TNG episode S7x23 — “Emergence”. This design is like an artwork, so I am making it a standalone simple webpage with minimal animations & interactivity.

I twitted about* this LCARS image in Feb 2023. 💙Thanks to Portal Realm & Joe Ralat for sharing the reference images.

YouTube Video thumbnail
  Project E.D.E. devLog

Titan.DS December Holiday Musical Update

This Titan.DS holiday update idea came at the last minute. Initially, I was attempting to fix the existing sound effect on the ten 3D DNA pairs so that they would match a musical note scale. Previously, I had the audio pitch (PlaybackRate) change on a linear scale via Javascript. After some R&D, I adjusted it to a logarithmic scale. And that worked! Then, one thing led another, and I added a holiday musical section to the DNA module! I might have learned more about musical notation during this update than I’ll ever need😂 Oh, one of the music clips is my very poor imitation of Data’s Life Forms song😬

Titan.DS December Update Infographic Titan.DS December Update Infographic

Titan.DS Enterprise-G YouTube Videos

Uploaded two Enterprise-G related videos to my YouTube channel.

  1. A User Manual / Demo Video: This one covers all the interactive elements in the new Enterprise-G module. It also reveals several easter eggs I buried🙂 The video resolution goes up to 4K.
  2. A Long Duration Video: This one-hour video of the Enterprise-G module was recorded in 4K — could be fun to play it on a tablet, or on a TV via Chromecast, Fire Stick, or other similar devices.

If you enjoyed these videos, be sure to Like/Share/Subscribe🧡 Thanks!

Titan.DS Update: Enterprise-G

The new Enterprise-G module is ready just in time for Halloween🎃. As usual, you can activate this module using a button located on the right-side panel of the main display. Look for the NCC-1701-G button on the Titan.DS website. Please keep in mind that this is a fairly resource-intensive module, so it might affect browser performance on slower/older machines😬

Drawing inspiration from the rich source materials of ST: Picard, I’ve remixed & incorporated various UI elements from season 3 into this module. A big shout-out to Jeremy M for sharing some set photos he took; they’ve been a big help for referencing🧡 Additional reference photos publicly & generously tweeted by Dave Blass and Bill Krause were utilized. Bill Krause is the designer of the Constitution III Titan!

⚠️ Designed with a focus on 4k displays, this particular module may display smaller elements & text as slightly fuzzy or blurry on an HD (1080p) display😬

SPACEDOCK Module Added to Titan.DS

This Spacedock (Sol Station 398392 / aka Probert Station) is based on a short LCARS video clip tweeted by ST: Picard’s FUI (Fictional UI) designer Andrew Jarvis. That clip could be briefly spotted in season 3. I made a few changes & added several interactive animations so that it could be integrated with the Titan.DS website smoothly.

A kind warning: I used a combination of SVG animation and CSS 3D transform to create the overall effect. It could be a bit heavy when running on a underpowered machine, resulting sluggish performance. And somehow Firefox crashes frequently when displaying this module, at least on my machine 🤷 ¯\_(ツ)_/¯   👉I will make a long recording of this module and share it on my YouTube channel soon, so that everyone could enjoy this Spacedock animation without needing a fast computer.

YouTube Video thumbnail
  Spacedock Module demo

🔶Additional short videos & high-resolution screenshots are available in my online albums:


Anyhoo, besides being an interactive module, I’ve also repurposed those spinning mini LCARS to list out names of my project supporters on the Patreon & Ko-Fi platforms, as my special way of making shoutouts😉 🧡 YOUR CONTINUED SUPPORT IS MOST APPRECIATED! The names are arranged randomly on each refresh. Remember to use the “Via Patreon” & “Via Ko-Fi” buttons to switch on/off the platform category.

What’s next on Titan.DS? It will be an Enterprise-G sideview display — voted recently by my Patreon members😃 Cheers~

Titan.DS with embedded Starfield 47 = Stellar Cartography!

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.)

Starfield 47 Website Updated with Big Stars🌟

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.

YouTube Video thumbnail
  Starfield 47: 2023 July Update demo

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😉

USS Enterprise (SNW) module added to Titan.DS

A new starship module has been added: the USS Enterprise, NCC-1701 — the version from ST: Strange New Worlds (SNW). This wireframe graphic was recreated based on the images tweeted by Timothy Peel, SNW’s motion graphic designer/supervisor.

Since it’s a wireframe graphic, I thought it’d be fun to have a new ‘revealing’ animation sequence to go along with its line art style. I utilized SVG format’s stroke-dasharray property to create the line drawing effect. This main revealing sequence would always start on the line drawing of the saucer section. It’d then proceed to either the nacelles, the pylons or the engineering hull section by chance. As usual, I tried to build in as much randomization as possible, so the overall effect would always be presented slightly different on each run. The bridge, the saucer section & the nacelles are all responsive to clicks.😉

Small improvements were made on other ships as well. Titan.DS now has a total of 3 starship modules (Enterprise, ENT-D & ENT-F). More will be added in the future. Cheers~

YouTube Video thumbnail
  NCC-1701 Module demo

Titan.DS: 1-hour long YouTube video

I recorded an 1-hour long video of Titan.DS in 4K resolution running with full sound effects on, including the ambient engine noise. A glow effect was added in the post with a video editing software before I uploaded the video to YouTube.

Ideally this could be viewed on a big smart TV via a YouTube app or a Chromecast/Fire Stick/Roku. A less powerful computer or tablet could also easily play this video, as opposed to running the more CPU-demanding Titan.DS website (Titan Display System).

YouTube Video thumbnail
  Titan.DS: SFX with Ambient Engine Noise, 1-Hour Loop in 4K

Let me know if there are other types of video you’d like to see🖖

Trek Countdown released

30 Days left to Star Trek: Picard’s season 3 premiere!!!
Made a new Trek Countdown webpage in ST: Picard’s new LCARS style (LCARS 2.0 ?) for easy tracking on the upcoming Trek episode.

👉Trek Countdown *on desktop: hit the top-right box to go fullscreen

YouTube Video thumbnail
  Trek Countdown demo

Project RITOS • dev Preview

YouTube Video thumbnail
  Project RITOS • dev Preview

Star Trek: Lower Decks started its season 3 about a month & a half ago. It has been great, and I love every single episode so far! In season 1, I did feel pretty neutral about the USS Cerritos. Though now it has certainly grown on me. So I decided to spend some time recreating its schematics (MSD / Master System Display).

STARFIELD 47 • Mini LCARS Display Demo

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 😊

YouTube Video thumbnail
  Starfield 47 • Mini LCARS Display demo

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:

STARFIELD 47 • devLog: Sound Effects

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.

YouTube Video thumbnail
  Starfield 47 • devLog: Sound Effects

STARFIELD 47 • devLog: Creating the circular Proximity Scan effect

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.

YouTube Video thumbnail
  Starfield 47 • devLog: Creating the circular Proximity Scan effect

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.

STARFIELD 47 • devLog: Touch Screen Test

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.

YouTube Video thumbnail
  Starfield 47 • devLog: Touch Screen Test

STARFIELD 47 WEBB

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.

YouTube Video thumbnail
  Starfield 47 • SpaceImages Display demo

STARFIELD 47 • devLog: ClipArt Display

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.

YouTube Video thumbnail
  Starfield 47 • devLog: ClipArt Display

Introducing 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

YouTube Video thumbnail
  Starfield 47 Experience / demo

System 47 - version 2.5 Previews

Hi, meWho here… I created System 47 screensaver’s LCARS animation way back in 1999. It’s been a freeware from the beginning. Development was later seized in 2005/2006 — life got in the way :-/

Now, it’s 2021. How things have changed. Multiple new Star Trek series are on TV again, and the LCARS (ST:TNG computer display interface) can still be seen prominently in Star Trek: Picard & Star Trek: Lower Decks! What an exciting time. So I dug out the old source file and started working on System47 updates again :-)

Version number will be moved up from 2.2 to 2.5. In some respects, this won’t seem like a huge update. However, some features I’ve added are the ones that System47 fans (and me myself) have been wanting for a long time. New features are:

  • utilizing full 16x9 display area
  • numerous upgrades to the Enterprise-E schematic animation
  • volumes from effect sound and background sound can be independently adjusted
  • bumping up the frame rate from 18 to 30FPS, resulting smoother animation — sorry, this might cause some low-end computers to struggle more with the playback

Hoping to release the beta version in November 2021. Feel free to leave a message right on my YouTube channel. Cheers🙂