repl.it
@tristanbeedell/

sin-cosin-waves

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • index.css
  • index.js
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
<html>

<head>
<title>sin waves</title>
</head>

<body style="margin: 0px;">
  <canvas id="canvas" width="500" height="500"></canvas>
  <link rel="stylesheet" type="text/css" href="index.css">

  <div class="control">
    x=sin(i / detail / 
    <input type="number" id="nRange" value="100" min="1" max="1000">
     + 
    <label class="cb"><input type="checkbox" id="cbox1"><p id="cbox1label" class="label">time</p></label>
    )
 	 <br>
    y=cos(i / detail / 
    <input type="number" id="mRange" value="80" min="1" max="1000">
     + 
    <label class="cb"><input type="checkbox" id="cbox2" checked><p id="cbox2label" class="label">time</p></label>
    )
  </div>
  
  <div class="control">
		<label class="slider"><input type="range" id="speed" value="10" min="0" max="100"/><sup>speed</sup></label>
		<label class="slider"><input type="range" id="pointAmount" value="1000" min="5" max="5000"/><sup>points</sup></label>
		<label class="slider"><input type="range" id="pointSpacing" value="1" min="0.03" max="2" step="0.01"/><sup>detail</sup></label>
  </div>
  
  <p>
 	 (every ajacent value of i from 0 to [points] is conected by a line)
  </p>
  <br>
  <script src="index.js"></script>
</body>

</html>
result
console