Knots from circle pathes - Revision history

A WASSERMANN at 12:13, 23 June 2020

2020-06-23T12:13:07Z

← Older revision		Revision as of 12:13, 23 June 2020
Line 9:		Line 9:
	<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
	min="0" max="100" value="60"		min="0" max="100" value="60"
	oninput="c1 = this.value*0.01;		oninput="c1 = this.value*0.01; board.update();"
	board.update();"
	/>		/>
	<label for="f1">f1:</label>		<label for="f1">f1:</label>
	<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
	min="1" max="100" value="7"		min="1" max="100" value="7"
	oninput="f1 = this.value;		oninput="f1 = this.value; board.update();"
	~~board.updateQuality = board.BOARD_QUALITY_HIGH;~~
	board.update();"
	/>		/>
	<label for="c2">c2:</label>		<label for="c2">c2:</label>
Line 29:		Line 26:
	<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
	min="1" max="100" value="17"		min="1" max="100" value="17"
	oninput="f2 = this.value;		oninput="f2 = this.value; board.update();"
	~~board.updateQuality = board.BOARD_QUALITY_HIGH;~~
	board.update();"
	/>		/>
	</p>		</p>
Line 88:		Line 83:
	The main difficulty is to read the values of the sliders.		The main difficulty is to read the values of the sliders.
	This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.		This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.

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

A WASSERMANN at 12:12, 23 June 2020

2020-06-23T12:12:04Z

← Older revision		Revision as of 12:12, 23 June 2020
Line 10:		Line 10:
	min="0" max="100" value="60"		min="0" max="100" value="60"
	oninput="c1 = this.value*0.01;		oninput="c1 = this.value*0.01;
	~~board.updateQuality = board.BOARD_QUALITY_HIGH;~~
	board.update();"		board.update();"
	/>		/>

A WASSERMANN at 12:11, 23 June 2020

2020-06-23T12:11:22Z

@@ Line 86: / Line 86: @@
 ===The source code of this construction===
-This is the first experiment with the jQuery UI package. So, the code may not be optimized, yet. The main difficulty is to read the values of the sliders. This is done via four JavaScript variables <math>c1, c2, f1, f2</math>.
 <source lang="html4strict">
-<html>
+<div style="margin:5px">
    <p>
      <label for="c1">c1:</label>
-     <input type="text" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />
+     <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
      <label for="f1">f1:</label>
-     <input type="text" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />
+     <input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
      <label for="c2">c2:</label>
-     <input type="text" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
+     <input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"
      <label for="f2">f2:</label>
-     <input type="text" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />
+     <input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
    </p>
 </div>
-</html>
 <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 cw = 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);},
-,2.02*Math.PI],{strokeWidth:6, strokeColor: 'blue', shadow: true});
+,2.02*Math.PI], {strokeWidth:4, strokeColor: 'blue', shadow: true});
 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);},
-,2.02*Math.PI],{strokeWidth:2, strokeColor: 'white'});
+,2.02*Math.PI], {strokeWidth:2, strokeColor: 'white'});
 </jsxgraph>
 </source>
 [[Category:Examples]]
 [[Category:Curves]]

A WASSERMANN at 12:05, 23 June 2020

2020-06-23T12:05:55Z

← Older revision		Revision as of 12:05, 23 June 2020
Line 16:		Line 16:
	<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
	min="1" max="100" value="7"		min="1" max="100" value="7"
	~~onchange~~="f1 = this.value;		oninput="f1 = this.value;
	board.updateQuality = board.BOARD_QUALITY_HIGH;		board.updateQuality = board.BOARD_QUALITY_HIGH;
	board.update();"		board.update();"
Line 23:		Line 23:
	<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"
	min="0" max="100" value="0"		min="0" max="100" value="0"
	~~onchange~~="c2 = this.value*0.01;		oninput="c2 = this.value*0.01;
	board.updateQuality = board.BOARD_QUALITY_HIGH;		board.updateQuality = board.BOARD_QUALITY_HIGH;
	board.update();"		board.update();"
Line 30:		Line 30:
	<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"		<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
	min="1" max="100" value="17"		min="1" max="100" value="17"
	~~onchange~~="f2 = this.value;		oninput="f2 = this.value;
	board.updateQuality = board.BOARD_QUALITY_HIGH;		board.updateQuality = board.BOARD_QUALITY_HIGH;
	board.update();"		board.update();"
Line 47:		Line 47:
	function(t) { return Math.cos(t)+ c1Math.cos(f1t)+ c2Math.cos(f2t);},		function(t) { return Math.cos(t)+ c1Math.cos(f1t)+ c2Math.cos(f2t);},
	function(t) { return Math.sin(t)+ c1Math.sin(f1t)+ c2Math.sin(f2t);},		function(t) { return Math.sin(t)+ c1Math.sin(f1t)+ c2Math.sin(f2t);},
	0,2.02*Math.PI],{strokeWidth:6, strokeColor: 'blue', shadow: true});		0,2.02*Math.PI], {strokeWidth:4, strokeColor: 'blue', shadow: true});

	var c = board.create('curve', [		var c = board.create('curve', [

A WASSERMANN at 12:05, 23 June 2020

2020-06-23T12:05:04Z

@@ Line 4: / Line 4: @@
 <html>
 <div style="margin:5px">
    <p>
@@ Line 58: / Line 9: @@
      <input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
          min="0" max="100" value="60"
-         onchange="c1 = this.value*0.01;
+         oninput="c1 = this.value*0.01;
                    board.updateQuality = board.BOARD_QUALITY_HIGH;
                    board.update();"
@@ Line 84: / Line 35: @@
      />
    </p>
 </div>
 </html>

A WASSERMANN at 12:03, 23 June 2020

2020-06-23T12:03:27Z

← Older revision		Revision as of 12:03, 23 June 2020
Line 56:		Line 56:
	<p>		<p>
	<label for="c1">c1:</label>		<label for="c1">c1:</label>
	<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="60" onchange="		<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;"
	c1 = this.value*0.01;		min="0" max="100" value="60"
	board.updateQuality = board.BOARD_QUALITY_HIGH;		onchange="c1 = this.value*0.01;
	board.update();" />		board.updateQuality = board.BOARD_QUALITY_HIGH;
			board.update();"
			/>
	<label for="f1">f1:</label>		<label for="f1">f1:</label>
	<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="7"/>		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;"
			min="1" max="100" value="7"
			onchange="f1 = this.value;
			board.updateQuality = board.BOARD_QUALITY_HIGH;
			board.update();"
			/>
	<label for="c2">c2:</label>		<label for="c2">c2:</label>
	<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="0"/>		<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;"
			min="0" max="100" value="0"
			onchange="c2 = this.value*0.01;
			board.updateQuality = board.BOARD_QUALITY_HIGH;
			board.update();"
			/>
	<label for="f2">f2:</label>		<label for="f2">f2:</label>
	<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="17"/>		<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;"
			min="1" max="100" value="17"
			onchange="f2 = this.value;
			board.updateQuality = board.BOARD_QUALITY_HIGH;
			board.update();"
			/>
	</p>		</p>
	<div id="sliderc1" style="width:300px;margin:10px;"></div>		<div id="sliderc1" style="width:300px; margin:10px;"></div>
	<div id="sliderf1" style="width:300px;margin:10px;"></div>		<div id="sliderf1" style="width:300px; margin:10px;"></div>
	<div id="sliderc2" style="width:300px;margin:10px;"></div>		<div id="sliderc2" style="width:300px; margin:10px;"></div>
	<div id="sliderf2" style="width:300px;margin:10px;"></div>		<div id="sliderf2" style="width:300px; margin:10px;"></div>
	</div>		</div>
	</html>		</html>

A WASSERMANN at 11:59, 23 June 2020

2020-06-23T11:59:53Z

← Older revision		Revision as of 11:59, 23 June 2020
Line 56:		Line 56:
	<p>		<p>
	<label for="c1">c1:</label>		<label for="c1">c1:</label>
	<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="60" />		<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="60" onchange="
			c1 = this.value*0.01;
			board.updateQuality = board.BOARD_QUALITY_HIGH;
			board.update();" />
	<label for="f1">f1:</label>		<label for="f1">f1:</label>
	<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="7"/>		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="7"/>

A WASSERMANN at 11:57, 23 June 2020

2020-06-23T11:57:17Z

← Older revision		Revision as of 11:57, 23 June 2020
Line 56:		Line 56:
	<p>		<p>
	<label for="c1">c1:</label>		<label for="c1">c1:</label>
	<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="60" />
	<label for="f1">f1:</label>		<label for="f1">f1:</label>
	<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="7"/>
	<label for="c2">c2:</label>		<label for="c2">c2:</label>
	<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" min="0" max="100" value="0"/>
	<label for="f2">f2:</label>		<label for="f2">f2:</label>
	<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" min="1" max="100" value="17"/>
	</p>		</p>
	<div id="sliderc1" style="width:300px;margin:10px;"></div>		<div id="sliderc1" style="width:300px;margin:10px;"></div>

A WASSERMANN at 11:54, 23 June 2020

2020-06-23T11:54:52Z

← Older revision		Revision as of 11:54, 23 June 2020
Line 1:		Line 1:
	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		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
	:<math> [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)}</math>		:<math> [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)}</math>
	~~The sliders to adjust the parameters of this curve are from the jQuery UI package, see [http://jqueryui.com http://jqueryui.com].~~ This example shows the seamless integration of JSXGraph into the web page.		This example shows the seamless integration of JSXGraph into the web page.

	<html>		<html>
	~~<link rel="Stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/css/ui-lightness/jquery-ui-1.7.2.custom.css"/>~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery.min.js"></script>~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jquery-ui.min.js"></script>~~

	<style type="text/css">		<style type="text/css">
	#slider-frame > div.sliders { padding: 10px !important; };		#slider-frame > div.sliders { padding: 10px !important; };
Line 57:		Line 53:
	</script>		</script>

	<div ~~class="sliders"~~ style="margin:5px">		<div style="margin:5px">
	<p>		<p>
	<label for="c1">c1:</label>		<label for="c1">c1:</label>
	<input type="~~text~~" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="c1" style="border:0; color:#f6931f; font-weight:bold;" />
	<label for="f1">f1:</label>		<label for="f1">f1:</label>
	<input type="~~text~~" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="f1" style="border:0; color:#f6931f; font-weight:bold;" />
	<label for="c2">c2:</label>		<label for="c2">c2:</label>
	<input type="~~text~~" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="c2" style="border:0; color:#f6931f; font-weight:bold;" />
	<label for="f2">f2:</label>		<label for="f2">f2:</label>
	<input type="~~text~~" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />		<input type="range" id="f2" style="border:0; color:#f6931f; font-weight:bold;" />
	</p>		</p>
	<div id="sliderc1" style="width:300px;margin:10px;"></div>		<div id="sliderc1" style="width:300px;margin:10px;"></div>

A WASSERMANN at 13:26, 14 September 2015

2015-09-14T13:26:38Z

← Older revision		Revision as of 13:26, 14 September 2015
Line 100:		Line 100:
	svgRoot.setAttribute("height", board.canvasHeight);		svgRoot.setAttribute("height", board.canvasHeight);
	svg = new XMLSerializer().serializeToString(svgRoot);		svg = new XMLSerializer().serializeToString(svgRoot);
	document.getElementById('svgout').value = svg;		document.getElementById('svgout').value = svg.replace(/>/g, '>\n');
	}		}
	</jsxgraph>		</jsxgraph>