Circuitry Logo
Circuitry
Open Circuitry

dials: Dials, Sliders and a Keyboard

dials puts controls on a scene: dials, sliders, buttons, switches, knobs that click between choices, a piano keyboard, a scope and a level meter. It is for any age and any level, and it is for enjoying: you write one line and a dial appears, and you turn it and something changes. There is nothing to position, nothing to draw and nothing to wire up, and the controls work with a finger, the mouse and the computer's keys.

It is two libraries with the same names. dials.js is for pictures.js scenes and pydials is for Pyctures scenes. You can change the programs on the dials page and run them in your browser.

A dial is a number

const points = dial("points", 3, 12, 5, { step: 1 })    // from 3 to 12, starting at 5

function draw() {
  background("midnightblue")
  star(width / 2, height / 2, 120, points.value, "gold")
}

That is a whole program. Drag the dial up or down and the star changes.

points.value is the number the dial is on now, and points.value = 8 sets it. In a sum the dial stands for its number: points * 2. Hold Shift while you turn for fine steps, and tap twice to put it back to 5.

  • In JavaScript there is nothing to import. The names are ready in every scene.
  • In Python a scene starts with from pyctures import * and from pydials import *.

In Circuitry both run in the preview beside your code, on a computer, an iPad or an iPhone, and the controls are made a little bigger where they are worked with fingers.

The next three steps

Each of these is a whole program too.

Buttons and switches

layout({ at: "bottom" })                     // the controls go along the bottom
const gravity = dial("gravity", 0, 2000, 900)
const kick = button("kick")
const trail = toggle("trail")

let y = 100, speed = 0

function update(dt) {
  if (kick.pressed) speed = -700             // true once for each press
  speed += gravity.value * dt
  y += speed * dt
  if (y > height - 200) { y = height - 200; speed = -speed * 0.8 }
}

function draw() {
  background(trail.on ? "rgba(16, 24, 48, 0.08)" : "rgb(16, 24, 48)")
  circle(width / 2, y, 24, "tomato")
}

A button is asked in update: kick.pressed is true once for each press, and kick.held for as long as it is down. A toggle is a switch: trail.on is true or false, and in Python if trail: asks it. The controls line themselves up in the order you make them, and a panel can be laid out in groups, grids and pages when you want more.

A synth you can play

const lead = makeSynth("lead")

dial("cutoff", lead, "cutoff")
dial("resonance", lead, "resonance")
slider("attack", lead, "attack")
scope(lead)
keyboard(lead, { octave: 4 })

Each dial is that setting of the synth: it takes its range, its unit and where it starts from the synth, and turning it sets it. The scope draws the wave the synth is making. The keyboard plays it: with fingers, with the mouse, and with the keys A S D F G H J (the white keys) and W E T Y U (the black ones); Z and X step down and up an octave. makeSynth is from synths, the sound library. See Tying a control to a synth.

Watch a number

const graph = scope("height")
const level = meter("speed")
let t = 0

function update(dt) {
  t += dt
  graph.push(Math.sin(t * 2) * 100)            // one more point on the line
  level.value = Math.abs(Math.cos(t * 2))      // from 0 to 1
}

A scope with nothing behind it draws whatever you push, so you can watch any number change: a ball's height, a score, a speed. A meter shows a level from 0 to 1.

Outside Circuitry

Inside Circuitry there is nothing to install. On your own:

  • dials.js comes with pictures.js: it sits in a dials folder beside pictures.js, and is loaded only by a scene that uses one of its names. Save a scene as panel.js and run npx pictures run panel.js. On a page of your own without pictures.js, import the functions: import { dial, keyboard } from "./dials.js". With one canvas on the page they find it themselves.
  • pydials comes with Pyctures: save a scene as panel.py and run pyctures run panel.py.

Neither is published on its own yet, to npm or to PyPI, and the dials are in the next release of pictures.js and of Pyctures. Until then they are used from copies of the dials.js repository and the pydials repository (pip install -e ., beside Pyctures).

What's in this section

  • Every control: each one, with its options and what it gives back.
  • Numbers, text and choices: a number box, a text box, a readout, a checkbox, choices, a dropdown, an XY pad, a colour picker, a progress bar, a light and a fader.
  • Controls for a game: a joystick, a pad of arrows and round buttons, and a keyboard game played by touch.
  • Controls for music: the shape of a note, a grid of steps, pads, wheels, editors for a synth's trance gate and its arpeggio pattern, and a drum sequencer.
  • Tying a control to a synth: a dial that is a setting, a keyboard that plays, a scope and a meter; the microphone, a recording, and a real knob that turns a dial.
  • Laying out a panel: headings and groups, rows, columns and grids, pages, how a panel wraps, fitting the width, a panel of a set size, and what happens on a phone.
  • Layout and touch: where the controls go, their colours, and how they answer hands.
  • Using it with Python: what is different in pydials.

Related