This is a short quick start manual for the Function Playground app. I will explain how to use the application, but to keep things short, I will not go into the technical details nor into mathematical formulas.
Illustration of the core workflow in the Function Playground.
System Requirements
To enjoy a smooth experience with Function Playground, make sure your setup meets the following requirements:
- Modern browser: Use the latest version of Chrome, Firefox, Safari, or any other browser that has been updated within the last year. This ensures support for the latest JavaScript features used in the app.
- Device capability: A desktop computer is recommended for best performance, but a high-end tablet such as an iPad Pro can also work well. Lower-powered devices may struggle with preview rendering and exporting.
- Cookies and JavaScript: Both must be enabled in your browser settings. The app relies heavily on JavaScript for real-time interaction and rendering, and cookies are used to maintain session and share link functionality.
How to Start the Application
Getting started is refreshingly simple:
- Just head over to https://metikumi.com/tools/function-play/.
- No installation, account, or login is required. The app loads directly in your browser, and you can start creating right away.
Interface Tour
Overview of the Function Playground interface layout.
The Function Playground interface is divided into five stacked areas, each with its own purpose in the design workflow:
- Function Grid (top left): This is where you construct your function logic by arranging operations and values into a grid of cells.
- Preview (top right): Shows a real-time 3D rendering of your current shape.
- Function Palette (below): A collection of building blocks—functions and operators—that can be dragged into the grid.
- Main Settings (below that): Controls for defining dimensions, variation strength, and output resolution.
- Actions Bar (bottom): Tools for saving and loading projects, exporting to STL, sharing via link, and resetting the interface.
Each section will be explained in more detail below.
The Function Grid
The grid structure and data flow of function values.
The Function Grid is the creative core of Function Playground. It’s where you build logic using small visual blocks—called cells—that each perform a specific operation or function. The grid is structured as a 4×4 array, giving you up to 16 cells to work with in a single design.
Each cell produces a value that contributes to the final shape. A cell may use inputs from the cell to its left, the one above it, or both, depending on its configuration. For example, you might input the current height (z) into a sine wave, scale the result, and pass it along to the next cell in the row. This setup allows complex and layered behaviors to emerge from simple combinations.
Once a row is complete, its final output can be directed to affect either the radius (Δr) or the angle (Δφ) of a point on the surface of the vase. This modulation lets you sculpt both bulges and twists in the form. You also have the flexibility to ignore a row’s output entirely, if needed.
To customize a cell, just click on it. This brings up an editor where you can change its function type, set parameters like amplitude or frequency, and choose its input connections. All changes are instantly reflected in the 3D preview, encouraging quick experimentation and iteration.
The diagram above shows how values flow from left to right within each row, and from top to bottom across rows. It also highlights which outputs affect Δr, Δφ, or are unused. This modular structure gives you full control over the shape—without having to write any code.
The Function Palette
A collection of functions and operations ready to be dragged into the grid.
The Function Palette is your toolbox for building creative logic in the grid. It contains a wide variety of blocks—mathematical operators, input values, and waveform generators—that you can drag and drop into cells within the Function Grid.
Each icon in the palette represents a specific type of behavior. For example, you’ll find constants like 1.23, which always output a fixed value; directional arrows, which simply pass through input; and inputs like z and ϕ, which reflect the current point’s height and angle on the vase.
There are also mathematical operators such as addition (+), multiplication (×), and combinations like ϕ + z. These allow you to create dependencies between different spatial dimensions.
Beyond those, the palette includes a wide range of waveform generators—sine waves, triangle waves, zigzags, sawtooths, and square waves, in both vertical and horizontal orientations. These waveforms let you produce rhythmic patterns, twists, ridges, and other repeating shapes by modulating the radius or angle at each point.
To use any item from the palette, simply drag it into a cell in the grid. You can place it into an empty cell or replace an existing one. Once dropped, you can click the cell to further customize its parameters—such as the amplitude, frequency, or which input values it responds to. Alternatively, first click the palette item, then select the target cell.
This palette system encourages experimentation. Because you can swap out functions at any time, it’s easy to test different ideas and immediately see the results in the preview pane. You don’t need to memorize what each icon does—try them out and let the feedback from the model guide your design!
The Main Settings
Controls for the vase’s physical proportions, variation strength, and mesh resolution.
The Main Settings panel lets you define the physical shape and technical precision of your object. It’s where you set the basic proportions, control how strongly your functions affect the geometry, and adjust how finely the model is sampled and rendered.
At the top of this section, you’ll find the Dimensions. These include the height, bottom diameter, and top diameter of the vase, all specified in millimeters. The app automatically creates a smooth transition from the bottom to the top diameter over the chosen height. Keep in mind that any radius variation applied later is added on top of these base values. For example, if you set the top diameter to 100 mm and apply a radius variation of 20 mm, the actual diameter at certain points could reach 120 mm or drop to 80 mm depending on your function’s output.
Next, you can adjust the Variation, which determines how strongly your function influences the final shape. There are two types here: one for the radius (how far a point sits from the center axis), and one for the angle φ (how far it rotates from the standard position). The function result is always normalized to the range of –1.0 to +1.0. So, for a variation of 10 mm, the modulation ranges from –10 mm to +10 mm. In total, that’s a possible swing of 20 mm from minimum to maximum, centered around the base diameter.
Finally, you can configure the Resolution, which affects how finely the shape is computed. There are two resolution settings: one for Z-resolution (height segments) and one for φ-resolution (angular steps). A finer resolution results in smoother surfaces and better STL exports, but it also increases the load on your browser and device. If you encounter lag or the preview doesn’t render properly, lowering the resolution is a good way to regain responsiveness.
These controls allow you to balance creative flexibility with technical practicality—scaling complexity up or down based on your design goals and hardware capabilities.
The Actions Section
Manage your project: save, export, share, load, or reset with a single click.
The Actions Section gives you everything you need to manage your design session—from saving your progress to sharing your creation with others or starting fresh.
At the top, under Save, you’ll find two buttons:
- Download Project File lets you save your current work as a
.jsonfile. This format captures your entire grid, settings, and parameters so you can load it again later without losing any progress. - Export as STL prepares your design as a 3D-printable file. The exported STL reflects the resolution and dimensions you chose in the main settings, ready to be sliced in your favorite 3D printing software.
The Share field contains a generated link that encodes your current project. Simply copy this URL and send it to a friend or collaborator. When they open it, the app will instantly recreate your design in their browser—no login or setup required. It’s a great way to quickly show off your progress or invite others to build upon your ideas.
Under Load, you have two options:
- Load Project… allows you to open a
.jsonfile previously downloaded from the app. This brings back your design exactly as you left it. - Load Example opens a dropdown list of curated sample projects. These are great for exploring how different shapes are made and for getting inspired. More examples will be added over time to showcase new ideas and techniques.
Lastly, the Reset button gives you a clean slate. Clicking it clears the grid, resets all settings, and brings the app back to its default state—perfect for when you’re ready to start fresh with a brand new idea.
Whether you’re iterating on a shape, preparing for print, or collaborating with others, the Actions Section gives you simple and reliable tools to handle it all.
Core Concepts
A cylinder is the base form. Each function affects its surface by modulating the radius and angle at sampled points.
To fully enjoy and master the Function Playground, it helps to understand the core geometry and logic that drive how your shapes are generated. Everything revolves around a virtual cylinder, and your function setup determines how its surface is transformed.
The base object is a vertical cylinder, with flat top and bottom caps that always remain unmodified. Your design affects only the curved side surface, which is dynamically reshaped based on your input functions.
Every point on the side of the cylinder is defined by two coordinates:
z, the vertical position (height),- and
ϕ(phi), the angular position around the cylinder.
These coordinates are normalized to keep things simple and consistent:
zranges from –1.0 at the bottom to +1.0 at the top of the cylinder.ϕalso ranges from –1.0 to +1.0, where –1.0 maps to the back and +1.0 to the front, relative to a fixed reference.
Your function is called once for every point on the surface, using the normalized z and ϕ as its input. This function returns two outputs:
Δr, a radial offset—how far the point should move outward or inward from the base cylinder wall.Δϕ, an angular offset—how far the point should rotate sideways around the cylinder.
These outputs are scaled independently, meaning your function can return any value (even greater than 1.0 or smaller than –1.0), but internally, the values will be normalized to fall within –1.0 to +1.0. Only the largest absolute value in each output dimension determines the scale. This ensures consistent shaping without hard clipping or distortion.
Finally, the scaled values are multiplied by your selected variation strengths (as set in the Main Settings panel). For example, if you chose a radius variation of 10 mm, a function result of 0.5 will move that point 5 mm away from its base position.
This process happens point by point across the entire surface, generating rich, detailed forms from surprisingly compact logic. It’s what allows Function Playground to turn a few draggable waveforms into something beautifully sculptural.
Step-by-Step Tutorial
Technical Information
Project File Format
Function Playground saves your work as a simple, structured .json file. This file contains everything about your current design: the layout of the function grid, all function parameters, and your global settings such as object dimensions and resolution.
You can open the file in any text editor, but it’s not designed for manual editing. Instead, think of it as a snapshot of your current project—ideal for saving your progress or sharing your design with others.
Importantly, project files are forward-compatible. That means files created in version 1 of Function Playground will continue to work in future versions, even as new features are introduced. You won’t lose your designs as the app evolves.
Sharing via URL
When you click the Share button, the app generates a special link that embeds your project directly into the URL.
This may look like a long string of characters, but it’s really just your .json file, compressed and Base64-encoded, and added after #load: in the URL. There’s no server involved—everything is handled inside your browser.
This makes sharing your creations fast and private. You can send the link to a friend or colleague, bookmark it, or even embed it in a webpage. Anyone who opens the link will instantly see your exact design, with no need to download or install anything.
It’s a simple, lightweight, and elegant way to share what you’ve built.