Shape Morph

One cloud of Gaussian splats takes one form after another, all in the splash's teal-to-pink ink: words or names (an emoji gives its shape and its light and dark), the Lorenz attractor, a Klein bottle, a gyroid, a loop, and QR codes. You set the list and its order. A tap morphs the cloud to the next form, starting where you tap and flowing from there as one sheet; pick a form on the stage to go straight to it.

In the Splash tab, type a word to add it, add shapes or a QR code of the QR text, and move or remove forms. A QR code holds up to 42 bytes and scans once it settles. Drag through the cloud to push splats; they settle back. From Ryan Kamp's Overprint concept. Made by Ryan Kamp; code is MIT, and the forms and sound are CC0.

Each form in the person's list is one sample of the same cloud of splats. The Lorenz equations, figure-eight Klein-bottle parametrization, gyroid approximation, and QR encoder have reference sources. Words are drawn with the device's own fonts; the loop is a graphic design; the list, flights, waves from a tap, pushes, colors, and the two-ink treatment are animation choices.

1. Correct

   The word form samples the typed text as the device's fonts draw it, an emoji giving only its shape and its light and dark, in the splash's ink.¹²

   src/text-splats.js splits the text into grapheme clusters with Intl.Segmenter (so emoji sequences joined by zero-width joiners, flags, and skin tones stay whole), draws each one with canvas fillText in the system fonts, and samples its inked pixels with an R2 sequence. For a color glyph (an emoji), each splat's luminance shades the splash's ink at its place (lane PT3); other glyphs take the form's ink. Text is cleaned (spaces collapsed, control characters dropped), limited to 48 visible characters when added from the word box, and wrapped at spaces after ten characters per line. In Node, where there is no canvas, the site's five-by-seven bitmap glyphs stand in.

2. Correct

   The Lorenz form uses dx/dt = 10(y - x), dy/dt = x(28 - z) - y, and dz/dt = xy - (8/3)z.³⁴

   The derivative uses sigma = 10, rho = 28, and beta = 8/3. A fixed-step RK4 path uses step 0.007, discards 800 warm-up steps, and stores 18,000 points before display sampling, axis reordering, centering, and scaling.

3. Simplified

   The Klein form depicts a figure-eight Klein bottle with the expected self-intersections of a three-dimensional view.⁵

   The existing Splat equation preset at time zero evaluates R = 2 + cos(u/2)sin(v) - sin(u/2)sin(2v), x = R cos(u), y = sin(u/2)sin(v) + cos(u/2)sin(2v), and z = R sin(u), for u and v from 0 to 2pi. The published figure-eight formula's y and z axes are exchanged; a display rotation and uniform fit follow.

4. Simplified

   The gyroid form samples the trigonometric approximation sin(x)cos(y) + sin(y)cos(z) + sin(z)cos(x) = 0.⁶⁷

   Projected samples are accepted only when the implicit-field residual is at most 0.0001, then clipped to a ball of radius 2pi and fitted for display. The test undoes the display fit and checks sampled Float32 residuals within 0.00011.

5. Simplified

   The loop form is a decorative, flat three-node diagram, not a simulated orbit or a computed attractor.⁸

   The sampler places a filled disk, two rings, straight connectors, and an upper arc at fixed two-dimensional coordinates. Splats move between this drawing and the other forms only through the shared animation.

6. Correct

   The QR form uses the vendored QR Code Model 2 encoder at error-correction level M and includes a four-module quiet zone.⁹¹⁰

   Selecting QR imports the shared encoder, calls it with level M and boosting disabled, and samples its dark and light modules with four blank modules on every side. The editable input accepts up to 42 UTF-8 bytes; a browser test submits 21 accented letters, exactly 42 bytes, and checks the resulting encoded text and level.

1. 1Intl.Segmenter, MDN Web Docs
2. 2CanvasRenderingContext2D: fillText() method, MDN Web Docs
3. 3Lorenz attractor, Wolfram MathWorld
4. 4Lorenz system, Wikipedia
5. 5Klein bottle, Wolfram MathWorld
6. 6Gyroid, Wikipedia
7. 7Gyroid, Wolfram MathWorld
8. 8Shape morph's loop sampler, Splashery
9. 9QR Code generator library, Project Nayuki
10. 10Point for determining the code area, DENSO WAVE

Simplified

Every form is a finite splat sample, centered and scaled for the same camera; the splats are not a surface mesh.

Simplified

The Lorenz trajectory is sampled from one fixed-step numerical path. Flights between forms and the spring-back push are animation choices, not Lorenz dynamics or material physics.

Simplified

The Klein bottle is shown with self-intersections in three dimensions. Its radius, orientation, and colored bands are display choices.

Simplified

The gyroid uses a trigonometric approximation to the minimal surface and clips it to a finite ball.

Simplified

The word and loop are graphic designs (the word follows the device's fonts). The two-ink treatment changes colors, without simulating ink or printing.

Simplified

A tap's morph starts at the tapped place: each splat waits 0.38 seconds for every unit it lies from the tap, then flies for 1.8 seconds. In flight the cloud wears its teal-to-pink ink, and the form's own shading comes in as it lands; each splat flies to the place of the same rank along a 3D Hilbert curve, so neighbors land near neighbors (lane PT3). These are animation choices.

Made in Splashery. Its code is MIT.

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=shape-morph

<script type="module" src="https://splashery.app/play/src/element.js"></script>
<splashery-toy toy="shape-morph"></splashery-toy>