Every control

Each control is one call. It appears on a plate, in the order you make it, and hands back an object you can ask.

In JavaScript the last thing a control takes is its options, in braces: dial("speed", 0, 10, 3, { step: 1 }). In Python they are given by name: dial("speed", 0, 10, 3, step=1). An option with a capital in JavaScript has an underscore in Python: onChange is on_change.

Every control takes x and y (to place it by hand: its top left corner), colour, and size, share and span, which are in Laying out a panel. Every control has value, label, remove() and place(x, y).

dial

const speed = dial("speed", 0, 10, 3)        // from 0 to 10, starting at 3
const pitch = dial("pitch", 100, 2000, 440, { log: true, unit: "Hz" })

A dial is a number between two ends. speed.value is the number now, and setting it turns the dial. In a sum the dial stands for its number.

dial(label, target, "setting") makes a dial that is a setting of something else: see Tying a control to a synth.

slider

const size = slider("size", 10, 150, 60)
const height2 = slider("height", 0, 100, 50, { vertical: true })

The same as a dial, as a slider, with the same options. vertical stands it upright.

button

const fire = button("fire")
let shots = 0

function update(dt) {
  if (fire.pressed) {
    shots += 1
    playSound("laser")
  }
}

function draw() {
  background("black")
  text("Shots " + shots, width / 2, height / 2, "white", 40, "centre")
}

fire.pressed is true once for each press: ask it in update. fire.held is true for as long as the button is down. A second value is a function to call on each press: button("reset", startAgain).

toggle

const mute = toggle("mute")            // off to begin with
const grid = toggle("grid", true)      // on to begin with

A switch. mute.on is true or false, and so is mute.value. In Python if mute: asks it.

select

const level = select("level", ["easy", "medium", "hard"], "medium")

One of a list, stepped through with the arrows at its sides. level.value is the choice and level.index is its place in the list, from 0.

select(label, target, "setting") takes the choices from the target, and keeps up when they change: a list of MIDI devices, or a synth's wave, where "sample" is a choice only once the synth has a sample. { style: "rotary" } makes it a rotary (style="rotary").

rotary

const mode = rotary("mode", ["easy", "medium", "hard"], "medium")
const lead = makeSynth("lead")
rotary("reverb", lead, "reverbType")         // the choices come from the synth

A knob that clicks between a few choices, with a notch for each and their names round it where there is room. Drag to turn it from notch to notch, or tap a name. It holds at each notch until you have gone most of the way to the next, then clicks over.

mode.value is the choice and mode.index its place, as with a select.

The choice is written under the knob only where no names are round it. showValue: true or false says otherwise (show_value in Python).

Tap to enlarge

keyboard

const lead = makeSynth("lead")
const piano = keyboard(lead, { octave: 4, octaves: 2 })

A piano keyboard along the bottom, which plays what it is given. piano.notes is the notes held now, as numbers where 60 is middle C.

With the computer's keys, A S D F G H J are the white keys and W E T Y U the black ones; Z and X step down and up an octave.

The arrows above the keys step an octave too, again and again while one is held, and the keys slide there. A finger on the strip between the arrows drags the keys sideways, and they settle on a whole octave. A keyboard never shows so many octaves that a key is too narrow to play.

A keyboard with no synth is a way to read notes for anything:

let last = "nothing yet"
keyboard(null, { onNoteOn: (note) => { last = "note " + note } })

function draw() {
  background("midnightblue")
  text(last, width / 2, 80, "white", 30, "centre")
}

scope

const graph = scope("height")
let t = 0

function update(dt) {
  t += dt
  graph.push(Math.sin(t * 2) * 100)
}

A line of numbers, live. What it is given decides what it draws:

Options: min and max (the bottom and top of the picture), width, height, and points (how many points it keeps).

meter

const level = meter("speed")
level.value = 0.7

A level from 0 to 1 as a bar of lights. Set level.value yourself, or give it a synth and it shows how loud the synth is.

label

label("Ball")
const size = dial("size", 5, 80, 30)
row()                                  // the plates after this start a new line
label("World")
const gravity = dial("gravity", 0, 2000, 900)

Words. A label made just before some controls is their heading, on the plate they share, and they are kept together.

group, row, column, grid, page, spacer and wrap

These say what goes with what. They are in Laying out a panel, with pictures.

layout, room, theme and over

layout says where the plates go, how big they are and how they wrap, and gives back the width, height and scale the layout came to. room() is the rectangle no control is on (x, y, width, height), for the scene to draw in. Both are in Laying out a panel.

theme sets the colours, and in JavaScript over(x, y) says whether a control is at a point. They are in Layout and touch.

More controls

There are more, each on a page of its own kind. They are made and laid out like the ones above, and take the same options.

For any program

On Numbers, text and choices.

For games

On Controls for a game.

For music

On Controls for music.

A control for anything

A control can be tied to any object, not only a synth. With nothing else to go on it reads and writes the property you name, so the range is given:

const ball = { radius: 40 }
dial("size", ball, "radius", { min: 5, max: 120 })

function draw() {
  background("midnightblue")
  circle(width / 2, height / 2, ball.radius, "gold")
}

toggle(label, target, "setting") and select(label, target, "setting") tie a switch and a list the same way.

Related

• Tying a control to a synth
• Numbers, text and choices
• Controls for a game
• Controls for music
• Laying out a panel
• Layout and touch