Add wavelength
This commit is contained in:
parent
d3e17719c5
commit
acc1e40a09
2 changed files with 15 additions and 7 deletions
|
@ -32,7 +32,8 @@ const calculateNote = (root: number, frequency: number) => {
|
||||||
const semis = Math.round(distanceFromA);
|
const semis = Math.round(distanceFromA);
|
||||||
const cents = Math.round((distanceFromA - semis) * 100);
|
const cents = Math.round((distanceFromA - semis) * 100);
|
||||||
let octave = 4 + Math.floor(semis / 12);
|
let octave = 4 + Math.floor(semis / 12);
|
||||||
if (semis % 12 >= 3) octave += 1;
|
const octaveBoundSemis = ((semis % 12) + 12) % 12;
|
||||||
|
if (octaveBoundSemis >= 3) octave += 1;
|
||||||
const notes = [
|
const notes = [
|
||||||
"A",
|
"A",
|
||||||
"A#",
|
"A#",
|
||||||
|
@ -47,7 +48,7 @@ const calculateNote = (root: number, frequency: number) => {
|
||||||
"G",
|
"G",
|
||||||
"G#",
|
"G#",
|
||||||
];
|
];
|
||||||
const note = notes[semis % 12];
|
const note = notes[octaveBoundSemis];
|
||||||
|
|
||||||
let centsStr = "";
|
let centsStr = "";
|
||||||
if (cents <= -1) {
|
if (cents <= -1) {
|
||||||
|
@ -65,7 +66,7 @@ export default function Main() {
|
||||||
const [frequency, setFrequency] = useState("523.251");
|
const [frequency, setFrequency] = useState("523.251");
|
||||||
|
|
||||||
const setRootValue: ChangeEventHandler<HTMLInputElement> = (e) => {
|
const setRootValue: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||||
const newRoot = parseInt(e.target.value);
|
const newRoot = parseFloat(e.target.value);
|
||||||
if (!isNaN(newRoot)) setRoot(newRoot);
|
if (!isNaN(newRoot)) setRoot(newRoot);
|
||||||
const frequency = calculateFrequency(newRoot, note);
|
const frequency = calculateFrequency(newRoot, note);
|
||||||
if (frequency != null) setFrequency(frequency.toFixed(3));
|
if (frequency != null) setFrequency(frequency.toFixed(3));
|
||||||
|
@ -102,7 +103,7 @@ export default function Main() {
|
||||||
{"if A4 is "}
|
{"if A4 is "}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
pattern="\d+"
|
pattern="\d+(\.\d+)"
|
||||||
value={root}
|
value={root}
|
||||||
placeholder="440"
|
placeholder="440"
|
||||||
onChange={setRootValue}
|
onChange={setRootValue}
|
||||||
|
@ -112,7 +113,6 @@ export default function Main() {
|
||||||
<section>
|
<section>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
pattern=""
|
|
||||||
value={note}
|
value={note}
|
||||||
placeholder="C5"
|
placeholder="C5"
|
||||||
onChange={setNoteValue}
|
onChange={setNoteValue}
|
||||||
|
@ -120,12 +120,15 @@ export default function Main() {
|
||||||
{" is "}
|
{" is "}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
pattern="\d+"
|
pattern="\d+(\.\d+)"
|
||||||
value={frequency}
|
value={frequency}
|
||||||
placeholder="523.251"
|
placeholder="523.251"
|
||||||
onChange={setFrequencyValue}
|
onChange={setFrequencyValue}
|
||||||
/>
|
/>
|
||||||
{" Hz"}
|
{" Hz "}
|
||||||
|
<aside>
|
||||||
|
(wavelength: {(1000 / parseFloat(frequency)).toFixed(4)} ms)
|
||||||
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -48,3 +48,8 @@ input[type="text"] {
|
||||||
input[type="text"]:focus {
|
input[type="text"]:focus {
|
||||||
border-color: rgb(141, 255, 208);
|
border-color: rgb(141, 255, 208);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue