mirror of
https://github.com/SamEyeBam/animate.git
synced 2026-02-04 01:14:15 +00:00
72 lines
3.5 KiB
HTML
72 lines
3.5 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>
|
|
|
|
<!-- Playback controls - pinned to bottom -->
|
|
<div class="playback-controls">
|
|
<div class="speed-control">
|
|
<span class="speed-label">Speed: <span id="speedValue">1.0</span>x</span>
|
|
<input type="range" id="inputSpeed" min="-10" max="10" step="0.1" value="1" oninput="ChangeSpeed(this.value)">
|
|
</div>
|
|
<div class="controls">
|
|
<button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
|
|
<button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Pause</button>
|
|
<button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
|
|
</div>
|
|
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Timeline</button>
|
|
</div>
|
|
</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/SpiralWormhole.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.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/PhylloCone.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> |