# Difference between revisions of "Circles on circles"

This is an example of a parametric curve plot. It shows the orbit of a point on a circle. The circle rotates on a circle which again rotates on the unit circle. The resulting curve is described by the function

$[0,2\pi]\to{\mathbf R}^2, \quad t\mapsto {\cos(t)\choose \sin(t)}+c_1{\cos(f_1t)\choose \sin(f_1t)}+c_2{\cos(f_2t)\choose \sin(f_2t)}$

This example shows the seamless integration of JSXGraph into the web page.

Variation:

### External references

Epicycloidal curves have been used by the ancient greeks to describe the orbits of the planets, see

More on epicycloidal curves:

### The source code of this construction

The main difficulty is to read the values of the sliders. This is done via four JavaScript variables $c1, c2, f1, f2$.

<div style="margin:5px">
<p>
<label for="c1">c1:</label>
<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
min="0" max="100" value="60"
oninput="c1 = this.value*0.01; board.update();"
/>
<label for="f1">f1:</label>
<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
min="1" max="100" value="7"
oninput="f1 = this.value; board.update();"
/>
<label for="c2">c2:</label>
<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"
min="0" max="100" value="0"
oninput="c2 = this.value*0.01;
board.updateQuality = board.BOARD_QUALITY_HIGH;
board.update();"
/>
<label for="f2">f2:</label>
<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
min="1" max="100" value="17"
oninput="f2 = this.value; board.update();"
/>
</p>
</div>

<jsxgraph width="500" height="500" box="jxgbox">
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2.5,2.5,2.5,-2.5], keepaspectratio:true});
var c1 = 0.6;
var c2 = 0.0;
var f1 = 7;
var f2 = 17;
var c = board.create('curve', [
function(t) { return Math.cos(t)+ c1*Math.cos(f1*t)+ c2*Math.cos(f2*t);},
function(t) { return Math.sin(t)+ c1*Math.sin(f1*t)+ c2*Math.sin(f2*t);},
0,2.02*Math.PI], {strokeWidth:2});
</jsxgraph>