#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# straight line to curved line

edited June 2015

Hi, I have a straight vertical line. When mouseX goes over it (right direction) the line will curve (as a semi circle) to the right and then remain curved until my mouseX goes back to the initial position (left of the line) I tried bezier() and curve() but they looks quite confusing in how to use them..is there a simple way to curve a straight line()? thanks

Tagged:

• I suggest that you use the example code in the reference section for bezier() and curve () and play with them by changing the parameter values to see how they work. There is no simpler method, because you would have to create a lot of code to do the same thing.

• edited June 2015

ok thanks..after some work I managed to do something similar to what I need. the code below act as I want (referring to the mouse input) but my problem is that I don't understand how to make a straight vertical line. At the beginning (while mouseX < 146) the curve has to be a straight vertical line and then gradually increase (until mouseX reach 160)

``````  void draw() {

background(255);

if(mouseX > 146 && mouseX < 160)
curve(-mouseX, 26*2, 73*2, 24*2, 73*2, 61*2, -mouseX, 65*2);
else if(mouseX > 160)
curve(-160, 26*2, 73*2, 24*2, 73*2, 61*2, -160, 65*2);
else
curve(0, 26*2, 73*2, 24*2, 73*2, 61*2, 0, 65*2);
}
``````

thank you!

• update..looks fine although I don't fully understand how curve() works..I still don't understand which are the points I need to modify to increase/decrease the rounding of the curve (to reach a perfect half circle)

``````void draw() {

background(0);
float rgm, mm;

noFill();
strokeWeight(4);
stroke(255,183,183,50);
if(mouseX > 146 && mouseX < 200){
rgm = map(mouseX, 146, 200, 50,255);
mm = map(mouseX, 146, 200,-mouseX+140,-200);
stroke(255,183,183, rgm);
curve(mm, 152, 146, 48, 146, 322, mm, 130);
}else if(mouseX > 200){
stroke(255,183,183,255);
curve(-200, 152, 146, 48, 146, 322, -200, 130);
}else
curve(140, 152, 146, 48, 146, 322, 140, 130);

println(mouseX);
}
``````
• To make the curve fit a perfect semi-circle it is easier to use bezier() rather than curve().

This sketch demonstrates draws a bezier curve between 2 points, the curvature based on the mouse X position. If you move the mouse you will find there is a position which duplicates a semicircle.

The code is show here

``````// Bezier points
float x0, x1, x2, x3;
float y0, y1, y2, y3;
// Circle point;
float cx, cy, cd;

void setup() {
size(600, 400);
x0 = x3 = cx = width * 0.5;
y0 = y1 = height * 0.2;
y2 = y3 = height * 0.8; // i.e. 1 - 0.2 for symetry
cy = height * 0.5;
cd = y3 - y1;
ellipseMode(CENTER);
textSize(12);
}

void draw() {
background(250);
// Update control points
x1 = x2 = mouseX;
// DRaw the circle
strokeWeight(0.5);
stroke(0, 128, 0);
fill(200, 255, 200);
line(cx, 0, cx, height);
ellipse(cx, cy, cd, cd);
// draw Bezier curve
stroke(0);
strokeWeight(1.0);
noFill();
bezier(x0, y0, x1, y1, x2, y2, x3, y3);
// Draw control points and lines
stroke(0, 128, 255, 96);
line(x0, y0, x1, y1);
line(x3, y3, x2, y2);
noStroke();
fill(0);
ellipse(x0, y0, 5, 5);
ellipse(x1, y1, 5, 5);
ellipse(x2, y2, 5, 5);
ellipse(x3, y3, 5, 5);
// Display labels for the control points
text("x0", x0 -8, y0 + 14);
text("x1", x1 - 8, y1 - 4);
text("x2", x2 - 8, y2 + 14);
text("x3", x3 - 8, y3 -4);
text("bezier(x0, y0, x1, y1, x2, y2, x3, y3);", 28, 14);
}
``````
• thanks!