Found in Space Learn & build

Lesson 7

Build a small app

Move from examples to app architecture. Choose a shape, load the stars you need, project them into app coordinates, render with your own renderer, then add interaction and labels.

Learning goal

This lesson is the handoff from data rows to an app shape. The provider streams star cells, your code projects those cells into the model your app wants, and your renderer draws that model.

The runnable demo uses the browser 2D canvas so there is no framework noise. The same rows can feed PixiJS, Phaser, SVG, WebGL, or a renderer you write yourself. It also adds pointer picking and sidecar-backed hover labels so the previous data lessons land inside one compact app shape.

This is still the data/no-viewer path from lessons 5 and 6. SkyKit packages provide the stream; the application owns projection, drawing, interaction, and labels.

The comments in the live code tell the story in order: change the settings, stream compact star cells, project those cells into app rows, then draw the rows with an app-owned renderer.

Live code

Edit the compact app

Change the settings at the top, press Run, and watch the app-owned canvas renderer update.

Ready.
Console 
 
 
 
  
  
 
 
Things to try
 
     
  • Change settings.radiusPc at the top of the live app.
    •  
  • Change settings.halfThicknessPc to include a thicker or thinner slice.
    •  
  • Change settings.limitingMagnitude before the provider streams cells.
    •  
  • Hover bright stars to see metadata labels resolve from sidecars.
    •  
  • Change the fallback order in formatLabel().
    •  
  • Replace draw() with PixiJS, Phaser, SVG, or WebGL.
    •  
 
 
 
From here to Star Pilot
 
 Star Pilot is the companion
					app repository for this lesson. It keeps the same stream, project, and render shape
					from the compact demo, then swaps in production app parts: PixiJS rendering,
					inertial controls, metadata labels, and an app-owned loading strategy.

 

The advanced loading idea is the Pizza Strategy. It is still just a normal
StarCellStrategy: it selects cells that intersect the ship's circular
					slice, with extra loaded area around the visible view so the ship can move before the
					next stream update finishes.

 
 
 
What changed in the code
 

The demo does not create a SkyKit browser or viewer. It uses the provider stream
					directly, maps streamed cell coordinates from parsecs into app rows, and draws with
					app-owned rendering code.

 

The compact app requests objectRef, resolves hover labels with the
					same sidecar pattern from Lesson 6, and falls back to cell/ordinal labels when
					catalogue metadata is unavailable. Star Pilot expands the same pattern for hover
					and automatic map labels.

 
 
 
Source and next steps
 
Graduate to Star Pilot.
 

Open the Star Pilot repository when you are ready to see this lesson's architecture
					in a real app. Read it in layers: stream source, Pizza Strategy, projection math,
					renderer, controls, then labels.

  
 
 
Use this locally
 

For the compact canvas app, install the data packages and sidecar provider. Add
					the renderer package your app chooses when you move beyond browser canvas.

 
 
 Install app packages  
 
npm install @found-in-space/star-octree-provider@0.2.0 @found-in-space/star-trees@0.2.0 @found-in-space/meta-sidecar-provider@0.2.0
 
  
 
 Local imports  
 
import {
  OCTREE_DEFAULT,
  createStarOctreeProviderService,
} from '@found-in-space/star-octree-provider';
import {
  createObserverShellStrategy,
  createStarCellKey,
  temperatureToRgb,
} from '@found-in-space/star-trees';
 
  
 
 Metadata imports  
 
import {
  createMetaSidecarProviderService,
  deriveMetaSidecarUrlFromRenderUrl,
} from '@found-in-space/meta-sidecar-provider';
 
  

To inspect the full Star Pilot sketch, clone it and run its Vite dev server.

 
 
 Run Star Pilot  
 
git clone https://github.com/Found-in-Space/star-pilot.git
cd star-pilot
npm install
npm run dev -- --host 127.0.0.1 --port 4323