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;
}
}