Prism
GuideCookbookExamplesErrorsPlayground

Guide

01Lessons & Slides02Exercises03Scene & State04Objects05Three dimensions06Controls07Timeline08Loops & Logic09Expressions & Math

Guide · 06 of 09

Controls

Controls are the interactive widgets the learner uses. They write to state variables, which re-evaluates all object expressions.

slider#

A horizontal slider bound to a numeric state variable. min/max override the param's range.

slider <bind> { [label: "text"], [min: <n>], [max: <n>], [step: <n>] }

Example

-6-4-2246-6-4-2246
move the point0
-33

toggle#

An on/off switch bound to a boolean state variable.

toggle <bind> { [label: "text"] }

Example

-6-4-2246-6-4-2246

stepper#

A − / + stepper bound to a numeric state variable.

stepper <bind> { [label: "text"], [step: <n>] }

Example

-6-4-2246-6-4-2246
rectangles
4

picker#

A row of pill buttons bound to a choice state variable, one per option.

picker <bind> { [label: "text"] }

Example

-6-4-2246-6-4-2246
pick a shape

button#

A pressable button that fires one or more actions. set = instant assignment; step = increment; animate = smooth tween; toggle = flip a boolean. Easing: linear, easeIn, easeOut, easeInOut.

button "label" { [set: {k: v}], [step: {k: v}], [animate: {k: v}], [toggle: "key"], [dur: <ms>], [ease: <curve>] }
proptypedescription
set{ key: value }instantly set state keys
step{ key: delta }increment state keys
animate{ key: target }tween state keys to target values
togglestringflip a boolean state key
durmsanimation duration (default 600ms)
easestringeasing curve for animate

Example

-6-4-2246-6-4-2246
← PreviousThree dimensionsNext →Timeline

On this page

slidertogglestepperpickerbutton