Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Re: Bezier curves : adding curves equivalent to share control points?

Expand Messages
  • yannick.bochatay@free.fr
    I think you mix the order of the arguments : C x1,y1 x2,y2 x,y in c1 , the second control point is 105,55 and the current point 105,55 too. So the reflection
    Message 1 of 5 , Feb 14, 2012
    • 0 Attachment
      I think you mix the order of the arguments :
      C x1,y1 x2,y2 x,y

      in "c1", the second control point is 105,55 and the current point 105,55 too. So the reflection is 105,55.
      I guess the correct code is :

      <path d="M 10 55 C 10,10 10,10 105,55 C 200 100 200 55 200 55 " fill="none" stroke="red" id="c1"/>
      <path d="M 10 55 C 10,10 10,10 105,55 S 200 55 200,55 " fill="none" stroke="green" id="c2" />

      Cheers,
      Yannick


      ----- Mail original -----
      De: "philsvg" <philsvg@...>
      À: svg-developers@yahoogroups.com
      Envoyé: Mardi 14 Février 2012 02:15:20
      Objet: [svg-developers] Re: Bezier curves : adding curves equivalent to share control points?






      Thanks Yannick,

      your right, the figure is now :
      <path d="M 10 100 L 10 10 200 100 200 10 M10,55 L200,55" fill="none" stroke="blue"/>
      <!--<path d="M 10 55 Q 10 10 105 55 Q 200 100 200 55 " fill="none"
      stroke="red"id="q1"/>
      <path d="M 10 55 Q 10 10 105 55 T 200 55 " fill="none" stroke="green"id="q2"/>
      -->
      <path d="M 10 55 C 10,10 105,55 105,55 C 200 100 200 55 200 55 " fill="none"
      stroke="red" id="c1"/>
      <path d="M 10 55 C 10,10 105,55 105,55 S 200,100 200,55 " fill="none"
      stroke="green" id="c2" />
      <g transform="translate(0,100)">
      <path d="M 10,100 L 10,10 M 150,10 L 150,100" fill="none" stroke="blue"/>
      <path d="M 150,100 L 150,190 M 250,190 L 250,100" fill="none" stroke="black"/>
      <path d="M 10,100 C 10,10 150,10 150,100
      C 150,190 250,200 250,100" fill="none" stroke="red" id="c3"/>
      <path d="M 10,100 C 10,10 150,10 150,100 S 250,200 250,100" fill="none"
      stroke="green" id="c4"/>
      </g>

      c3 overlaps c4. Adding curves is equivalent to share control points

      I solved syntax error in c2. But why c2 doesn't overlap c1? the tangent is defined by (10,10 105,55), the current point is 105,55 so the reflection point is 200,100 as the figure is symmetrical around 105,55. Where is my error?

      Philippe

      --- In svg-developers@yahoogroups.com , yannick.bochatay@... wrote:
      >
      > Bonjour Philippe,
      > you have a syntax error in "c2" : "S 200,100 200,55 200,55" is not valid.
      > In "c4", in the "S" segment the first control point is the reflection of the last one :
      > in your case the last control point is "150,10", the current point is "150,100", so the reflection is "150,190" and not "150,200" as written in "c3". I checked, it works ;-)
      > Yannick
      >
      >
      > ----- Mail original -----
      > De: "philsvg" <philsvg@...>
      > À: svg-developers@yahoogroups.com
      > Envoyé: Lundi 13 Février 2012 18:30:31
      > Objet: [svg-developers] Bezier curves : adding curves equivalent to share control points?
      >
      >
      >
      >
      >
      >
      > Hi all,
      >
      > playing with bezier curves, i found different rendering if i make path with severals curves or if i share control points.
      >
      > Quadratique bezier curves (q1,q2) give the same curve, adding 2 curves in the path or sharing control points.
      >
      > Cubic bezier curves (c1,c2 or c3,c4) don't give the same curve.
      >
      > <path d="M 10 100 L 10 10 200 100 200 10" fill="none" stroke="blue"/>
      > <!--<path d="M 10 55 Q 10 10 105 55 Q 200 100 200 55 " fill="none" stroke="red"id="q1"/>
      > <path d="M 10 55 Q 10 10 105 55 T 200 55 " fill="none" stroke="green"id="q2"/> -->
      > <path d="M 10 55 C 10,10 105,55 105,55 C 200 100 200 55 200 55 " fill="none" stroke="red" id="c1"/>
      > <path d="M 10 55 C 10,10 105,55 105,55 S 200,100 200,55 200,55 " fill="none" stroke="green" id="c2" />
      > <g transform="translate(0,100)">
      > <path d="M 10,100 L 10,10 M 150,10 L 150,100" fill="none" stroke="blue"/>
      > <path d="M 150,100 L 150,200 M 250,200 L 250,100" fill="none" stroke="black"/>
      > <path d="M 10,100 C 10,10 150,10 150,100
      > C 150,200 250,200 250,100" fill="none" stroke="red" id="c3"/>
      > <path d="M 10,100 C 10,10 150,10 150,100 S 250,200 250,100" fill="none" stroke="green" id="c4"/>
      > </g>
      > same result in firefox, opera and chrome
      > is it normal? is it a bug? intuitively, i thought c1 and c2 should overlap, same for c2 and c3 as it does for q1 and q2 and the first part of c1,c2 and c3,c4 ...
      >
      > hope this helps
      > Philippe
      >
    • philsvg
      Thanks yannick, i understand where is my error, i don t use the good point to define the second control point. But the resulting curve is not symmetrical as
      Message 2 of 5 , Feb 14, 2012
      • 0 Attachment
        Thanks yannick,

        i understand where is my error, i don't use the good point to define the second control point. But the resulting curve is not symmetrical as expected ... so i found an other code to have a symmetrical curve :

        <path d="M 10 100 L 10 10 200 100 200 10 M10,55 L200,55" fill="none" stroke="blue"/>

        <path d="M 10 55 C 10,10 10,10 105,55 M 200,55 C 200,100 200,100 105,55 " fill="none"
        stroke="red" id="c1"/>
        <path d="M 10 55 C 10,10 10,10 105,55 S 200,100 200,55 " fill="none"
        stroke="green" id="c2" />

        I split c1 and declare two symmetricals bezier curves.

        What i want to know is if i add bezier curves to build a path, can i have an equivalent syntax and equivalent curve if i share control points?

        I search a bit more and i found that code :

        <g transform="translate(0,100)">
        <path d="M 10 100 L 10 10 200 100 200 10 M10,55 L200,55" fill="none" stroke="blue"/>

        <path d="M 10 55 C 10,10 10,10 105,55 C 200 100 200 100 200 55 " fill="none"
        stroke="red" id="c1"/>
        <path d="M 10 55 C 10,10 10,10 105,55 S 200 100 200,55 " fill="none"
        stroke="green" id="c2" />
        </g>

        So adding curves is equivalent to share control points.

        I have a last thing to find. How to approch quadratic curves with cubic curves, using only existing points?

        this figure compare quadratic and cubic curves build by adding curves or sharing control points

        <path d="M 10 100 L 10 10 200 100 200 10 M10,55 L200,55" fill="none" stroke="blue"/>
        <path d="M 10 55 Q 10 10 105 55 Q 200 100 200 55 " fill="none"
        stroke="red" id="q1"/>
        <path d="M 10 55 Q 10 10 105 55 T 200 55 " fill="none" stroke="yellow" id="q2"/>
        <path d="M 10 55 C 10,55 10,10 105,55 C 200 100 200 55 200 55 " fill="none"
        stroke="red" id="c1"/>
        <path d="M 10 55 C 10,55 10,10 105,55 S 200 55 200,55 " fill="none"
        stroke="green" id="c2" />

        and now i have a better understanding of bezier curves.


        Hope this helps
        Philippe

        --- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
        >
        > I think you mix the order of the arguments :
        > C x1,y1 x2,y2 x,y
        >
        > in "c1", the second control point is 105,55 and the current point 105,55 too. So the reflection is 105,55.
        > I guess the correct code is :
        >
        > <path d="M 10 55 C 10,10 10,10 105,55 C 200 100 200 55 200 55 " fill="none" stroke="red" id="c1"/>
        > <path d="M 10 55 C 10,10 10,10 105,55 S 200 55 200,55 " fill="none" stroke="green" id="c2" />
        >
        > Cheers,
        > Yannick
        >
        >
        > ----- Mail original -----
        > De: "philsvg" <philsvg@...>
        > À: svg-developers@yahoogroups.com
        > Envoyé: Mardi 14 Février 2012 02:15:20
        > Objet: [svg-developers] Re: Bezier curves : adding curves equivalent to share control points?
        >
        >
        >
        >
        >
        >
        > Thanks Yannick,
        >
        > your right, the figure is now :
        > <path d="M 10 100 L 10 10 200 100 200 10 M10,55 L200,55" fill="none" stroke="blue"/>
        > <!--<path d="M 10 55 Q 10 10 105 55 Q 200 100 200 55 " fill="none"
        > stroke="red"id="q1"/>
        > <path d="M 10 55 Q 10 10 105 55 T 200 55 " fill="none" stroke="green"id="q2"/>
        > -->
        > <path d="M 10 55 C 10,10 105,55 105,55 C 200 100 200 55 200 55 " fill="none"
        > stroke="red" id="c1"/>
        > <path d="M 10 55 C 10,10 105,55 105,55 S 200,100 200,55 " fill="none"
        > stroke="green" id="c2" />
        > <g transform="translate(0,100)">
        > <path d="M 10,100 L 10,10 M 150,10 L 150,100" fill="none" stroke="blue"/>
        > <path d="M 150,100 L 150,190 M 250,190 L 250,100" fill="none" stroke="black"/>
        > <path d="M 10,100 C 10,10 150,10 150,100
        > C 150,190 250,200 250,100" fill="none" stroke="red" id="c3"/>
        > <path d="M 10,100 C 10,10 150,10 150,100 S 250,200 250,100" fill="none"
        > stroke="green" id="c4"/>
        > </g>
        >
        > c3 overlaps c4. Adding curves is equivalent to share control points
        >
        > I solved syntax error in c2. But why c2 doesn't overlap c1? the tangent is defined by (10,10 105,55), the current point is 105,55 so the reflection point is 200,100 as the figure is symmetrical around 105,55. Where is my error?
        >
        > Philippe
        >
        > --- In svg-developers@yahoogroups.com , yannick.bochatay@ wrote:
        > >
        > > Bonjour Philippe,
        > > you have a syntax error in "c2" : "S 200,100 200,55 200,55" is not valid.
        > > In "c4", in the "S" segment the first control point is the reflection of the last one :
        > > in your case the last control point is "150,10", the current point is "150,100", so the reflection is "150,190" and not "150,200" as written in "c3". I checked, it works ;-)
        > > Yannick
        > >
        > >
        > > ----- Mail original -----
        > > De: "philsvg" <philsvg@>
        > > À: svg-developers@yahoogroups.com
        > > Envoyé: Lundi 13 Février 2012 18:30:31
        > > Objet: [svg-developers] Bezier curves : adding curves equivalent to share control points?
        > >
        > >
        > >
        > >
        > >
        > >
        > > Hi all,
        > >
        > > playing with bezier curves, i found different rendering if i make path with severals curves or if i share control points.
        > >
        > > Quadratique bezier curves (q1,q2) give the same curve, adding 2 curves in the path or sharing control points.
        > >
        > > Cubic bezier curves (c1,c2 or c3,c4) don't give the same curve.
        > >
        > > <path d="M 10 100 L 10 10 200 100 200 10" fill="none" stroke="blue"/>
        > > <!--<path d="M 10 55 Q 10 10 105 55 Q 200 100 200 55 " fill="none" stroke="red"id="q1"/>
        > > <path d="M 10 55 Q 10 10 105 55 T 200 55 " fill="none" stroke="green"id="q2"/> -->
        > > <path d="M 10 55 C 10,10 105,55 105,55 C 200 100 200 55 200 55 " fill="none" stroke="red" id="c1"/>
        > > <path d="M 10 55 C 10,10 105,55 105,55 S 200,100 200,55 200,55 " fill="none" stroke="green" id="c2" />
        > > <g transform="translate(0,100)">
        > > <path d="M 10,100 L 10,10 M 150,10 L 150,100" fill="none" stroke="blue"/>
        > > <path d="M 150,100 L 150,200 M 250,200 L 250,100" fill="none" stroke="black"/>
        > > <path d="M 10,100 C 10,10 150,10 150,100
        > > C 150,200 250,200 250,100" fill="none" stroke="red" id="c3"/>
        > > <path d="M 10,100 C 10,10 150,10 150,100 S 250,200 250,100" fill="none" stroke="green" id="c4"/>
        > > </g>
        > > same result in firefox, opera and chrome
        > > is it normal? is it a bug? intuitively, i thought c1 and c2 should overlap, same for c2 and c3 as it does for q1 and q2 and the first part of c1,c2 and c3,c4 ...
        > >
        > > hope this helps
        > > Philippe
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.