presque.cool
Back to projects
dune of sidonia icon

dune of sidonia

Mai 2022 App
Visit project

Postcards from strange worlds. Undulating dunes, binary suns, shooting stars — inspired by Moebius and the Dune universe.


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/

Durée ~2 semaines
Période Mai 2022 → Déc 2025
Stack
React TypeScript Canvas API PWA
Statut ✓ En production

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 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 — 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

  • React + TypeScript — Composants fonctionnels, typage strict
  • Vite + SWC — Build rapide avec Hot Module Replacement
  • Tailwind CSS — Configuration CSS-first, classes utilitaires
  • Canvas API — Rendu des paysages avec multiples couches
  • PRNG Mulberry32 — Génération déterministe à partir d'une seed
  • PWA — installable, offline
  • i18n maison — Français/anglais sans dépendance externe
  • Compression — Brotli + Gzip sur les assets
  • CSP — Content-Security-Policy avec hashes auto-générés

Évolutions

DateVersionDescription
Mai 20221.0Prototype initial — génération de paysages désertiques en grille
Déc 20252.0Refonte 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.

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/

Duration ~2 weeks
Period May 2022 → Dec 2025
Stack
React TypeScript Canvas API PWA
Status ✓ In production

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 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 — 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

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

Timeline

DateVersionDescription
May 20221.0Initial prototype — desert landscape generation in grid
Dec 20252.0React 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.

Settings

Language
Theme
Privacy Policy