-
Notifications
You must be signed in to change notification settings - Fork 0
/
cymaticssimulator_chladni.html
64 lines (64 loc) · 3.19 KB
/
cymaticssimulator_chladni.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Cymatics Simulator - Chladni</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="imgsrc/chladni_plate.png" type="image/x-icon">
<style>
body {font-family: "Lato", sans-serif;}
html, body {height: 100%; width: 100%; margin: 0; color: white; background: #191919; font-size: 14px;}
a {color: inherit; text-decoration: none;}
header {position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.4); border-radius: 5px; margin: 10px; padding: 10px; z-index: 2;}
h1 {font-size: 18px; margin-top: 0;}
#settings {display: flex; flex-direction: column;}
label {padding-top: 10px;}
input {margin: 5px 0;}
fieldset>input {width: 15vw; min-width: 200px;}
canvas {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100vw; max-height: 100vw;}
footer {position: fixed; top: 0; right: 0; margin: 10px; opacity: 0.7; font-size: 18px;}
footer:hover {opacity: 1;}
</style>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/p5"></script>
<script src="jssrc/chladni.js" type="text/javascript"></script>
</head>
<body>
<header>
<h1>Settings</h1>
<form id="settings">
<p>Attempt at simulating cymatic patterns on a chladni plate.</p>
<p>Inspired from <a style="color:yellow;" href="https://www.youtube.com/watch?v=Q3oItpVa9fs">this video.</a></p>
<p>Sound wave equation:
\[f(x) = a\sin(\pi nx) \sin(\pi my) + b\sin(\pi mx) \sin(\pi ny)\]
</p>
<fieldset>
<legend>frequency parameters:</legend>
<label for="mSlider">m</label>
<input name="mSlider" type="range" id="mSlider" min="1" max="16" step="1" value="8">
<br>
<label for="nSlider">n</label>
<input name="nSlider" type="range" id="nSlider" min="1" max="16" step="1" value="4">
<br>
<label for="aSlider">a</label>
<input name="aSlider" type="range" id="aSlider" min="-2" max="2" step="1" value="1">
<br>
<label for="bSlider">b</label>
<input name="bSlider" type="range" id="bSlider" min="-2" max="2" step="1" value="1">
</fieldset>
<label for="vSlider">vibration strength:</label>
<input name="vSlider" type="range" id="vSlider" min="0.01" max="0.1" step="0.01" value="0.02">
<label for="numSlider">number of particles:</label>
<input name="numSlider" type="range" id="numSlider" min="2000" max="20000" step="2000" value="20000">
</form>
</header>
<main id="sketch-container"></main>
<footer>
<a alt="More info" href="https://github.com/PettaBoy" target="_blank"><i class="fa fa-github hover-opacity"></i></a>
</footer>
</body>
</html>