pub static createColorPicker: CreateColorPickerInternalTypeExpand description
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