strata.odd.place

World . Drag, scroll or use the arrow keys to wander; it goes on forever.

Shared room

Colour

Climb speed, layers per second Cycle speed, inks per second Wave offset per layer Flow speed Flow band length, px Hold before blending

Shape

Fold range Pinch range Dash size Thickness variety Swell: lenses and pinch-outs Domes and basins Relief: mountain height, px Relief: mountain width, px

Kaleidoscope

Kaleidoscope: mirror the strata around the centre Slices Spin

Brush

Cleavage: dashes toward upright Chalk texture Show tiles and their settings

odd.place · more Oddities

strata.odd.place

endless folded strata

Layers of comb-tooth brush strokes, folded and pinched into strata that go on forever in every direction. Wander alone, or invite friends into a room and cruise it together.

What you’re looking at

Think of a cliff face of sedimentary rock: layer upon layer, each one a single colour, bent by slow folds and squeezed thin in places. Here every layer is drawn as rows of short brush dashes, like the teeth of a comb, and the dashes always stand across the layer, so they fan out on the outside of a bend and crowd together on the inside.

There is no edge. Drag in any direction and new strata are worked out just ahead of you, so they’re ready before they slide into view. Come back later and you’ll find exactly the same rocks: everything is calculated from the world’s seed and your position, so nothing has to be stored.

The landscape changes as you travel. Each 256-pixel tile has its own seed, with its own fold strength and its own pinch, and neighbouring tiles blend smoothly into each other. Some regions lie almost flat; others buckle into deep troughs. Pinch can be positive or negative: it decides whether the layers squeeze thin on the crest of a fold or in its trough.

Each stratum also has a life of its own. Along its length it swells into lenses and thins out, and sometimes pinches out to nothing, so a band can vanish for a stretch and reappear further on. A swelling lens pushes the layers above it up and those below it down, and the push fades over a few layers, the way soft sediment drapes over a lump. Here and there a dome lifts the whole stack around one spot, or a basin sags it, fading out above and below its own depth. However wild it gets, layers never cross.

Turn on Show tiles and their settings to see the grid and each tile’s seed, fold and pinch.

How to use it

Wander: drag with a mouse or finger and let go to glide. A scroll wheel or trackpad pans too (hold Shift to scroll sideways), and so do the arrow keys.
Pinch with two fingers to make the dashes bigger or smaller (from 2 to 9), and move both fingers to pan at the same time. On a laptop, a trackpad pinch does the same.
Controls: the sliders button (top right, next to share) opens the control panel. Links to a particular spot, like shares and invites, open with the panel tucked away so the art comes first.
Full screen: the corner-arrows button (top right) fills the screen; press it again or Esc to leave. iPhones don’t allow full screen for web pages, so it isn’t shown there.
Palette: twelve sets of inks, from the original Pecten blues and corals to Sandstone, Abyss, Neon and Ink on paper.
Climb through strata: each layer takes the ink of the layer below it, so the bands of colour climb up through the folds. Colour speed is in layers per second; below zero they flow downward. Hold before blending near 0.9 makes each step a clean snap; near 0 the colours glide.
Cycle in place: every layer steps through the palette by itself, and Wave offset staggers the layers so colour ripples across them.
Flow along layers: bands of colour slide along each stratum. Every layer picks its own direction, left or right, and its own pace, so neighbouring strata glide past each other. Flow speed scales them all (below zero reverses every direction); Flow band length sets how long each colour band is.
The three colour motions are switches: turn on any combination, each with its own speed. Climbing and flowing together, for instance, sends the colours sideways along the layers while they also step upward.
Fold range and Pinch range scale how wild the landscape gets. Dash size scales the brush; Thickness variety mixes in some consistently thick strata.
Relief raises mountain ranges and valleys thousands of pixels tall that run across many screens; mountain width sets how broad they are (height is held back on narrow ranges so the walls never get too steep). At 0 the strata stay level overall.
Kaleidoscope mirrors the strata around the centre of the screen into 2 to 16 slices. Dragging, scrolling and pinching still work: the strata slide underneath the mirrors, so the pattern flows and re-forms as you move. Spin turns the whole kaleidoscope slowly either way. Colour motions ripple through every slice at once.
Swell sets how much each stratum swells into lenses and pinches out; at 0 every layer keeps an even thickness. Domes and basins sets how strongly the local folds lift and sag the stack.
Cleavage tilts the dashes from square-on to the band toward upright, like the cleavage planes in folded slate; higher values fan less at the crests. Chalk texture roughens the dash edges like dry chalk or a worn brush.
New world rolls a new seed. Back to origin takes you home.

Everything, including where you are, is kept in the page address, so a bookmark reopens the same spot with the same settings.

Cruise together

Type a room name (or press Make up a name) and Join, then Copy invite link and send it to friends. Everyone in the room sees the same world, the same colours and the same view: whoever drags is steering, and everyone else glides along. Anyone can change the palette, colour motion or shape, and it changes for everybody.

Your browsers connect to each other directly (WebRTC), so panning stays smooth. The odd.place room server only introduces you, remembers where the room is for people who join later, and passes things along when a network won’t allow a direct connection. The controls panel shows how everyone is connected.

Rooms aren’t private: anyone who knows or guesses the name can join, so pick an unusual one. Rooms vanish when the last person leaves. Up to 24 people per room.

How it works

For the curious: every column of the landscape is a running total of “how many layers per pixel” as you go down, so layers can squeeze to dotted seams but can never cross. That density comes from long slow waves (the folds) and shorter ones (the pinch), with each tile’s settings blended in. A very gentle pull back toward level stops small differences from piling up, so the folds stay graceful even a hundred thousand pixels from home.

Each layer’s own swelling is a slow ripple along its length; the push it gives its neighbours fades by about two-thirds per layer, so only the nearest eight on each side matter, which is what lets an endless world compute it one tile at a time. A dash’s length is measured along its own tilted direction from the top of its row to the bottom, less a thin gap, and where a row pinches the dash shrinks to a dot and then disappears. Neighbouring layers are never given inks that look nearly alike: the check is done in OKLAB, a colour space built around how we see.

Each layer boundary is traced across a tile column as one curve, and the comb teeth are spaced along its true length. Every row has its own offset so teeth don’t line up from row to row; the offset belongs to the row rather than the tile, so neighbouring tiles still meet without a seam. Rows come in fixed blocks of 12 layers, which gives every layer a number; the graphics card uses that number to pick its ink, which is what lets colour climb from layer to layer without rebuilding anything.

Each tile is a few thousand tapered brush shapes drawn by the GPU (WebGL2) in a single call, and building one takes a few milliseconds.

Press the share button (top right). It takes a picture of what’s on screen and makes a link preview for it. Add a title if you like, then post it to Facebook, copy the link, or send it another way. Save picture gives you the full-size picture, nice as a wallpaper.

Clips: choose a shape (a 9:16 reel, a square or wide 16:9) and a length, then Record a clip. Tick Drift slowly across the strata for a slow travelling shot, or steer it yourself while it records. Set the colours moving first for extra life. The clip can go on your share page, be saved, or be posted as a Facebook reel.

Each share gets its own page with the picture, the clip if you made one, and a button that reopens this exact spot with your exact settings. If you were in a room, the link brings people into it.

More Oddities

Ring Lattice: shimmering fields of interlocking rings.
Turing Art Generator: multi-scale Turing patterns that grow like living things.
XOR Bézier: curves that cancel and reveal each other.
Twin Grid Mosaic: two grids of tiles animating against each other.
Solaris: the Solar System, and how it formed from a cloud.
Spinyhead: be a blenny on a coral head, dodging wrasses.
Yin Yang Spinner: spin it until your screen makes it run backwards.
Cloud Globe: the whole planet’s clouds, right now.

See them all at odd.place →

Credits

Inspired by “Pecten”, a still image written in Kotlin by Reddit user u/igo_rs (Igor Spasić): a stack of layers, bent by a few big folds, each cut into rows of short brush dashes like the teeth of a comb. strata.odd.place is a JavaScript and WebGL2 take on that idea, made endless, animated and shared.

Several techniques here are adapted from his open-source Pecten.kt in the gart repository: layers that swell into lenses and pinch out, the drape that pushes their neighbours aside, folds that lift the stack around a point, dashes leaning toward the axial plane, and keeping neighbouring inks apart in OKLAB. Those portions are used under his BSD 2-Clause License, reproduced below. Igor Spasić isn’t involved with this site and hasn’t endorsed it.

Pecten / gart license (BSD 2-Clause)

BSD 2-Clause License

Copyright (c) 2022, Igor Spasić All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The license text is also at strata.odd.place/third-party-licenses.txt.

💬 Discuss it on odd.place

Discover more Oddities at odd.placeGenerative art, games, science toys and curious tools, all running in your browser.

Made by Jason Buchheim for odd.place.

REC 0:00

strata.odd.place needs WebGL2, which this browser didn’t provide. Try a current Chrome, Edge, Firefox or Safari.