fabianmoronzirfas
7/24/2017 - 9:42 AM

controlling bezier curve with p5.js

controlling bezier curve with p5.js

var gutter = 50;
var diam = 20;
var pointleft, controlleft, pointright, controlright;
function setup() {
  createCanvas(500, 500);
pointleft = {x:
gutter, y: 
  height/2
};
controlleft = {x:
gutter, y:
(height/4)* 3};
pointright = {x: 
width - gutter, y: 
height/2};
controlright = {x: 
width - gutter, y: 
(height/4) * 3};
}

function draw() {
  background(255);


  bezier(
    pointleft.x, 
    pointleft.y, 
    controlleft.x, 
    controlleft.y, 
    controlright.x, 
    controlright.y, 
    pointright.x, 
    pointright.y
    );
  // left
  line(controlleft.x, 
    controlleft.y, 
    pointleft.x, 
    pointleft.y);
  ellipse(controlleft.x, controlleft.y, diam, diam);
  // right
  line(controlright.x, 
    controlright.y, 
    pointright.x, 
    pointright.y);
  ellipse(controlright.x, controlright.y, diam, diam);
}

function mouseDragged() {
  // make the right one adjustable
  if ((mouseX > controlright.x - diam && mouseX < controlright.x + diam)
    &&(mouseY > controlright.y - diam && mouseY < controlright.y + diam) ) {
    controlright.x = mouseX;
    controlright.y = mouseY;
  }
    if ((mouseX > controlleft.x - diam && mouseX < controlleft.x + diam)
    &&(mouseY > controlleft.y - diam && mouseY < controlleft.y + diam) ) {
    controlleft.x = mouseX;
    controlleft.y = mouseY;
  }
}