mirror of
https://github.com/SamEyeBam/animate.git
synced 2026-02-04 01:14:15 +00:00
75 lines
3.3 KiB
HTML
75 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!-- ahhh -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<head>
|
|
<title>mathfunk</title>
|
|
<link rel="stylesheet" href="./css/styles.css">
|
|
</head>
|
|
|
|
<body style="margin:0;">
|
|
<canvas id="myCanvas" style="display: block;box-sizing: border-box;"></canvas>
|
|
<div id="toolbar">
|
|
<!-- Shape layers -->
|
|
<div id="layers-container"></div>
|
|
<br>
|
|
<p>Controls:</p>
|
|
<p>
|
|
Press "Space" to pause and start the animation
|
|
</p>
|
|
<p>
|
|
Press "P" to show/hide the control panel
|
|
</p>
|
|
<br>
|
|
<p>Speed</p>
|
|
<input type="text" id="inputDegPerSec" value="10" onchange="ChangeDegPerSec(this.value)">
|
|
<br>
|
|
<p>Controls</p>
|
|
<div class="controls">
|
|
<button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
|
|
<button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
|
|
<button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
|
|
</div>
|
|
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
|
|
</div>
|
|
<div>
|
|
<button onclick="manualToggleSettings()" class="button">Show/hide</button>
|
|
</div>
|
|
</body>
|
|
<!-- Utilities (must load first - used by everything) -->
|
|
<script src="./js/utils/helpers.js" type="text/javascript"></script>
|
|
<script src="./js/math.js" type="text/javascript"></script>
|
|
|
|
<!-- Core modules -->
|
|
<script src="./js/core/ShapeRegistry.js" type="text/javascript"></script>
|
|
<script src="./js/core/AnimationEngine.js" type="text/javascript"></script>
|
|
<script src="./js/core/Scene.js" type="text/javascript"></script>
|
|
<script src="./js/core/BaseShape.js" type="text/javascript"></script>
|
|
|
|
<!-- Control system -->
|
|
<script src="./js/controls/FilterManager.js" type="text/javascript"></script>
|
|
<script src="./js/controls/ControlFactory.js" type="text/javascript"></script>
|
|
<script src="./js/controls/ControlManager.js" type="text/javascript"></script>
|
|
<script src="./js/presets.js" type="text/javascript"></script>
|
|
<script src="./js/controls/SceneUI.js" type="text/javascript"></script>
|
|
|
|
<!-- Shape definitions -->
|
|
<script src="./js/shapes/PolyTwistColourWidth.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/FloralPhyllo.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/Spiral1.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/FloralAccident.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/FloralPhyllo_Accident.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/Nodal_expanding.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/Phyllotaxis.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/SquareTwist_angle.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/CircleExpand.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/EyePrototype.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/MaryFace.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/NewWave.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/Countdown.js" type="text/javascript"></script>
|
|
<script src="./js/shapes/RaysInShape.js" type="text/javascript"></script>
|
|
|
|
<!-- Main application -->
|
|
<script src="./js/index.js" type="text/javascript"></script>
|
|
|
|
</html> |