-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvortex.html
51 lines (43 loc) · 1.89 KB
/
vortex.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
<html>
<script>
function makePicture() {
const mod = document.getElementById('mod').value;
const mult = document.getElementById('mult').value;
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
canvas.width = document.getElementById('canvasWrapper').getBoundingClientRect()['width'];
canvas.height = document.getElementById('canvasWrapper').getBoundingClientRect()['height'];
context.clearRect(0, 0, canvas.width, canvas.height);
const radius = Math.min(canvas.width, canvas.height) / 2;
//console.log(radius);
//console.log(canvas.width);
//console.log(canvas.height);
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
context.stroke()
for (let i = 0; i < mod; i++) {
context.beginPath();
context.moveTo(canvas.width/2 + Math.sin(i*2*Math.PI/mod)*radius, canvas.height/2 - Math.cos(i*2*Math.PI/mod)*radius);
context.lineTo(canvas.width/2 + Math.sin(mult*i*2*Math.PI/mod)*radius, canvas.height/2 - Math.cos(mult*i*2*Math.PI/mod)*radius);
context.stroke();
context.beginPath();
context.arc(canvas.width/2 + Math.sin(i*2*Math.PI/mod)*radius, canvas.height/2 - Math.cos(i*2*Math.PI/mod)*radius, 2, 0, 2*Math.PI);
context.fill();
}
}
</script>
<body>
<div>
<form>
<label for="mod">Modulus</label>
<input type="number" id="mod" name="mod" value="9">
<label for="mult">Multiplier</label>
<input type="number" id="mult" name="mult" value="2">
<input type="button" value="Draw" onclick="makePicture()">
</form>
</div>
<div id="canvasWrapper" style="width:90vw; height:90vh">
<canvas id="myCanvas"></canvas>
</div>
</body>
</html>