let weight;

let r;

let g;

let b;

let colours = [];

​

function setup() {

  createCanvas(600, 400);

  weight = createSlider(1, 10, 1);

  weight.position(0, 0);

  r = createSlider(0, 255, 1);

  r.position(weight.width + 10, 0);

  g = createSlider(0, 255, 1);

  g.position(weight.width + r.width + 20, 0);

  b = createSlider(0, 255, 1);

  b.position(weight.width + r.width + g.width + 30, 0);

}

​

function draw() {

  background(255);

  noStroke();

  fill(0);

  textSize(16);

  text("Stroke Weight", 0, 37);

  text("Red Value", weight.width + 10, 37);

  text("Green Value", weight.width + r.width + 20, 37);

  text("Blue Value", weight.width + r.width + g.width + 30, 37);

  if (mouseY > 45 && mouseIsPressed) {

    drawing.push(createVector(mouseX, mouseY, weight.value()));

  } else {

    drawing.push(null);

  }

  colours.push(createVector(r.value(), g.value(), b.value()));

  push();

  noFill();

  beginShape();

  for (let i = 0; i < drawing.length; i++) {

    let v = drawing[i];

    if (v == null) {

      endShape();

      beginShape();

    } else {

      let c = colours[i];

      stroke(c.x, c.y, c.z);

      strokeWeight(v.z);

      vertex(v.x, v.y);

    }

  }

  endShape();

  pop();

  strokeWeight(weight.value());

  stroke(r.value(), g.value(), b.value());

  point(width - 30, 50);

}