Static p5_sys::global::createColorPicker

pub static createColorPicker: CreateColorPickerInternalType

Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color.

Examples

let colorPicker;
function setup() {
  createCanvas(100, 100);
  colorPicker = createColorPicker('#ed225d');
  colorPicker.position(0, height + 5);
}

function draw() {
  background(colorPicker.color());
}

let inp1, inp2;
function setup() {
  createCanvas(100, 100);
  background('grey');
  inp1 = createColorPicker('#ff0000');
  inp1.position(0, height + 5);
  inp1.input(setShade1);
  inp2 = createColorPicker(color('yellow'));
  inp2.position(0, height + 30);
  inp2.input(setShade2);
  setMidShade();
}

function setMidShade() {
  // Finding a shade between the two
  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);
  fill(commonShade);
  rect(20, 20, 60, 60);
}

function setShade1() {
  setMidShade();
  console.log('You are choosing shade 1 to be : ', this.value());
}
function setShade2() {
  setMidShade();
  console.log('You are choosing shade 2 to be : ', this.value());
}

Parameters

value? default color of element