---
title: cosmographe
canonical: "https://presque.cool/projects/cosmographe/"
description: "Dessinez vos propres constellations sur un champ stellaire procédural. Nommez-les, partagez-les, explorez des ciels infinis."
---

<div data-lang="fr">

## Le pitch

Cosmographe est un outil interactif de dessin de constellations sur un champ stellaire procédural. On tape un mot-clef (la "seed"), un ciel unique apparaît, et on connecte les étoiles pour tracer ses propres constellations. Chaque ciel est déterministe et partageable via URL.

**Essayer** : [presque.cool/cosmographe/](https://presque.cool/cosmographe/)

<div class="quick-overview">
  <div class="overview-item">
    <span class="overview-label">Durée</span>
    <span class="overview-value">~10 jours</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Période</span>
    <span class="overview-value">Sep 2022 → Fév 2026</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Stack</span>
    <div class="tech-tags">
      <span class="tech-tag">React</span>
      <span class="tech-tag">TypeScript</span>
      <span class="tech-tag">Canvas API</span>
      <span class="tech-tag">PWA</span>
    </div>
  </div>
  <div class="overview-item">
    <span class="overview-label">Statut</span>
    <span class="overview-value accent">✓ En production</span>
  </div>
</div>

---

## Pourquoi ce projet

En septembre 2022, lors d'un voyage, j'ai pu observer le ciel étoilé à travers un télescope astronomique. Cette expérience m'a marqué — la sensation de regarder un ciel immense et d'y projeter ses propres formes, ses propres histoires.

J'ai voulu reproduire cette sensation dans le navigateur : un ciel généré, des étoiles qu'on connecte, des constellations qu'on nomme. Pas un simulateur d'astronomie, mais un outil de dessin contemplatif sur fond de voûte céleste procédural.

---

## Deux versions, deux époques

**Prototype Svelte (septembre 2022)** :
Première version construite en Svelte en environ une semaine. Le concept était déjà là — seed textuelle, champ stellaire déterministe, dessin de constellations — mais le code et l'interface restaient bruts.

**Version React (février 2026)** :
Réécriture complète en 3 jours. Pas une migration — un projet repensé de zéro avec React, TypeScript, Zustand et Tailwind CSS. L'esthétique a radicalement changé : un HUD d'instrument astronomique en glassmorphism, du film grain cinématique, une typographie serif/monospace qui évoque les atlas célestes anciens.

---

## L'expérience : dessiner ses propres étoiles

Le cœur de Cosmographe, c'est le geste. On clique sur une étoile, puis une autre, et un trait lumineux les relie. On trace des formes, on nomme ce qu'on voit — exactement comme les civilisations l'ont fait depuis des millénaires en regardant le ciel.

**Seed textuelle** — Chaque mot produit un ciel unique. "andromeda" génère toujours les mêmes 240 étoiles aux mêmes positions. On peut explorer des ciels différents ou revenir à un favori.

**Dessin interactif** — Un clic sur une étoile démarre une constellation. Chaque clic suivant ajoute un segment. On termine, on nomme, et la constellation rejoint le catalogue.

**Catalogue** — Un panneau latéral liste toutes les constellations tracées. On peut les renommer, les réactiver pour continuer le dessin, ou les supprimer.

**Partage via URL** — L'état complet (seed + constellations) est encodé dans le hash de l'URL en Base64 URL-safe. On partage un lien, et le destinataire voit exactement le même ciel avec les mêmes tracés.

---

## Le cœur technique : génération déterministe

Comme pour [Orbital Drift](/projects/orbital-drift/) et [Dune of Sidonia](/projects/dune-of-sidonia/), la génération repose sur un PRNG Mulberry32. La seed textuelle est hashée (MurmurHash3 mix) en un entier 32 bits, puis le générateur produit une séquence déterministe de positions et magnitudes.

**Distribution réaliste** — La magnitude de chaque étoile suit une loi en puissance (carré de la valeur brute). Résultat : beaucoup d'étoiles faibles, quelques brillantes — comme dans un vrai ciel.

**Sky size minimum** — Le champ stellaire est généré sur un carré d'au moins 1600 pixels CSS, quelle que soit la taille de l'écran. Cela garantit une densité d'étoiles cohérente entre un mobile (390px) et un écran desktop (1920px).

**Pan & zoom** — Le ciel est souvent plus grand que le viewport. On peut le faire glisser pour explorer les zones hors-champ. Le gesture distingue un clic (sélection d'étoile) d'un drag (déplacement) via un seuil de distance.

---

## L'esthétique : instrument astronomique

L'interface s'inspire des instruments d'observation — télescopes, cartes célestes, cadrans d'astrolabe.

- **Glassmorphism** — Les panneaux du HUD sont semi-transparents avec un blur de 24px, comme des écrans superposés au ciel
- **Film grain** — Un bruit fractal en SVG inline, subtil (opacité 2.8%), qui donne une texture cinématique au fond sombre
- **Brackets de viseur** — Quatre crochets angulaires aux coins de l'écran, comme un réticule de télescope
- **Typographie duale** — Georgia serif italique pour le titre (atlas), monospace pour les contrôles (instrument)
- **Palette ambre/void** — Accent doré (#c8a860) sur fond quasi-noir (#050508), évoquant les écrans d'instruments scientifiques

---

## Stack technique

<ul class="tech-stack">
  <li><strong>React</strong> + <strong>TypeScript</strong> — Composants fonctionnels, typage strict</li>
  <li><strong>Zustand</strong> — State management avec persistance localStorage et sync URL</li>
  <li><strong>Vite</strong> + <strong>SWC</strong> — Build rapide avec Hot Module Replacement</li>
  <li><strong>Tailwind CSS</strong> — Configuration CSS-first, variables OKLCH</li>
  <li><strong>Canvas API</strong> — Rendu des étoiles, constellations, effets visuels (twinkling, shooting stars, bloom)</li>
  <li><strong>PWA</strong> — installable, offline</li>
  <li><strong>i18n</strong> maison — Français/anglais sans dépendance externe</li>
  <li><strong>Lucide</strong> — Icônes</li>
<li><strong>Compression</strong> — Brotli + Gzip sur les assets</li>
<li><strong>CSP</strong> — Content-Security-Policy avec hashes auto-générés</li>
</ul>

---

## Évolutions

| Date     | Version | Description                                                             |
| -------- | ------- | ----------------------------------------------------------------------- |
| Sep 2022 | 1.0     | Prototype Svelte — Dessin de constellations sur champ stellaire         |
| Fév 2026 | 2.0     | Réécriture React — HUD glassmorphism, partage URL, catalogue, PWA, i18n |

---

## Bilan

**Durée** : environ 1 semaine (v1) + 3 jours (v2).

**Ce que j'ai appris** :

- Que la génération déterministe à partir d'une seed transforme un outil de dessin en expérience partageable — le même mot-clef produit le même ciel pour tout le monde
- La gestion fine des interactions Canvas (hit-testing d'étoiles, distinction clic/drag, seuils tactiles différents) demande une architecture soignée
- Le glassmorphism fonctionne naturellement sur un fond sombre et étoilé — les panneaux semblent flotter dans l'espace

**Ce que je referais pareil** :

- Le système de seed textuelle plutôt que numérique — taper "andromeda" ou "orion" ancre l'expérience dans l'imaginaire
- L'encodage compact de l'état dans le hash URL — partager un lien, c'est partager un ciel entier

**Ce que je changerais** :

- J'ajouterais un mode d'export d'image (PNG/SVG) pour sauvegarder ses cartes célestes
- Un mode collaboratif où plusieurs personnes dessinent sur le même ciel en temps réel

</div>

<div data-lang="en">

## The pitch

Cosmographe is an interactive constellation drawing tool on a procedurally generated star field. Type a keyword (the "seed"), a unique sky appears, and connect stars to trace your own constellations. Every sky is deterministic and shareable via URL.

**Try it**: [presque.cool/cosmographe/](https://presque.cool/cosmographe/)

<div class="quick-overview">
  <div class="overview-item">
    <span class="overview-label">Duration</span>
    <span class="overview-value">~10 days</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Period</span>
    <span class="overview-value">Sep 2022 → Feb 2026</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Stack</span>
    <div class="tech-tags">
      <span class="tech-tag">React</span>
      <span class="tech-tag">TypeScript</span>
      <span class="tech-tag">Canvas API</span>
      <span class="tech-tag">PWA</span>
    </div>
  </div>
  <div class="overview-item">
    <span class="overview-label">Status</span>
    <span class="overview-value accent">✓ In production</span>
  </div>
</div>

---

## Why this project

In September 2022, during a trip, I got to observe the night sky through an astronomical telescope. The experience stayed with me — that feeling of gazing at a vast sky and projecting your own shapes, your own stories onto it.

I wanted to recreate that feeling in the browser: a generated sky, stars you connect, constellations you name. Not an astronomy simulator, but a contemplative drawing tool on a procedural celestial vault.

---

## Two versions, two eras

**Svelte prototype (September 2022)**:
First version built in Svelte over about a week. The concept was already there — text seed, deterministic star field, constellation drawing — but the code and interface remained rough.

**React version (February 2026)**:
Complete rewrite in 3 days. Not a migration — a project rethought from scratch with React, TypeScript, Zustand, and Tailwind CSS. The aesthetic changed radically: an astronomical instrument HUD with glassmorphism, cinematic film grain, serif/monospace typography evoking ancient star atlases.

---

## The experience: drawing your own stars

The heart of Cosmographe is the gesture. Click a star, then another, and a luminous line connects them. Trace shapes, name what you see — exactly as civilizations have done for millennia while looking at the sky.

**Text seed** — Each word produces a unique sky. "andromeda" always generates the same 240 stars at the same positions. You can explore different skies or return to a favorite.

**Interactive drawing** — Clicking a star starts a constellation. Each subsequent click adds a segment. Finish, name it, and the constellation joins the catalogue.

**Catalogue** — A slide-up panel lists all drawn constellations. You can rename them, reactivate them to continue drawing, or delete them.

**URL sharing** — The full state (seed + constellations) is encoded in the URL hash as URL-safe Base64. Share a link, and the recipient sees exactly the same sky with the same tracings.

---

## The technical core: deterministic generation

Like [Orbital Drift](/projects/orbital-drift/) and [Dune of Sidonia](/projects/dune-of-sidonia/), generation relies on a Mulberry32 PRNG. The text seed is hashed (MurmurHash3 mix) into a 32-bit integer, then the generator produces a deterministic sequence of positions and magnitudes.

**Realistic distribution** — Each star's magnitude follows a power law (squared raw value). Result: many dim stars, a few bright ones — like a real sky.

**Minimum sky size** — The star field is generated on a square of at least 1600 CSS pixels, regardless of screen size. This ensures consistent star density between a phone (390px) and a desktop screen (1920px).

**Pan & drag** — The sky is often larger than the viewport. You can drag to explore off-screen areas. The gesture distinguishes a click (star selection) from a drag (panning) via a distance threshold.

---

## The aesthetic: astronomical instrument

The interface draws inspiration from observation instruments — telescopes, celestial maps, astrolabe dials.

- **Glassmorphism** — HUD panels are semi-transparent with 24px blur, like screens layered over the sky
- **Film grain** — Fractal SVG noise, subtle (2.8% opacity), giving a cinematic texture to the dark background
- **Viewfinder brackets** — Four corner brackets at the screen edges, like a telescope reticle
- **Dual typography** — Georgia serif italic for the title (atlas), monospace for controls (instrument)
- **Amber/void palette** — Golden accent (#c8a860) on near-black background (#050508), evoking scientific instrument screens

---

## Tech stack

<ul class="tech-stack">
  <li><strong>React</strong> + <strong>TypeScript</strong> — Functional components, strict typing</li>
  <li><strong>Zustand</strong> — State management with localStorage persistence and URL sync</li>
  <li><strong>Vite</strong> + <strong>SWC</strong> — Fast builds with Hot Module Replacement</li>
  <li><strong>Tailwind CSS</strong> — CSS-first configuration, OKLCH variables</li>
  <li><strong>Canvas API</strong> — Star rendering, constellations, visual effects (twinkling, shooting stars, bloom)</li>
  <li><strong>PWA</strong> — installable, offline</li>
  <li><strong>i18n</strong> custom — French/English without external dependency</li>
  <li><strong>Lucide</strong> — Icons</li>
<li><strong>Compression</strong> — Brotli + Gzip on assets</li>
<li><strong>CSP</strong> — Content-Security-Policy with auto-generated hashes</li>
</ul>

---

## Changelog

| Date     | Version | Description                                                          |
| -------- | ------- | -------------------------------------------------------------------- |
| Sep 2022 | 1.0     | Svelte prototype — Constellation drawing on star field               |
| Feb 2026 | 2.0     | React rewrite — Glassmorphism HUD, URL sharing, catalogue, PWA, i18n |

---

## Takeaways

**Duration**: about 1 week (v1) + 3 days (v2).

**What I learned**:

- That deterministic generation from a seed transforms a drawing tool into a shareable experience — the same keyword produces the same sky for everyone
- Fine-grained Canvas interaction management (star hit-testing, click/drag distinction, different touch thresholds) requires careful architecture
- Glassmorphism works naturally on a dark, starry background — panels seem to float in space

**What I'd do the same**:

- The text seed system rather than numeric — typing "andromeda" or "orion" anchors the experience in imagination
- Compact state encoding in the URL hash — sharing a link means sharing an entire sky

**What I'd change**:

- I'd add an image export mode (PNG/SVG) to save star charts
- A collaborative mode where multiple people draw on the same sky in real-time

</div>