This package has been deprecated

Author message:

this package has been deprecated

p5 Controller

Quick create controllers for p5.js

Getting Started

• Download the p5.controller.min.js file and reference it at the end of your HTML body

• In your sketch:

 // declare the variables
  var p5ct, // p5-controller instance
      ct; // your controllers

  var size;

  function setup() {
    size = 300;

    // Create a p5-controller instance:
    p5ct = new p5Controller('position','tr');

    // Create your controller
    ct = p5ct.createController('xypad');

    createCanvas(size, size);
  }

  function draw() {
    // now you can use the `ct.x` and `ct.y` variables

    fill(map(ct.x, 0, size, 0, 255));

    stroke(map(ct.y, 0, size, 255, 0));

    ellipse(
      size / 2,
      size / 2,
      ct.x,
      ct.y
    );
  }

See the list of the p5Controller options See the list of the controllers options

Creating Controllers

  // Create a single controller with default configuration:
  var myXYpad = myCtrl.createController('xypad');

  // Create a single controller with custom configuration:
  var myXYpad = myCtrl.createController('xypad',{
    maxX: 600,
    maxY: 400
  });

  // Create 2 controllers with default configuration, same type:
  var myXYpad = myCtrl.createControllers('xypad');

  // Create `n` controllers with default configuration, same type:
  var myXYpad = myCtrl.createControllers('xypad', 5);

  // Create multiple controllers of different types, default configuration
  var myXYpad = myCtrl.createControllers({
    types: ['xpad', 'ypad', 'button']
  });

  // Create multiple controllers with custom configuration, same type
  var myYpads = myCtrl.createControllers('ypad',{
    minY: 300,
    maxY: 600
  });

Controllers

• XYPad

• Xpad

• Ypad

• Text

• Button

• Checkbox

Options

p5Controller instance options

Option	Type	Default	Description
theme	String	p5	See the [list of themes][##Themes]
direction∗	String	vertical	vertical | horizontal
position∗∗	String	tl	p5controller initial position in the screen tl top-left tr top-right br botton-right bl bottom-left

∗ - The horizontal direction is development and might break with xpads.

∗∗ - The right and bottom positions are still in development and might break depending on the controller configurations

Controllers options

Single controllers

Option	Type	Default	Description
name	String	${element_type}	Controller type. See the [list of controllers][#controllers].
PADS			Options for the xypad, xpad, ypad controllers
minX	Number	0	Minimum X value (not applicable for the ypad)
minY	Number	0	Minimum Y value (not applicable for the xpad)
maxX	Number	${windowWidth}	Maximun X value (not applicable for the ypad)
maxY	Number	${windowHeight}	Maximun Y value (not applicable for the xpad)
INPUTS			Options for the text, button, checkbox controllers
label	String	'${Type}'	Label for the checkbox and button elements
value	String	''	Label for the checkbox and button elements
readOnly	Boolean	false	For the text only
disabled	Boolean	false	Disables the controler

Multiple controllers

All the options for a single controller, plus:

Option	Type	Default	Description
n	Number	2	Number of controllers of the same type
beforeCreate	Function	null	Function to be trigged right before an controller is created
afterCreate	Function	null	Function to be trigged right after an controller is created

Themes

• p5 (default)

• hip

• blac-fire

• black-mono

Contribute

This project is in its early develop stage, so for now the best way to contribute is using and reporting errors and bugs via issues, also sending suggestions to [e-mail].