We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi,
I have small issue with creating linked beziers in that the link between each bezier is not that smooth. I'm using bezierVertex to draw the connected beziers.
What I'm trying to do is smooth out this join, and from what I understand I need to do the following "In order to make two curves A and B smoothly continuous, the last control point of A, the last point of A, and the first control point of B have to be on a straight line."
So, given two vectors like so;
function setup() {
createCanvas(windowWidth, windowHeight);
background(255);
noLoop();
rectMode(CENTER);
var v1 = createVector(random(200, 300), random(200, 300));
var v2 = createVector(random(100, 400), random(300, 400));
ellipse(v1.x, v1.y, 20, 20);
ellipse(v2.x, v2.y, 20, 20);
var angle = p5.Vector.angleBetween(v1, v2);
console.log(angle, radians(angle));
ellipse( 200 * sin(angle) , 200 * cos(angle), 30, 30);
}
I want to be able to plot the 3rd, so that I can set the control point of the next bezier in my in a straight line, and smooth the bezier connection point.
Thanks in advance.
First time using p5. I'm converting an old Director project as a learning exercise. The Director version looks like this; https://goo.gl/photos/K6zmabEyPUgTsmYMA
Answers
It would help if your example draw a curve. And then you want that curve to continue to another point? I'm confused about which points you want as endpoints and which you want as control points.
Here is a bezier curve with dragaballs to play with in the meantime.
(Uses Processing, not P5.js!)
Hi,
Sorry, I took out the curve drawing, as I thought that would complicate things.
Basically I'm trying to do what is mentioned here;
https://processing.org/tutorials/curves/
At the bottom of the page, an example is given for drawing two joined beziers, and then again, with a solution for an uneven join where the first bezier connects to the next in the sequence.
I have the bezier line drawing all complete, its just getting a solution to make the connection between the beziers smooth. Which is basically finding the angle between 2 points, and being able to plot a 3rd point further along that same line. As illustrated below;
Seems that lerp() with a number larger than 1 does basically what I'm after.
@ noponies , very interesting
When I read your title I immediately thought lerp(),
Then I read your question and thought it only worked between points, so you taught me something new.
Can you also test what happens with negative values?It seems to also lerp the other way for negative number which I hoped it would.
Yeah, I was surprised it worked with numbers great that 1. Not in the docs.
@noponies -- glad that PVector.lerp() solved your problem.
For clarity reading the code or for a tutorial on the concept, it would also be intuitive to me to implement that PVector.lerp() as a series of vector operations -- for example, subtract, multiply, then add:
...thus finding any new point(s) along the line v1-v2 (with mult 0-1) or beyond the line (with mult 1+).
In other words, given a line v1-v2, find a new point v3 at a scaling factor m along that line by:
v3 = v1 + m*(v2-v1)