---
title: dune of sidonia
canonical: "https://presque.cool/projects/dune-of-sidonia/"
description: "Des cartes postales de mondes étranges. Dunes ondulantes, soleils binaires, étoiles filantes — inspiré par Moebius et l'univers de Dune."
---

<div data-lang="fr">

## Le pitch

Dune of Sidonia est un générateur de cartes postales de mondes étranges. Des dunes ondulantes, des soleils binaires ou des lunes multiples, des étoiles scintillantes et des étoiles filantes — le tout organisé en une grille de 9 vignettes, chacune unique et partageable.

**Essayer** : [presque.cool/dune-of-sidonia/](https://presque.cool/dune-of-sidonia/)

<div class="quick-overview">
  <div class="overview-item">
    <span class="overview-label">Durée</span>
    <span class="overview-value">~2 semaines</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Période</span>
    <span class="overview-value">Mai 2022 → Déc 2025</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 mai 2022, j'étais plongé dans plusieurs univers qui se sont mélangés : une relecture de "Dune" de Frank Herbert, la découverte de "The Ultraviolet Grasslands and the Black City", et des bandes dessinées de Jean Giraud (Moebius).

Je suis aussi tombé sur une [expérimentation de Aragakey](https://codepen.io/aragakey/pen/VwyYpgx) qui générait des paysages en grille — l'idée m'a séduit.

J'ai voulu créer des cartes postales de mondes étranges. Le projet a un peu dérivé, mais l'intention est restée : quelque chose de contemplatif, des paysages désertiques générés qu'on peut regarder et partager.

---

## Comment ça fonctionne

**Grille de 9 vignettes** :
Chaque tableau contient 9 paysages générés. On peut régénérer une vignette individuellement ou changer sa palette de couleurs. Le format 3×3 — directement inspiré de [l'expérimentation d'Aragakey](https://codepen.io/aragakey/pen/VwyYpgx) — invite à comparer les variations entre elles.

**Dunes procédurales : du trop régulier à l'organique** :
Le terrain est généré par superposition de courbes mathématiques. Des sinusoïdes seules produisent des dunes trop régulières, artificielles. Des gaussiennes apportent des pics crédibles mais sans chaos. C'est en combinant les deux avec une couche de bruit que le résultat devient convaincant — cinq couches de profondeur avec des opacités décroissantes simulent la distance. Tout a été ajusté par itération, au feeling, en essayant de retrouver l'esthétique des planches de Moebius et des paysages de Dune.

**Soleils et lunes** :
Le ciel peut contenir 1, 2 ou 3 astres selon le type (soleil ou lune), avec des tailles et positions relatives calculées.

**Étoiles et étoiles filantes** :
Les étoiles scintillent avec des phases individuelles. Les étoiles filantes n'apparaissent que si le ciel est suffisamment sombre.

**9 palettes** :
Aurore, Brise, Crépuscule, Dune, Eclipse, Flamme, Givre, Horizon, Infini — chaque palette donne une ambiance différente au même paysage. Les noms évocateurs plutôt que des codes couleur renforcent l'aspect contemplatif.

**Partage via URL** :
L'état complet des 9 vignettes est encodé dans l'URL. Chaque vignette dérive sa seed de la seed principale — un "nom de planète" au format `XX-YYYY-ZZ` (ex : `42-ABCD-99`) — combinée avec son index et sa palette. Les compteurs de régénération et les palettes sont encodés en base 36 (un caractère par vignette), ce qui permet de représenter les 9 vignettes en seulement 9 caractères. Résultat : une URL de 12 à 30 caractères selon l'état — assez courte pour être partagée n'importe où.

---

## Stack technique

<ul class="tech-stack">
  <li><strong>React</strong> + <strong>TypeScript</strong> — Composants fonctionnels, typage strict</li>
  <li><strong>Vite</strong> + <strong>SWC</strong> — Build rapide avec Hot Module Replacement</li>
  <li><strong>Tailwind CSS</strong> — Configuration CSS-first, classes utilitaires</li>
  <li><strong>Canvas API</strong> — Rendu des paysages avec multiples couches</li>
  <li><strong>PRNG Mulberry32</strong> — Génération déterministe à partir d'une seed</li>
  <li><strong>PWA</strong> — installable, offline</li>
  <li><strong>i18n</strong> maison — Français/anglais sans dépendance externe</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                                                       |
| -------- | ------- | ----------------------------------------------------------------- |
| Mai 2022 | 1.0     | Prototype initial — génération de paysages désertiques en grille  |
| Déc 2025 | 2.0     | Refonte React — Migration vers React/TypeScript pour presque.cool |

---

## Bilan

**Ce que j'ai appris** :

- La génération de terrain avec superposition de courbes mathématiques (gaussiennes + sinusoïdes + bruit)
- Comment encoder un état complexe (9 vignettes × paramètres multiples) dans une URL partageable
- L'importance des palettes de couleurs pour donner une identité à des formes abstraites

**Ce que je referais pareil** :

- Le format grille 3×3 — il invite à comparer les variations, c'est plus intéressant qu'un paysage unique
- Les palettes nommées avec des noms évocateurs plutôt que des codes couleur

**Ce que je changerais** :

- J'essaierais d'apporter plus de variété de décors — pour l'instant les paysages restent des variations sur le même thème désertique.
- Animer les paysages — du vent sur les dunes, des étoiles filantes en mouvement, des soleils qui pulsent — pour passer de la carte postale statique à quelque chose de vivant.

</div>

<div data-lang="en">

## The pitch

Dune of Sidonia is a strange world postcard generator. Undulating dunes, binary suns or multiple moons, twinkling stars and shooting stars — all arranged in a grid of 9 vignettes, each unique and shareable.

**Try it**: [presque.cool/dune-of-sidonia/](https://presque.cool/dune-of-sidonia/)

<div class="quick-overview">
  <div class="overview-item">
    <span class="overview-label">Duration</span>
    <span class="overview-value">~2 weeks</span>
  </div>
  <div class="overview-item">
    <span class="overview-label">Period</span>
    <span class="overview-value">May 2022 → Dec 2025</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 May 2022, I was immersed in several universes that blended together: a re-read of Frank Herbert's "Dune", the discovery of "The Ultraviolet Grasslands and the Black City", and comics by Jean Giraud (Moebius).

I also came across an [experiment by Aragakey](https://codepen.io/aragakey/pen/VwyYpgx) that generated landscapes in a grid — the idea appealed to me.

I wanted to create postcards from strange worlds. The project drifted a bit, but the intention remained: something contemplative, generated desert landscapes that you can look at and share.

---

## How it works

**Grid of 9 vignettes**:
Each tableau contains 9 generated landscapes. You can regenerate a vignette individually or change its color palette. The 3×3 format — directly inspired by [Aragakey's experiment](https://codepen.io/aragakey/pen/VwyYpgx) — invites comparison between variations.

**Procedural dunes: from too regular to organic**:
Terrain is generated by layering mathematical curves. Sine waves alone produce dunes that are too regular, artificial. Gaussians bring credible peaks but without chaos. It's by combining both with a noise layer that the result becomes convincing — five depth layers with decreasing opacities simulate distance. Everything was tuned by iteration, by feel, trying to recapture the aesthetic of Moebius plates and Dune landscapes.

**Suns and moons**:
The sky can contain 1, 2, or 3 celestial bodies depending on type (sun or moon), with calculated relative sizes and positions.

**Stars and shooting stars**:
Stars twinkle with individual phases. Shooting stars only appear if the sky is dark enough.

**9 palettes**:
Aurore, Brise, Crépuscule, Dune, Eclipse, Flamme, Givre, Horizon, Infini — each palette gives a different mood to the same landscape. Evocative names rather than color codes reinforce the contemplative aspect.

**URL sharing**:
The complete state of all 9 vignettes is encoded in the URL. Each vignette derives its seed from the main seed — a "planet name" in `XX-YYYY-ZZ` format (e.g., `42-ABCD-99`) — combined with its index and palette. Regeneration counters and palettes are encoded in base 36 (one character per vignette), representing all 9 vignettes in just 9 characters. Result: a URL of 12 to 30 characters depending on state — short enough to share anywhere.

---

## Tech stack

<ul class="tech-stack">
  <li><strong>React</strong> + <strong>TypeScript</strong> — Functional components, strict typing</li>
  <li><strong>Vite</strong> + <strong>SWC</strong> — Fast builds with Hot Module Replacement</li>
  <li><strong>Tailwind CSS</strong> — CSS-first configuration, utility classes</li>
  <li><strong>Canvas API</strong> — Landscape rendering with multiple layers</li>
  <li><strong>PRNG Mulberry32</strong> — Deterministic generation from a seed</li>
  <li><strong>PWA</strong> — installable, offline</li>
  <li><strong>i18n</strong> custom — French/English without external dependency</li>
<li><strong>Compression</strong> — Brotli + Gzip on assets</li>
<li><strong>CSP</strong> — Content-Security-Policy with auto-generated hashes</li>
</ul>

---

## Timeline

| Date     | Version | Description                                                    |
| -------- | ------- | -------------------------------------------------------------- |
| May 2022 | 1.0     | Initial prototype — desert landscape generation in grid        |
| Dec 2025 | 2.0     | React rewrite — Migration to React/TypeScript for presque.cool |

---

## Takeaways

**What I learned**:

- Terrain generation with overlapping mathematical curves (Gaussians + sine waves + noise)
- How to encode a complex state (9 vignettes × multiple parameters) in a shareable URL
- The importance of color palettes in giving identity to abstract shapes

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

- The 3×3 grid format — it invites comparison of variations, more interesting than a single landscape
- Named palettes with evocative names rather than color codes

**What I'd change**:

- I'd try to bring more variety to the scenery — for now the landscapes remain variations on the same desert theme.
- Animate the landscapes — wind sweeping over dunes, shooting stars streaking across, suns pulsing — to move from static postcards to something alive.

</div>