createCanvas(400, 400);

}

​

​

function smoothstep(edge0, edge1, x) {

  // Scale, bias and saturate x to 0..1 range

  x = clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);

  // Evaluate polynomial

  return x * x * (3 - 2 * x);

}

​

function clamp(x, lowerlimit, upperlimit) {

  if (x < lowerlimit)

    x = lowerlimit;

  if (x > upperlimit)

    x = upperlimit;

  return x;

}

​

function smoothmove(start, end) {

  let result = [];

  let rev = false;

  if (end.x < start.x) {

    let t = start;

    start = end;

    end = t;

    rev = true;

  }

  //let d = sqrt(pow(start.x - end.x, 2), pow(start.y - end.y, 2));

  let y = start.y;

  let steps = (end.x - start.x)/2;

  for (let x = start.x; x <= end.x; x += 0.125) {

    y = ((end.y - start.y) * smoothstep(start.x, end.x, x)) + start.y;  

    result.push(x); result.push(y);

  }

  result.push(end.x); result.push(end.y);

​

  if (rev) {

    return result.reverse();

  }

​

  return result;

}

​

function bezierArrow(path, arrowAngle){

  strokeWeight(5);

  noFill();

  //draw the start dot

  strokeWeight(10);

  point(path[0], path[1]);

  //draw the path

  strokeWeight(5);

  beginShape();

  vertex(path[0], path[1]);  

  bezierVertex.apply(null, path.slice(2));

  endShape();  

  //Draw the pointer on the end

  let end = {x: path[path.length-2], y: path[path.length-1]};

  let x = cos(arrowAngle);

  let y = sin(arrowAngle);

  let x2 = cos((arrowAngle + PI) - (PI/3));

  let y2 = sin((arrowAngle + PI) - (PI/3));

  let x3 = cos((arrowAngle + PI) + (PI/3));

  let y3 = sin((arrowAngle + PI) + (PI/3));

  //scale and translate

  let scale = 5;

  triangle(x * (scale * 1.5) + end.x, 

           y * (scale * 1.5) + end.y, 

           x2 * scale + end.x, 

           y2 * scale + end.y, 

           x3 * scale + end.x, 

           y3 * scale + end.y);  

}

​

​

function draw() {

  background(220);

    //orbitControl();

  bezierArrow([100, 100, 150, 50, 170, 50, 200, 100],  (PI/3));

}