-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (75 loc) · 3.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="icon"
href="./favicon.ico">
<title>RoundArt</title>
<script src="./Two.js"></script>
</head>
<body>
<div class="content">
<h1>RoundArt</h1>
<button class="collapsible">About</button>
<div class="dropdown-content">
<p align="justify">
In this app, we will be making art with a circle and lines. Picture a
clock, with numbers from 1 to 12. If we draw a line from each number
to two times of the previous number (e.g. 1 joins to 2, 2 joins to 4
and so on, using modular arithmetic for larger numbers), it would look
something like this:
<div id="sample"></div>
The shape looks interesting. But what if we add more points instead of just 12? And what if we use different multiples to determine which points should be joined? Can we use fractions? What patterns can we create? The sandbox is all yours. (Hint: use the arrow keys for finer control of the sliders!)</p>
<p>Made by Ivan Wong. Inspired by CS1101S. <br>2D Graphics Library: <a href="https://two.js.org/">Two.js</a><br>View the source code on <a href="https://github.com/wpinrui/roundArt">GitHub</a>.<hr></p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<div id="draw-shapes"></div>
<label id="num-points-label">Number of points: 20</label>
<input type="range" min="0" max="250" value="20" step="2" class="slider" id="num-points">
<div style="margin-bottom: 1em;"></div>
<label id="num-lines-label">Number of lines: 20</label>
<input type="range" min="0" max="20" value="20" step="1" class="slider" id="num-lines">
<div style="margin-bottom: 1em;"></div>
<label id="multiplier-label">Multiplier: 2</label>
<input type="range" min="0.5" max="1000" value="2" step="0.5" class="slider" id="multiplier">
<div style="margin-bottom: 1em;"></div>
<label for="colors">Choose a colour:</label>
<select name="colors" id="colors" onchange="handleColor()">
<option value="black">Black</option>
<option value="#b60000">Red</option>
<option value="#ff6c00">Orange</option>
<option value="#f4c229">Yellow</option>
<option value="#46b52d">Green</option>
<option value="#1339b5">Blue</option>
<option value="#3213b5">Indigo</option>
<option value="#8b26ac">Violet</option>
</select>
<script src="./scripts.js"></script>
<div style="margin-bottom: 1em;"></div>
<button onclick="downloadSVG()">Download</button>
</div>
</body>
</html>