User Interface

UI Components for p5.js rendered directly on the canvas

Rendering on the canvas makes it easier to customize the appearance and position of UI components, and simplifies reading and updating the input values since no event handling is required.

In contrast, native HTML input elements provide text facilities, keyboard input, accessibility, and faster rendering.

Source Code for this Sketch

let ui
let cookies
let liters
let lightsToggle
let squareToggle
let circleToggle

function setup() {
    createCanvas(800, 400, P2D, canvas)
    chrisDefaults()

    ui = new UI(10, 10, 6)
    liters = ui.add(new Slider(50, 150, 5).setLabel("liters"))
    cookies = ui.add(new Slider(0, 1000, 10).setLabel("cookies"))
    lightsToggle = ui.add(new Toggle().setLabel("Lights"))
    squareToggle = ui.add(new Toggle(true).setLabel("Add a square"))
    circleToggle = ui.add(new Toggle(true).setLabel("Add a circle"))

    ui.layoutVertical()
}

function draw() {
    if(lightsToggle.value) {
        background(100)
        ui.textColor = color(220, 100, 50)
    } else {
        background(0)
        ui.textColor = color(30, 100, 50)
    }

    if(squareToggle.value) {
        fill(0, 100, 50)
        rect(width*3/4, height/2, 100, 100)
    }
    if(circleToggle.value) {
        fill(200, 100, 50)
        circle(width*3/4, height/2, 100)
    }

    fill(200, 100, 50, .4)
    rect(0, height-liters.value, width, liters.value)

    ui.draw()

    textSize(50)
    text(cookies.value + " cookies", 100, height/2)
}

You may use all or part of the p5 code seen on this page for your own creations, without restriction. Attribution is appreciated but not required.

This sketch also includes the following sources: p5common.js . Sources are available under their respective licenses.

See all p5.js sketches