DFT/index.html at main · code4fukui/DFT · GitHub

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
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>DFT 離散フーリエ変換 / 逆離散フーリエ変換 in JavaScript</title>
</head><body>
<h1>DFT 離散フーリエ変換 / 逆離散フーリエ変換 in JavaScript</h1>
<input type=range id=n1 min=1 max=1000 value=256><br>
<div id=chart1></div>
<input type=range id=f1 min=100 max=24000 value=4400><br>
<input type=range id=ph1 min=0 max=1 step=0.01 value=0><br>
<input type=range id=amp1 min=0 max=1 step=0.01 value=1><br>
<input type=range id=f2 min=100 max=24000 value=2200><br>
<input type=range id=ph2 min=0 max=1 step=0.01 value=0><br>
<input type=range id=amp2 min=0 max=1 step=0.01 value=0><br>
<div id=chart2></div>
<label><input type=checkbox id=chkresetim>reset im</label>
<div id=chart3></div>

<script type="module">
import { dft, idft, makeLen } from "./DFT.js";
import { initC3 } from "https://code4fukui.github.io/c3-es/c3-es.js";
const c3 = initC3(window);

const showChart = (bindto, data, data2, data3) => {
  const columns = [["data", ... data]];
  if (data2) {
    columns.push(["data2", ...data2]);
  }
  if (data3) {
    columns.push(["data3", ...data3]);
  }
  const chart = c3.generate({
    bindto,
    data: {
      columns,
    },
    axis: {
    },
    zoom: {
      enabled: true,
    },
    legend: {
      hide: true,
    }
  });
};

const makeSine = (n, f1, ph1, amp1, f2, ph2, amp2) => {
  const res = [];
  const fs = 48000;
  for (let i = 0; i < n; i++) {
    const th1 = i / fs * f1 + ph1 * Math.PI * 2;
    const th2 = i / fs * f2 + ph2 * Math.PI * 2;
    res[i] = Math.sin(th1) * amp1 + Math.sin(th2) * amp2;
  }
  return res;
};

const show = () => {
  const data = makeSine(n1.value, f1.value, ph1.value, amp1.value, f2.value, ph2.value, amp2.value);
  showChart("#chart1", data);

  const data2 = dft(data);
  if (chkresetim.checked) {
    for (let i = 0; i < data2[1].length; i++) {
      data2[1][i] = 0;
    }
  }
  showChart("#chart2", data2[0], data2[1], makeLen(data2[0], data2[1]));

  const data3 = idft(data2[0], data2[1]);
  //showChart("#chart3", data3[0], data3[1]);
  showChart("#chart3", data3);
};

show();
for (const inp of [n1, f1, ph1, amp1, f2, ph2, amp2, chkresetim]) {
  inp.oninput = () => show();
}

</script>

<style>
input[type=range] {
  width: 100%;
}
.c3 {
  height: 23vh;
}
</style>

<hr>
<a href=https://github.com/code4fukui/DFT/>src on GitHub</a>