Open all the folds Close all the folds Definitions, derivations, notes, and long tables start folded.

Using Splashery

The chapters after this one are about what a Splash is and how it is built. This page is about the screen you open one on: where the buttons are, what each one does, and how to bring the controls back when they fade. Everything here belongs to every Splash; a button that belongs to only a few says so. The labs switch hides Splashes that are still being tried out. More, then Settings, then Labs turns it on, and so does the Labs button on the shelf or ?labs=1 at the end of the address. Nothing on this page needs it except where it says.

The screen: the focused layout and the everyday layout

The Playground opens in the focused layout. The Splash fills most of the screen (the band it is framed in is 0.49 to 0.82 of the screen's height on a 384 × 742 phone screen, and 0.56 to 0.85 on a 390 × 844 one). Four parts make up the screen:

• The header across the top: the Splash's name with a small arrow (tap it to open the shelf), its credit, and a Share button. Share copies the link, or on a phone opens the phone's own share sheet. The credit is also in About, below.
• The stage, which is the Splash itself and what it draws over itself.
• The bottom bar: Shelf, Splash, Effects, Views, and More. Each opens a sheet (next section).
• The stage's buttons, a column of round buttons down the right edge (the section after next).

The everyday layout is the arrangement Splashery had before: the Splash gets about half of a phone's screen. Both layouts have the stage's buttons in the same column. In the everyday layout that column also has a Splashes button, which opens the gallery when the shelf is put away; the focused layout has the Shelf button in the bar instead. Add ?ui=classic (or ?old=focus) to the address to get the everyday layout back. ?ui=focus asks for the focused one, which is what you get with nothing added. In the focused layout, Save and the link back to Splashery are on More's Share tab.

On a phone, a sheet takes room from the Splash. With one open, the stage's buttons wrap into a second column or step aside, and a Splash's own sliders and tools keep to the left of them, so the buttons never cover a slider.

The bottom bar and its sheets

Each button in the bottom bar opens a sheet over the Splash. Esc closes a sheet.

More has three tabs:

• Share holds Save (a menu: Picture (PNG), Turntable video, GIF, Scene file (JSON), Open a scene file…, and Open your own splat file…), the link back to Splashery (Splashery ↗), Record with a Countdown, Save image, the link with Copy and Share…, a QR code of the link, Save PDF, and "Put it on a web page" (Copy iframe and Copy element). The last section of this page goes through them.
• About holds how to play the Splash, its text, its credit, and, on a computer, a line of the keys.
• Settings holds Detail, "Detail and splats…", Turntable, Sound, Labs, and "Hide the controls when idle".

The stage's buttons

The column at the right edge holds the buttons that change how you look at the Splash and what it does while you look. A button that is on is a yellow disc with a dark icon, so it still shows over a light Splash. On QR Code, Picture QR, and Video QR the buttons stay in one column, so none sits on the code. Where they run past the room, as with a sheet open on a phone, the column scrolls, its edge faded where more buttons wait, and Sound and How to play join it at its top. These are in every Splash's column:

• Sound turns the Splash's sounds on and off (the M key does the same). Every Splash starts with sound on. A browser lets a page's sound start only after a tap, a touch, or a key, so the site's sound starts at the first one anywhere on the page. A mute holds for that browser tab only: a reload keeps it, and a new tab starts with sound on.
• How to play (the question mark) shows how to play the Splash on show.
• Full screen fills the screen with the stage and opens in focus mode (the F key). If the browser refuses, or does not answer within 2 seconds, a short message says why.
• Layers pulls the frame apart into its layers while you hold it, and puts it back when you let go (the L key does the same while held).
• Reset puts the camera back at the Splash's opening view. On most Splashes a double-tap or a double-click does the same ("Turning, zooming, and panning", below, says where it does not).
• Tilt lock (the padlock) makes a drag turn the Splash only left and right, so a flat Splash such as a page, a photo, or a screen stays facing you.
• Turntable (the record player, the T key) switches the slow turn a Splash does when nobody is touching it. It is the same setting as Settings, then Turntable.
• Hands-on (the hand, the H key) lets you pick the Splash up with a drag and toss it with a quick let-go (Chapter 6). While it is on, a ↺ button beside it puts the Splash back.
• Record starts a recording of the stage (the R key); more on it below.
• Detail and splats opens the Detail list, the Splats slider, and the copies. It is described in What else Splashery does now.

These appear only on the Splashes that use them:

• Labels shows numbered markers on a capture that has labeled points. It is off by default, and it is there only where the capture has points to show. See Labels.
• Pop out, the page view button, and Draw a box belong to the picture Splashes (Picture Lab, Splash Book, the Storybook, and Photo Album). Pop out raises a figure or a photo off its page into a card. The page view switches between one page and both pages of the open spread. Holding B draws a box on the page. Chapter 5 shows them in use.
• Falling keys is on the grand and upright pianos, the harpsichord, and the electronic keyboard, just above Hands-on. It opens the Falling Keys view in place (see "Views", below).
• Microphone, camera, or screen starts and stops a Splash's live input from a button just above Record, with a red dot while it runs. A Splash asks for none of them until you press it.
• Fold appears on a phone and in full screen. It folds the column down to the fold button itself, and the column stays folded for the rest of your visit.

Focus mode

Leave a Splash alone for 5 seconds and everything over it fades: the header with its credit, the bottom bar (and a game's or a song's own bar), the stage's buttons, and the Splash's own slider, tools, legend, and pill. It works the way a phone's video player does. The Splash grows to fill the room the controls leave, and eases back over half a second when they return.

To bring the controls back, touch the strip along the top or the bottom of the screen (each at least 48 pixels tall, and a faint line marks the bottom one), or press a key. A touch anywhere else plays the Splash, with a tap, a drag, or a pinch, and the controls stay hidden. A touch that wakes the controls never presses the one that stood there.

• Focus mode does not start while a sheet, popover, or menu is open, while you are recording, in the gallery, while a text field has the focus, or while a Splash is still loading. It never starts on a Splash that needs its controls on the screen, such as the twelve Arcade games.
• Full screen opens in focus mode: every sheet closes and the controls hide at once. A phone turned sideways does the same on 3D Photo, 3D Video, 3D World, and Splat Mirror, where the picture is the point, and the controls come back when it is turned upright.
• While Labels is on, its numbered markers stay in focus mode, and a tap on one opens it.
• More, then Settings, has Hide the controls when idle, on by default. ?focus=off turns focus mode off for one page. If your device asks for less motion, the controls go without the fade.

What a tap does: the pill and Space

A Splash with a timed effect follows one set of rules for a tap, and a small pill at the lower left of the band says what a tap will do.

The pill reads Playing (a ring, with +1 for each tap waiting), Paused, Zoomed in, or Ready. Press it to pause or to go on. A tap that pauses or resumes an effect makes no sound.

Space pauses everything that moves and holds all audio, so a song's clock waits where it stopped. The pill shows Paused, and a tap on the stage plays again.

The status ring. Every Splash says what it is loading, making, or stuck on in one place: a round button 44 pixels across beside the pill (in the pill's place when the pill is hidden), so no words lie over the Splash. A job shows there once it has taken 0.3 seconds (0.6 for a Splash's own loading, "Loading" and its name), so a quick one shows nothing. The ring is blue and fills as the job goes, with its share in the middle; a job with no measure turns a short arc instead, with three dots in the middle. A problem that stops the Splash turns it red, with an exclamation mark, pulsing gently. When a job that showed is done, a green check shows for 1.4 seconds, and with nothing to say there is no ring. A tap on the ring opens a card: what is loading or being made, how far it has come, whether it can play already, and for a problem what happened and what to do, with Stop, Retry, or Dismiss where the job has one. A tap anywhere else, or Escape, closes the card. The ring fades with the pill in focus mode, and stands aside where it would lie on a QR code. A capture's veil still shows as it opens, and the messages that confirm what you did, or give a hint, are still short messages that come and go. So is a problem that comes from your own tap (a file that cannot be opened, for example): only a problem that stops the Splash turns the ring red.

Turning, zooming, and panning

A drag turns the Splash. A pinch, or the mouse wheel, zooms. Two fingers moved together pan the view, and so do Shift (or Alt) and a drag with a mouse. On most Splashes a double-tap or a double-click resets the view, as the Reset button does. Where two quick taps mean something else, they do not: Splash Book, Storybook, and Photo Album turn two pages, Picture Lab and Picture Frame fill the screen with the page, two taps on the Chess Set's board are a piece and its square, and a few Splashes that steer their own view, such as Real Earth and Star Explorer, take them as two taps. The Reset button works on all of them, and Reset always goes to the opening view, whichever Splash was open before it. The arrow keys turn, and + and − zoom (see "Keys", below). Zoom is counted in fits: 1 is the distance at which the whole Splash just fits the stage.

• How close. You can zoom in to 0.12 fits. The camera stops just short of the surface at the middle of the view, and splats very near the eye fade out instead of vanishing.
• Where a Splash opens. A Splash with no distance of its own opens at 1.05 fits, as a fresh page does and as Reset does. It does not open at the zoom the last Splash was left at. A link's own view still wins.

Keys

These work on a computer when the stage has the focus. More, then About, lists the keys for the Splash on show; that line leaves out G and the held B.

Finding a Splash: the shelf, search, and names

Shelf opens the shelf. Its chips list the shelves: All, Featured, and then one for each family. A New chip after Featured lists the Splashes that arrived in your last 14 days, newest first, whenever there are any (the labs ones only with labs on). Surprise me opens one at random, Labs turns the labs switch on and off, and search finds a Splash by its name or by another name it is known by. On a phone the finder is one line: Search first, with Surprise me and Labs after the names. A flick along the row of thumbnails coasts as far as its speed carries it.

Names follow one set of rules: title case, 16 characters or fewer (20 at most), no commas or parentheses, and no two alike. A photoreal capture is "Real X" and a Splash built from rules as a version of one is "X Model" (Real Earth and Earth Model, Real Orange and Orange). Shelves follow the same rule. A Splash's other names are in its search words, so searching for "Lamp" finds the Desk Lamp.

The shelf shows only Splashes whose assets allow commercial use. Four whose assets are licensed for non-commercial use only are off the shelf, search, Surprise me, and New. A link to one still opens it, with its credit.

Saving, recording, and sharing

All of these are on More's Share tab. Anything you download is named splashery- and the Splash's id: a picture, a scene file, a GIF, a recording, or a PDF.

• Save opens a menu of what to save: the picture (a PNG), a turntable video, a GIF, or the scene as a file (JSON). It also reads one back: Open a scene file…, and Open your own splat file… (or drop the file on the page).
• Save image writes a still of the stage at 1×, 2×, or 4× its pixels, either the whole scene or the Splash alone on a transparent background, cropped to its edges. On a phone 384 pixels wide, 4× is 1,536 × 2,968 pixels. A 30-megapixel still (7,600 × 4,000) took 0.6 to 0.8 seconds on a MacBook Pro M5 Pro and about 0.7 GB more memory across the browser. The splat blur and the cutoff for tiny splats grow with the picture, so a larger still has the same Splash in it, on more pixels (Chapter 1).
• Record films the stage and keeps the framing it began with, so opening a sheet or resizing the window does not move the Splash in the video. A take keeps its sound together with its picture, ends when you stop it, and is an MP4 where the browser can write one and a WebM otherwise. While it runs, the recording pill shows its time and its size so far. A take the browser has to hold in memory, as in a private window or on a full disk, ends by itself at a size that depends on the device, and is kept; the preview then says "stopped at the size limit". A finished take opens a preview to watch, with Save video, Share (where the device shares files), Record again, and Discard. The Record button on this tab has a Countdown.
• The link is the whole scene. Copy puts it on the clipboard, and Share… opens the phone's share sheet. Under it, a QR code of the same link scans with a phone camera. The header's Share button does the same as Copy. Share links and QR codes takes a link apart.
• Save PDF opens a "Save as PDF" dialog with two choices: a still with the Splash's description, its credits, and a link and QR code that open it here, or a moving recording for desktop Firefox and Acrobat (phones and other readers show its first picture).
• Put it on a web page copies the code for an iframe or for the <splashery-toy> element.

Views: seeing inside the drawing

A view is a tool for looking at how a Splash is drawn rather than at the Splash itself: a cut through the middle, the outline of each splat, how many splats pile up on one pixel. The Views button in the bottom bar lists seven with the labs switch off: Cutaway, Show the Splats, Heat Map, Scrub and Slow Motion, Exploded Parts, Falling Keys, and the Measuring Panel. Pick one from the list, or add ?view= and its name to the address to open the page in it: cutaway, splats, heat, scrub, parts, or keys. A view's shader code is compiled only when the view is open, so a page with no view open draws exactly as it did before views existed.

Cutaway

Open it with the Views button or ?view=cutaway. Cutaway puts a clip plane through the Splash: a flat sheet that leaves out everything on one side of it, so what lies inside shows. It suits a Splash with something inside, such as Walnut CT, a scan of a walnut's inside.

Show the Splats

Open it with the Views button or ?view=splats. It draws the outline of each splat, so you can see how big the splats are and how they overlap. It leaves out splats under a size filter, 6 pixels by default. A Splash made of very small splats would show nothing at that size, so the filter steps down for it: the Music Box shows at 3 pixels, while the Strawberry keeps 6.

Heat Map

Open it with the Views button or ?view=heat. It colors each pixel by how many splats were blended onto it, and reports the blended fragments a frame and the splats on each covered pixel. That is overdraw, and it is where the graphics chip's time goes. At 300,000 splats the Grape piles 227 splats on each covered pixel on average and 793 at most, about 33 million blended fragments a frame. Walnut CT draws only the outer skin of its lattice until the walnut is cut, because nearly all of the lattice is the walnut's hidden inside: in the Heat Map on a MacBook Pro M5 Pro, the whole lattice would come to 102.8 million fragments a frame, and the skin comes to 34.3 million.

Scrub and Slow Motion

Open it with the Views button or ?view=scrub. It plays a Splash's motion slowly and lets you scrub back and forth through it, so you can stop on any moment. Use it on a Splash with a timed effect.

Exploded Parts

Open it with the Views button or ?view=parts. It pulls a Splash's parts apart from one another, the way a parts diagram does, so you can see which splats belong to which part (Chapter 2). It suits a kit Splash with moving parts, such as the Treasure Chest.

Falling Keys

Open it with the Views button, with ?view=keys, from the song panel's Watch the keys, or with the falling keys button on the stage, the only view with a button there. It draws a keyboard Splash's song as notes falling in 2D over the stage onto a keyboard. It is there on the grand and upright pianos, the harpsichord, and the electronic keyboard. The Toy Piano has no song, so no falling keys.

• A press on the view's keyboard plays that key in the Splash's own voice, and the Splash's key goes down with it. Each finger plays its own key, so a chord sounds. A finger drawn across the keys plays each one it enters.
• A mouse plays it too. Typed keys play it on a computer (see "Keys", above).
• The keys are sharp at the screen's own pixel ratio, up to 3×. A Sharp choice offers 1×, 1.5×, 2×, 3×, 4×, 5×, and 6×, and keeps your choice.
• On a phone the keyboard ends at the left edge of the stage's buttons, so none of the keys is under a button.

Measuring Panel

Open it with the Views button or ?measure=1. It shows how the page is doing: frame times, the page's work for each frame, the graphics chip's time where the browser offers it, and more. It is for people who make Splashes. How Splashery is built says what it measures.

Where to try it

• Walnut CT (behind the labs switch): open the Views button and choose Cutaway.
• Grape: choose Heat Map to see where the splats pile up.
• Music Box: choose Show the Splats.
• Treasure Chest: choose Exploded Parts.
• Grand Piano: press the falling keys button above Hands-on, and play the keys on the screen.
• Any Splash: leave it alone for 5 seconds to see the controls fade, and touch the strip at the bottom of the screen to bring them back.