-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (106 loc) · 3.57 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="./sketch.js"></script>
<link
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h2>🌈 Moving Colors</h2>
<p>
A automatic, smooth color changing canvas governed by semi-random bezier
curves and bilinear interpolation. <br />
Feel free to start by clicking "Play" and stop at anytime. You can also
change corner color setup when the animation is paused. Corner Color
changing will be disabled when animation is playing.
</p>
<a href="https://github.com/tianyimasf/color-gradients"
>View Source Code on GitHub</a
>
<div class="canvas-and-control-panel">
<div id="canvas"></div>
<div class="control_panel">
<div class="control_buttons">
<button
type="button"
class="btn btn-light control_play"
onclick="play()"
>
Play
</button>
<button
type="button"
class="btn btn-light control_stop"
onclick="stop()"
>
Stop
</button>
</div>
<div class="control_color_pickers">
<div class="color_picker">
<p class="color_picker_label">Top Left Corner Color:</p>
<input
type="color"
id="color_tl"
name="color_tl"
value="#ffadad"
/>
</div>
<div class="color_picker">
<p class="color_picker_label">Top Right Corner Color:</p>
<input
type="color"
id="color_tr"
name="color_tr"
value="#a0c4ff"
/>
</div>
<div class="color_picker">
<p class="color_picker_label">Bottom Left Corner Color:</p>
<input
type="color"
id="color_bl"
name="color_bl"
value="#9bf6ff"
/>
</div>
<div class="color_picker">
<p class="color_picker_label">Bottom Right Corner Color:</p>
<input
type="color"
id="color_br"
name="color_br"
value="#fdffb6"
/>
</div>
<div class="text-center">
<button
type="button"
class="btn btn-light btn-apply"
onclick="updateCornerColor()"
>
Apply
</button>
</div>
</div>
</div>
</div>
</main>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>