Symmetrical curve

blyk

Why this curve is not coming symmetrical? I have used exactly mirror coordinates even though I was not able to get symmetrical curves.

      void setup() {
        size(800, 600);
      }

      void draw() {
        background(-1);
        stroke(0, 255, 0);
        noFill();
        beginShape();
        stroke(0);
        vertex(0, 0);
        vertex(0, 40);
        vertex(width/5, 40); // first point
        bezierVertex(width/3, 40, width/2-width/6, 60, width/2-width/10, 75 );
        bezierVertex(width/2-width/10, 75, width/2, 100, width/2+width/10, 75 );
        bezierVertex(width/2+width/10, 75, width/2+width/6, 60, 2*width/3, 40 );
        vertex(4*width/5, 40);
        vertex(width, 40);
        vertex(width, 0);
        endShape();
        //fill(-1);
        line(width/2, 0, width/2, height);
        fill(255, 255, 0);
        text("1", 0, 0);
        text("2", 0, 40);
        text("3", width/5, 40);
        text("4", width/3, 40);
        text("5", width/2-width/6, 60);
        text("6", width/2-width/10, 75);
        fill(0, 0, 255);
        text("0", width/2, 90);
        fill(255, 0, 0);
        text("1", width, 0);
        text("2", width, 40);
        text("3", 4*width/5, 40);
        text("4", 2*width/3, 40);
        text("5", width/2+width/6, 60);
        text("6", width/2+width/10, 75);
      }

koogs

i haven't run this but it looks like you could have integer division problems.

800/3 for instance won't be what you expect 800/3.0 probably will. same for all the divisions in your code.

blyk

I think integer division shouldn't be a problem because bezierVertex() can take float vertex.

koogs

but you're not giving it float vertices, you're giving it truncated integer vertices.

try it:

println(800/3);
println(800/3.0);

blyk

hmm you are right it prints 266 and 266.66666 .. okay but how to over come it?

I have tried decreasing the y- axis values and it works but please can you fix the above code

    beginShape();
    noStroke();
    fill(#FF005E);
    vertex(0, 0);
    vertex(0, 30);
    //--------------------------------------------
    vertex(width/5, 30);
    bezierVertex(width/3, 30, width/2-width/6, 30, width/2-width/10, 40 );
    bezierVertex(width/2-width/10, 40, width/2, 90, width/2+width/10, 40 );
    bezierVertex(width/2+width/10, 40, width/2+width/6, 30, 2*width/3, 30 );
    vertex(4*width/5, 30);
    //---------------------------------------------
    vertex(width, 30);
    vertex(width, 0);
    endShape();

koogs

change width / 2 to width / 2.0 etc

or use width * .5

am at work, can't run code.

blyk

thanks ;) but it is not working

koogs

ok, something strange here

the bezierVertex example does

vertex(p1);
bezierVertex(c2, c3, p4);
bezierVertex(c5, c6, p7);

where the 'p's are the points that the curve goes through and the 'c's are the control points. there is no overlap.

you have

vertex(p1);
bezierVertex(p2, p3, p4);
bezierVertex(p4, p5, p6);
bezierVertex(p6, p7, p8);

there is overlap (p4, p6 both used twice). you're re-using the points as control points. i think this is legal, but is a bit odd.

your big problem is that the last point, the mirror of the first one, should be the last point in a bezierVertex(), not a standalone vertex(). but the overlapping thing makes this difficult.

maybe drawing the curve from both sides, letting it join in the middle would be easier.

blyk

I had the same thought .... > drawing the curve from both sides, letting it join in the middle would be easier.

thanks Koogs :D