<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Spirograph</title>
	<script src="spirograph.js"/>
	<style type="text/css" media="screen">
		body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 80%; }
		input { width:40px; text-align: right; }
		#svgcontainer { float:left; position:relative; z-index:0; width:400px; height:400px; border:1px solid red; }
		div.parameters { position: relative; margin-left: 400px; padding: 10px; width:600px; }
		#logs { padding: 10px; border:1px solid red; }
		div.parameters p, #logs p { margin: 0; }
        div.drawings { display:none; }
	</style>
</head>
<body id="body">
	<h1>Un Spirograph en SVG/XHTML/JavaScript/DOM</h1>
	<p>Ceci est une implémentation des <a href="http://en.wikipedia.org/wiki/Hypotrochoid">Hypotrochoides</a>. Merci à <a href="http://waloo.homelinux.net/walog/index.php/2006/01/19/7-spirographe-svg">waloo</a> pour les conseils.</p>
	<div id="svgcontainer">
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
			viewBox="0 0 100 100"
			preserveAspectRatio="xMidYMid slice"
			style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"
			id="svg">
			<g stroke="green" id="paths">
				<path stroke="sienna" stroke-width="1" fill="none"
					d="M 40,90 Q 25,60 40,30 Q 45,20 40,10 Q 50,10 60,10 Q 55,20 60,30 Q 75,60 60,90 Z" />
				<line x1="0" y1="0" x2="100" y2="100" stroke-width="1"/>
			</g> 
		</svg>
	</div>
	<div class="parameters">
		<form>
			<h2>Roues</h2>
            <p><input type="text" id="a" value="9"/> a (diamètre de la roue extérieure)</p>
			<p><input type="text" id="b" value="6"/> b (diamètre de la roue intérieure) </p>
			<p><input type="text" id="h1" value="1"/> h1 (espace entre le centre de la roue intérieure et le premier trou)</p>
			<p><input type="text" id="h2" value="5"/> h2 (espace entre le centre de la roue intérieure et le dernier trou)</p>
			<p><input type="text" id="pas" value="0.5"/> pas (espace entre les trous)</p>
			<p><input type="text" id="n" value="2"/> n (nombre de tours de roue)</p>
            <h2>Ajustements</h2>
			<p><input type="text" id="p" value="25"/> p (nombre de traits par tour)</p>
			<p><input type="text" id="z" value="1"/> z (facteur de zoom)</p>
            <h2>Repetition</h2>
			<p><input type="text" id="nd" value="1"/> nd (nombre de décalages)</p>
			<p><input type="text" id="np" value="3"/> np (nombre de parties)</p>
			<p><button onclick="setTimeout('drawSpirograph()',0);">Dessine</button></p>
		</form>
        <div class="drawings" id="drawing1">
            <div class="a">9</div>
            <div class="b">6</div>
            <div class="h1">1</div>
            <div class="h2">5</div>
            <div class="pas">0.5</div>
            <div class="n">2</div>
            <div class="p">25</div>
            <div class="z">1</div>
            <div class="np">1</div>
            <div class="nd">3</div>
        </div>
    </div>
    <p><a href="mailto:fky@freesurf.fr">Fky</a></p>
	<div id="logs">
	</div>
</body>
</html>
