p5.button.js

Download: p5.button.min.js

Hello!
My name is Nicolas Atek and I am a hobbyist programmer.

p5.button.js is a one function library that will help you create buttons for your p5.js sketch.

Although p5.js library got the ability to use dom objects like buttons, sliders, ...
p5.button.js is suited for small interfaces directly rendered in p5 canvas.

Let me show you a simple exemple:

var my_button = { x: 10, y: 10, w: 100, text: 'Hello!' };

function setup() {
  createCanvas( 750, 50 );
}

function draw() {
  background( 224 );
  button( my_button );
}

The button() function first check the state of a button then render it according to its state.

Button state properties are:

down: continously check the pression on the button.
pressed: one time check when the button is pressed.
released: one time check when the button is released.
clicked: one time check when the button is released inside its frame.
on_pressed: let you define a function for when a button is pressed.
on_released: let you define a function for when a button is released.
on_clicked: let you define a function for when a button is clicked.

var my_button1 = { x: 10, y: 10, w: 100, text: 'Button 1' };
var my_button2 = { x: 120,y: 10, w: 100, text: 'Button 2' };
var my_button3 = { x: 230,y: 10, w: 100, text: 'Button 3' };
var click_count = 0;
  
function setup() {
  createCanvas( 750, 50 );
  my_button3.on_clicked = function() {
    click_count += 1;
    this.text = 'Click ' + click_count;
  };
}
  
function draw() {
  background( 224 );
  my_button1.text = button( my_button1 ).down === true ? 'Down' : 'Button 1'; 
  
  button( my_button2 );
  if ( my_button2.pressed ) {
    my_button2.text = 'Pressed';
  }
  if ( my_button2.released ) {
    my_button2.text = 'Released';
  }

  button( my_button3 );
}

Button base properties are:

x, y, w, h, text
angle: in degrees
icon: a p5 image ( smaller than the button size that will replace the text )
origin_x, origin_y: center x and y values ( 0: left / top, 1: right / bottom)
you can also use string format to set relative coordinates ( '-100' )
offset_x, offset_y: translation x and y values

As for position, size and text, you may want to modify the style of a button:

Button style properties are:

color: CSS color string format ( 'rgb(255,0,0)', 'black', '#0f0', ... )
hover_color: CSS color string format ( empty string to disable )
pressed_color: CSS color string format ( empty string to disable )
corner_radius
corners: array of 4 corner radius
pattern: a drawingContext pattern object
pattern_fixed: true to align the pattern to the object position
border_color: CSS color string format
border_hover_color: CSS color string format ( empty string to disable )
border_thickness
shadow: { blur, color, offset_x, offset_y }
hover_shadow: { blur, color, offset_x, offset_y }
shading: value between 0 ( no shading ) and 1 ( full shading )
text_color: CSS color string format
text_hover_color: CSS color string format ( empty string to disable )
text_shadow: { blur, color, offset_x, offset_y }
text_size
text_margin
text_offset: { x, y }
text_align: 'LEFT', 'RIGHT' or 'CENTER'
font: browser safe font ( 'Comic Sans MS', 'Arial Black', ... ) or p5 font
icon_color: CSS color string format
icon_hover_color: CSS color string format ( empty string to disable )

var my_button1 = {
  x: 40, y: 35, w: 100, text: 'Button 1',
  color: 'DarkTurquoise', hover_color: 'Cyan', pressed_color: 'LightCyan'
}
var my_button2 = {
  x: 165, y: 30, w: 140, h: 40, text: 'Button 2',
  border_thickness: 3, corner_radius: 20,
  border_color: 'Maroon', border_hover_color: 'Red',
  color: 'rgb(0,255,0)', hover_color: '', pressed_color: 'rgb(160,255,64)',
  text_color: 'Maroon', text_hover_color: 'Red', text_offset: { y: -5 }
}
var my_button3 = {
  x: 330, y: 35, w: 100, text: 'Button 3', corner_radius: 4,
  shadow: { blur: 6, color: 'rgba(0,0,0,0.5)' }, shading: 0.5,
  font: 'Courier New', text_size: 16 
}
var my_button4 = {
  x: 455, y: 30, w: 150, h: 40, text: 'Button 4', corners: [10,0,10,0],
  color: 'rgb(255,192,0)', hover_color: 'rgb(255,255,0)',
  pressed_color: 'rgb(255,255,128)', border_thickness: 3,
  border_color: 'rgba(0,0,0,0.1)', border_hover_color: 'rgba(128,0,0,0.1)', 
  font: 'Comic Sans MS', text_size: 20,  shading: 1,
  shadow: { blur: 10, color: 'Black', offset_x: 1, offset_y: 4 },
  hover_shadow: { blur: 10, color: 'rgb(128,0,0)', offset_x: 1, offset_y: 4 },
  text_shadow: { blur: 3, color: 'White', offset_x: 1, offset_y: 2 }
}
var my_button5 = {
  x: 630, y: 25, w: 75, h:50, text: 'Button 5',
  color: 'rgb(255,204,255)', hover_color: 'rgb(255,224,255)', pressed_color: '',
  border_thickness: 0, shadow: { blur: 3, color: 'Black', offset_y: 2 },
  corner_radius: 10, shading: 0.35,
  icon_color: 'Black', icon_hover_color: 'rgb(128,32,128)'
}

var pattern, icon;

function preload() {
  icon = loadImage( 'gear.png' );
}

function setup() {
  createCanvas( 750, 100 );
  my_button2.pattern_fixed = true;
  my_button5.icon = icon;
  var image = new Image();
  image.src = 'pattern.png';
  image.onload = function() {
    pattern = drawingContext.createPattern( image, 'repeat' );
    my_button2.pattern = pattern;
  };
}
    
function draw() {
  background( 224 );
  button( my_button1 ); 
  button( my_button2 );
  button( my_button3 );
  button( my_button4 );
  button( my_button5 );
}

You can also cretate a style object and assign it to any button.style property.

A style object share the exact same style properties of a button.

In combination with the button.style property, you can use the button.exclude propety which is an array containing string names of the properties you want to exclude.

So you can set full theming for all your buttons but keep specific aspects for each one.

There are also style.on_pressed and style.on_released properties which may be useful
to define functions that act for all buttons sharing this style.
*Note that those functions will let you modify button properties where style not overrides.

var my_style = {
    color: 'rgb(255,160,64)', hover_color: '', pressed_color: 'rgb(255,192,64)',
    corner_radius: 10, border_color: 'Black', border_hover_color: 'Yellow',
    shadow: { blur: 5, color: 'Black' }, shading: 0.25,
    text_color: 'Maroon', text_hover_color: 'Maroon'
  };

  var my_button1 = { 
    x: 375, y: 30, w: 100, text: 'Button 1',
    origin_x: 0.5, origin_y: 0.5, style: my_style
  };
  var my_button2 = {
    x: 375, y: 80, w: 150, h: 40, text: 'Button 2',
    origin_x: 0.5, origin_y: 0.5, style: my_style,
    text_align: 'RIGHT'
  };
  var my_button3 = {
    x: 375, y: 130, w: 100, text: 'Button 3',
    origin_x: 0.5, origin_y: 0.5, style: my_style
  };
  var my_button4 = {
    x: 375, y: 180, w: 150, h: 40, text: 'Button 4',
    origin_x: 0.5, origin_y: 0.5, style: my_style,
    text_align: 'LEFT'
  };
  my_button4.exclude = [ 'corner_radius' ];
  my_button4.corner_radius = 20;
  var my_button5 = {
    x: 375, y: 230, w: 100, text: 'Button 5',
    origin_x: 0.5, origin_y: 0.5, style: my_style
  };
  my_button5.exclude = [ 'text_color', 'text_hover_color' ];
  my_button5.text_color = 'Black';
  my_button5.text_hover_color = 'Yellow';
  my_button5.text_shadow = { blur: 2, color: 'rgba(0,0,0,0.25)', offset_y: 2 };
          
  function setup() {
    createCanvas( 750, 260 );
    my_style.on_pressed = function() {
      this.text_offset = { x: 1, y: 1 };
    };
    my_style.on_released = function() {
      this.text_offset = { x: 0, y: 0 };
    };
  }

  function draw() {
    background( 224 );
    button( my_button1 );
    button( my_button2 );
    button( my_button3 );
    button( my_button4 );
    button( my_button5 );
  }
}

Hope, you will enjoy this library which will be certainly part of a bigger one.