straight line to curved line

edited June 2015 in How To...

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:

Answers

  • Answer ✓

    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);
    }
    
  • Answer ✓

    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!

Sign In or Register to comment.