y = 100,

  w = 100,

  h = 130,

  many = 4;

var vs = [];

let cp = false, // true;

  dot = true;

​

​

function setup() {

  createCanvas(400, 400,WEBGL);

  make_vs();

}

​

function draw() {

  background(200, 200, 0);

  rectMode(CENTER);

  fill(0, 200, 0);

  stroke(0, 200, 0);

  strokeWeight(1);

  textSize(20);

  text("control points _" + cp + "_ use key [c]", 10, 20);

  draw_vs();

}

​

function make_vs() {

  vs = [];

  let v = createVector(x, y + h);

  append(vs, v);

  v = createVector(x + w, y);

  append(vs, v);

  v = createVector(x + 2 * w, y + h);

  append(vs, v);

  v = createVector(x + w, y + 2 * h);

  append(vs, v);

  v = createVector(x, y + h);

  append(vs, v);

}

​

function draw_vs() {

  beginShape();

  noFill();

  stroke(0, 0, 200);

  strokeWeight(2);

  if (cp) {

    curveVertex(vs[many - 1].x, vs[many - 1].y); // begin control point

    if (dot) {

      stroke(0, 200, 0);

      rect(vs[many - 1].x, vs[many - 1].y, 10, 10);

      stroke(0, 0, 200);

    }

  }

  for (let i = 0; i <= many; i++) {

    curveVertex(vs[i].x, vs[i].y);

    if (dot) ellipse(vs[i].x, vs[i].y, 5);

  }

  if (cp) {

    curveVertex(vs[1].x, vs[1].y); // end control point

    if (dot) {

      stroke(0, 200, 0);

      rect(vs[1].x, vs[1].y, 10, 10);

      stroke(0, 0, 200);

    }

  }

  endShape(); // with or without cp,  not use CLOSE

}

​

function keyPressed() {

  if (key == 'c') cp = !cp;

  if (key == 'h') {

    h = map(mouseY, 0, height, 10, 190);

    console.log("h " + h);

    make_vs(); // make array again with new "h"

  }

}