let greenSlider;

let blueSlider;

let strokeSlider;

​

function setup() {

  createCanvas(600, 400).parent('canvasposition');

  background(255);

  tools_HTML();

}

​

function tools_HTML() {

  createDiv('RED').parent('controlposition'); 

  redSlider = createSlider(0, 255, 50).parent('controlposition');

  redSlider.style('width', '100px').parent('controlposition');

  createDiv('GREEN').parent('controlposition');

  greenSlider = createSlider(0, 255, 50).parent('controlposition');

  greenSlider.style('width', '100px').parent('controlposition');

  createDiv('BLUE').parent('controlposition');

  blueSlider = createSlider(0, 255, 50).parent('controlposition');

  blueSlider.style('width', '100px').parent('controlposition');

  createDiv('STROKE').parent('controlposition');

  strokeSlider = createSlider(1, 20, 5).parent('controlposition');

  strokeSlider.style('width', '100px').parent('controlposition');

}

​

​

function draw() {

  const r = redSlider.value();

  const g = greenSlider.value();

  const b = blueSlider.value();

  const str = strokeSlider.value();

​

  stroke(r, g, b);

  strokeWeight(str);

  if (mouseIsPressed) line(mouseX, mouseY, pmouseX, pmouseY);

}