interact

Creates an interactive widget that allows users to adjust parameters and see live results.

Syntax

interact(args, callback)

Parameters

• args

  An object or array defining the interactive controls. Keys become parameter names, and values define the control type:

  • string or number: Creates a text input
  • [...strings]: Creates a dropdown picker (first item is default)
  • [min, max] or [min, max, step]: Creates a numeric slider

• callback

  A function that receives the current parameter values and returns the result to display.

Return value

An Interactive object that displays the controls and live-updates the result.

Examples

// Simple slider and picker
let widget = interact({
  amplitude: [0, 10, 0.1],
  waveform: ["sine", "cosine", "square"]
}, ({amplitude, waveform}) => {
  return `${waveform} wave with amplitude ${amplitude}`
})
widget

// Multiple sliders for color mixing
interact({
  red: [0, 255, 1],
  green: [0, 255, 1],
  blue: [0, 255, 1]
}, ({red, green, blue}) => {
  return new Color("srgb", [red/255, green/255, blue/255])
})

// Array-style parameters (function receives position arguments)
interact([
  [1, 10],      // First parameter: slider 1-10
  ["A", "B", "C"]  // Second parameter: picker
], (num, letter) => {
  return `${letter}${num}`
})

Control Types

Text Input

• Input: string or number
• Creates: Editable text field

Slider

• Input: [min, max] or [min, max, step]
• Creates: Numeric slider with optional step size
• Default step: (max - min) / 100

Picker/Dropdown

• Input: Array of strings [option1, option2, ...]
• Creates: Dropdown menu
• Default: First option in the array

Notes

The callback function is called whenever any parameter changes. Results are automatically displayed below the controls.