Function Playground Quick Start

Welcome! This quick start guide helps you jump straight into Function Playground—a browser-based tool for designing expressive, 3D-printable vases using a visual function grid. We’ll focus on how to use it, not the heavy math behind it, so you can start creating right away.

System Requirements

Function Playground runs entirely in your browser, but a few basics ensure a smooth experience:

• Modern browser: Use a recent version of Chrome, Firefox, or Safari (updated within the last year).
• Device performance: A desktop or laptop is ideal. High-end tablets (like an iPad Pro) can work well too. Lower-powered devices may struggle with rendering or exporting.
• JavaScript and cookies enabled: These are required for real-time updates and sharing links.

Launching the App

There’s nothing to install.

Just open: 👉 https://metikumi.com/tools/function-play/

The app loads instantly—no login, no setup. You can start experimenting immediately.

Interface Overview

The interface is split into four main areas:

• Function Grid (top left): Build your logic using visual cells.
• Preview (top right): See your design update in real time as a 3D model.
• Function Palette (middle): Drag-and-drop building blocks (functions, operators, inputs).
• Actions Bar (bottom): Save, load, export, share, or reset your project.

Let’s walk through each part.

The Function Grid

This is where the magic happens.

The grid is a 4×4 layout of cells, each performing a small operation. By chaining them together, you create complex behaviors from simple pieces.

Each cell can:

• Take input from the left or above
• Use z (height) or ϕ (angle) as input
• Output a value used by other cells

There are three separate pages (grids) working together:

• r → base radius
• Δr → radial variation
• Δϕ → angular variation

Each page outputs values normalized to –1 to +1, which are then scaled in the settings.

Click any cell to edit its parameters—changes appear instantly in the 3D preview.

Try this: Place a sine wave in the first cell and feed it with z. You’ll immediately see vertical patterns appear.

The Function Palette

Think of this as your toolbox.

It includes:

• Constants (e.g., 1.23)
• Inputs (z, ϕ)
• Operators (+, ×, absolute value, etc.)
• Waveforms (sine, triangle, zigzag, square…)

Drag any item into the grid to use it. You can:

• Drop it into an empty cell
• Replace an existing one
• Click it afterward to tweak parameters (like amplitude or frequency)

These building blocks are simple individually—but together, they create surprisingly rich shapes.

Alternative: Instead of dragging the function, click it then click the target cell where you like to place it.

Main Settings

Here you control the physical and technical properties of your model.

Dimensions

Set the base shape:

• Height
• Inner diameter
• Outer diameter

These define the starting cylinder. Your functions then modify it.

Variation

Controls how strongly your functions affect the shape:

• Radius variation (Δr)
• Angle variation (Δϕ)

Example: A variation of 10 mm means your function can push ±10 mm from the base shape.

Resolution

Defines how detailed your model is:

• Z-resolution (vertical steps)
• ϕ-resolution (angular steps)

Higher values = smoother models, but more computation.
If things feel slow, reduce these first.

Inner vs Outer Diameter

These don’t define a hollow shell. Instead:

• Inner diameter = minimum base size
• Outer diameter = maximum base size

The r grid interpolates between them.

Actions Section

This section helps you manage your work:

• Download Project File (.json): Save your design locally
• Export as STL: Generate a 3D-printable file
• Share Link: Copy a URL that recreates your design instantly
• Load Project: Open a saved file
• Load Example: Explore pre-made designs
• Reset: Start fresh

Sharing is especially fun—send a link to a friend and let them remix your idea.

Core Concepts

Everything starts with a simple cylinder.

Each surface point is defined by:

• z → height (–1 to +1)
• ϕ → angle (–1 to +1)

Your three function grids modify this cylinder:

• r → base radius
• Δr → pushes points inward/outward
• Δϕ → rotates points around the cylinder

These functions run for every point on the surface.

The outputs are normalized and scaled by your settings, which is why even simple functions can create intricate results.

Think of it like sculpting with math—but visually.

Try Your First Design

Here’s a simple idea to get started:

1. Add a sine wave using z
2. Increase radius variation
3. Adjust frequency

You’ll get a wavy vase shape instantly.

From there, experiment:

• Combine multiple waves
• Add angular twists with Δϕ
• Layer effects across pages

Video Tutorial

This slightly older video still gives a helpful walkthrough of the basics:

Technical Notes

Project Files

Projects are saved as .json files containing:

• Grid layout
• Function parameters
• Settings

They’re designed for saving and sharing—not manual editing.

Good news: they’re forward-compatible, so your designs will continue working in future versions.

Sharing via URL

The share link encodes your entire project directly in the URL using:

• Compression
• Base64 encoding

No server involved—everything happens locally in your browser.

It’s fast, private, and surprisingly powerful.

Final Thoughts

Function Playground is all about exploration. Start simple, experiment often, and don’t worry about getting everything “right.”

If you create something interesting, try sharing it—or tweak an example and make it your own.

Have fun designing, and feel free to share your creations or feedback!