Changing the amplitude is easy. That is done by just scaling the y-

coordinates of the control points by the same factor by which you

wish to scale the amplitude.

Placing the extrema at specific x-coordinates is more complicated. So

I'll make use of the symmetries present in your special case.

We have the path segment

c x1,y1 x2,y2 x3,y3

We assume

y2 = -y1

y3 = 0

and

x2 = x3-x1

Since we can easily rescale the curve vertically as well as

horizontally, we may further assume that

y1 = 1 and

x3 = 1

Thus we consider the path segment

c x1,1 (1-x1),-1 1,0

which is determined by the single parameter x1.

The question is, how to set x1 if we want one of the extrema to be at

the x-coordinate p. Due to the symmetry the other extremum will then

be at x=1-p.

Using

y1 = 1, y2 = -1, y3 = 0

with the formulas from my previous post, we find that the extrema lie

at the curve parameters

t = (3 +- sqrt(3))/6

Thus

(1-t) = (3 -+ sqrt(3))/6

and

t*(1-t) = (3^2-3)/6^2 = 1/6

The x-coordinate of the corresponding point of the curve is

x(t) = 3*x1*t*(1-t)^2 + 3*(1-x1)*t^2*(1-t) + t^3

= 3/6*x1*(1-t) + 3/6*(1-x1)*t + t^3

= x1*(1-2*t)/2 + t/2 + t^3

To get x(t)=p we set

x1 = (p - t/2 -t^3)*2/(1-2*t)

Furthermore,

y(t) = (1-2*t)/2,

so to achive a given amplitude a let

y1 = a*2/(1-2*t)

Here is a working code.

<?xml version="1.0" encoding="UTF-8" ?>

<svg

xmlns="

http://www.w3.org/2000/svg"
xmlns:xlink="

http://www.w3.org/1999/xlink"
viewBox="-1 -0.5 3 1"

onload="doIt();"

stroke-width="0.001px">

<defs>

<script type="text/ecmascript"><![CDATA[

function doIt() {

//- parameters

var p = 0.25;

var a = -1/2/Math.PI;

//- calculation

var t = (3 - Math.sqrt(3))/6;

var a0 = (1-2*t)/2;

var x1 = (p -t*(1+2*t*t)/2)/a0;

var d = "c"+x1+" "+(a/a0)+" "+(1-x1)+" "+(-a/a0)+" 1 0";

//- place markers

document.getElementById("p0").setAttributeNS(null, "x", ""+p);

document.getElementById("p1").setAttributeNS(null, "x", ""+(1-p));

document.getElementById("u").setAttributeNS(null, "y", ""+a);

document.getElementById("l").setAttributeNS(null, "y", ""+(-a));

//- set pathdata

document.getElementById("path1").setAttributeNS(null, "d", "M-1

0"+d+"m1 0"+d);

document.getElementById("path0").setAttributeNS(null, "d", "M0 0"+d);

}

]]></script>

<line id="vline" stroke="blue" y1="-1" y2="1" x1="0" x2="0"/>

<line id="hline" stroke="blue" x1="-1" x2="2" y1="0" y2="0"/>

</defs>

<use id="p0" xlink:href="#vline"/>

<use id="p1" xlink:href="#vline"/>

<use id="u" xlink:href="#hline"/>

<use id="l" xlink:href="#hline"/>

<path id="path1" fill="none" stroke="green" d="M0 0"/>

<path id="path0" fill="none" stroke="red" d="M0 0"/>

</svg>

But note that the curvature is not zero at the path segments' start

and end points. For approximating a sine I would use four cubic

bezier curves per rotation.

Ciao

Frank

--- In svg-developers@yahoogroups.com, "Ken Coar" <Ken@...> wrote:

>

> Whoo! That's not exactly what I'd call simple, but when I finally

got

> it implemented it worked w/o any problems. Kudos for your error-

free

> untested scribing.

>

> The follow-on question now is working a bit backwards. Is there a

way

> of calculating what the control points should be given the extrema?

> For the example given, suppose I know the exact amplitude I want for

> the 'sine wave;' how do I calculate the control-point coordinates

that

> would give the proper result?

>

> I'm not sure this admits of a general solution, but I'll be

fascinated

> to find out. :-)

>

> Thanks, Frank!

>