p5-controller v1.0.3

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

∗ - 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

Multiple controllers

All the options for a single controller, plus:

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 daniloprates@gmail.com.