Skip to content
poliglePublic

About

Real-time ASCII renderer for procedural 3D satellites. Single HTML file (Three.js + gif.js) that exports transparent GIFs for GitHub READMEs.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Latest commit

 

History

3 Commits

Folders and files

Repository files navigation

ASCSAT

Real-time ASCII renderer for procedural 3D spacecraft.
One HTML file, no build step. Exports transparent GIFs for GitHub READMEs.

Open the app

Voyager-style probe rendered in ASCII line art, rotating

Sputnik 1, standard ramp, Amber CRT palette Hubble-style observatory, quadrant blocks, Tokyonight palette ISS-style station, dense ramp, Cyberpunk palette

Features

  • Ten procedural spacecraft, built from Three.js primitives when the page loads (see the table below).
  • Six character sets: edge-aware line art (| / - \ +), standard (.:-=+*#%@), dense (24 glyphs ordered by measured ink coverage), blocks (░▒▓█), quadrant blocks (2×2 sub-pixels per character) and binary.
  • Transparent void: empty cells are plain spaces and the output layer has no background, so the render floats on whatever sits behind it.
  • Attitude control: independent pitch, yaw and roll rates in the body frame, drag to turn the view, wheel to zoom, play/pause and reset.
  • Image controls: columns, contrast, brightness, gamma, void floor and the line-art edge threshold.
  • Seven palettes: NixOS, Matrix, Cyberpunk, Dracula, Tokyonight, Amber CRT and Mono.
  • GIF export in the browser with gif.js: transparent or solid background, seamless 360° loops, live size and memory estimate, progress dialog, and a preview on checker, GitHub dark and GitHub light backgrounds.
  • README embed generator: Markdown, <img> or centered HTML, with a relative path or a raw.githubusercontent.com URL.
  • Copy any frame as plain text for code blocks or terminals.
  • Settings are kept in localStorage.

Spacecraft

Key Spacecraft Based on
1 CubeSat 3U CubeSat 3U form factor
2 LEO NavSat Generic design
3 Space Observatory Hubble (1990)
4 Sputnik 1 Sputnik 1 (1957)
5 GNSS MEO Galileo FOC (2014)
6 GEO ComSat Generic dual-reflector bus
7 Deep Space Probe Voyager (1977)
8 IR Observatory JWST (2021)
9 Space Station ISS (1998 onward)
0 Broadband LEO Generic flat-panel constellation design

The shapes are simplified interpretations of real missions, not engineering models, and they are not to scale.

Interface

ASCSAT interface with spacecraft and attitude controls, the ASCII viewport, and the GIF export and README embed panels

Keyboard

Key Action
Space Play or pause
R Reset view
1 to 0 Select spacecraft
M / Shift+M Next or previous character set
T / Shift+T Next or previous palette
[ / ] Fewer or more columns
Arrow keys Turn the view by 5°
+ / - Zoom
C Copy the current frame as text
G Render a GIF

With the mouse: drag to rotate, scroll to zoom, double-click to reset.

Put a render on your profile README

  1. Open the app and pick a spacecraft, a character set and a palette.
  2. In export gif, choose the aspect, glyph size and background, then press render gif and download gif. A transparent background works on both GitHub themes.
  3. Commit the file to the repository that holds the README, for example under assets/ in your <username>/<username> profile repository.
  4. Copy the snippet from readme embed and paste it into README.md.

Light glyph colors such as Mono and Matrix have little contrast on GitHub's light theme; the export panel warns about it.

How it works

  1. Three.js renders the scene into a small WebGL canvas with 2×2 samples per character cell (4×4 in quadrant mode). A fixed three-point studio rig lights the craft, so the shading changes as it turns.
  2. Each frame is drawn into an offscreen 2D canvas created with willReadFrequently: true and read back with getImageData.
  3. Every cell gets a coverage value and a luminance (Rec. 709 weights) that passes through a brightness, contrast and gamma lookup table. Cells with low coverage, or with a tone below the void floor, become a space.
  4. Line art computes Sobel gradients, smooths them into a structure tensor, thins them with non-maximum suppression and picks |, /, - or \ from the edge orientation, corrected for the tall aspect of a character cell. Corners with low coherence become +.
  5. Framing solves the camera distance from the volume the craft sweeps around its spin axis, so a full rotation stays in frame at zoom 1.
  6. GIF frames are painted from a pre-rendered glyph atlas, snapped to 1-bit alpha (GIF transparency is binary) and encoded by gif.js in web workers. Seamless mode spreads exactly one turn about the spin axis over the chosen number of frames.

Run locally

git clone https://github.com/poligle/ascsat.git
cd ascsat
python3 -m http.server 8000

Then open http://localhost:8000. The libraries load from public CDNs, so an internet connection is needed.

Stack

Component Version Notes
Three.js r128 cdnjs, with jsDelivr as fallback
gif.js 0.2.0 Loaded on first export; the worker is fetched and run from a Blob URL
Tailwind CSS 3.4.17 Play CDN
JetBrains Mono 2.304 Embedded as a ligature-free subset (Regular and Bold)

License

The code is released under the MIT License.

JetBrains Mono is © 2020 The JetBrains Mono Project Authors and is licensed under the SIL Open Font License 1.1 (licenses/JetBrainsMono-OFL.txt). The subset embedded in index.html stays under the OFL. Three.js, gif.js and Tailwind CSS are MIT-licensed and loaded from CDNs; they are not redistributed in this repository.

About

Real-time ASCII renderer for procedural 3D satellites. Single HTML file (Three.js + gif.js) that exports transparent GIFs for GitHub READMEs.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages