-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathindex.html
87 lines (83 loc) · 3.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en" class="h-full w-full">
<head>
<title>0x08 : 2D Animations (Project)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<body class="h-full w-full text-sm">
<div class="container flex flex-col nowrap gap-2
p-8 h-full m-auto">
<header class="flex flex-col md:flex-row justify-between md:items-end">
<h1 class="flex-none text-2xl font-bold">0x08 :
2D Animations (Project)</h1>
<p class="md:text-right text-xs md:text-sm" id="by"></p>
</header>
<div class="flex-1 flex flex-col lg:flex-row
gap-4 lg:gap-8">
<main class="experiment flex-1 flex flex-col gap-2">
<div class="flex-1 relative">
<canvas id="myCanvas"
width="10" height="1"
class=" bg-slate-100 w-full h-full"></canvas>
<div class="absolute top-0 right-0 text-center">
<a class="cursor-pointer block p-2
text-blue-300 hover:text-blue-500
active:text-blue-700"
href="javascript:saveCanvas()"
title="Download canvas as image."
><ion-icon
name="save"
class="text-3xl"
></ion-icon><br/>
<span class="text-sm">Download</span></a>
</div> </div>
</main>
<aside class="flex-none flex flex-col gap-2
lg:max-w-sm min-h-52"
id="side-note">
<h2 class="text-lg font-bold">Simple
<a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame"
><code>requestAnimationFrame</code></a></h2>
<p>The value updated by <code>stepperOne</code>
is:</p>
<pre class="text-xs"><code id="valueFromStepperOne"></code></pre>
<div class="hidden">
<h2 class="text-lg font-bold">Normalising speed in
a <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame"
><code>rAF</code> callback</a></h2>
<p>The returned numberline will be of the same
scale, irrespective of refresh
rate <code>requestAnimationFrame</code></p>
<p>The value updated by <code>stepperTwo</code>
is:</p>
<pre><code id="valueFromStepperTwo"></code></pre>
</div>
<div class="hidden">
<h3>Using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes"
>Javascript <code>class</code></a></h3>
<p>The value updated by <code>stepperThree</code>
is:</p>
<pre><code id="valueFromStepperThree"></code></pre>
</div>
</aside>
</div>
</div>
<script type="text/javascript"
src="./canvas-helpers.js"></script>
<script type="text/javascript"
src="./steppers.js"></script>
<script type="text/javascript"
src="./domel.js"></script>
<script type="text/javascript"
src="./clock.js"></script>
<script type="text/javascript"
src="./experiment.js"></script>
<script type="text/javascript"
src="./main.js"></script>
<script type="text/javascript">
main()
</script>
</body>
</html>