straight line to curved line

plux

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

quark

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.

plux

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!

plux

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

quark

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

plux

thanks!