dsp-website/index.html at main · onebyte0x00/dsp-website · 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
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Signal Processing Guide</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.6.0/math.min.js"></script>
</head>
<body>
    <header>
        <h1>Digital Signal Processing</h1>
        <p>Interactive visualizations of Basicc DSP concepts</p>
    </header>

    <nav>
        <ul>
            <li><a href="#waveforms">Waveforms</a></li>
            <li><a href="#fourier">Fourier Transform</a></li>
            <li><a href="#filters">Filters</a></li>
            <li><a href="#resources">Resources</a></li>
        </ul>
    </nav>

    <main>
        <section id="waveforms">
            <h2>Basic Waveforms</h2>
            <div class="controls">
                <label>Waveform Type:
                    <select id="waveType">
                        <option value="sine">Sine</option>
                        <option value="square">Square</option>
                        <option value="sawtooth">Sawtooth</option>
                        <option value="triangle">Triangle</option>
                    </select>
                </label>
                <label>Frequency (Hz): <input type="range" id="frequency" min="1" max="20" value="5" step="0.1"></label>
                <span id="freqValue">5</span> Hz
                <label>Amplitude: <input type="range" id="amplitude" min="0.1" max="1" value="0.8" step="0.1"></label>
                <span id="ampValue">0.8</span>
            </div>
            <canvas id="waveformChart"></canvas>
        </section>

        <section id="fourier">
            <h2>Fourier Transform</h2>
            <div class="controls">
                <label>Signal Composition:
                    <input type="text" id="signalInput" value="sin(x) + 0.5*sin(3*x)" placeholder="e.g., sin(x) + 0.3*sin(5*x)">
                </label>
                <button id="updateFourier">Update</button>
            </div>
            <div class="chart-container">
                <div>
                    <h3>Time Domain</h3>
                    <canvas id="timeDomainChart"></canvas>
                </div>
                <div>
                    <h3>Frequency Domain</h3>
                    <canvas id="freqDomainChart"></canvas>
                </div>
            </div>
        </section>

        <section id="filters">
            <h2>Digital Filters</h2>
            <div class="controls">
                <label>Filter Type:
                    <select id="filterType">
                        <option value="lowpass">Low Pass</option>
                        <option value="highpass">High Pass</option>
                        <option value="bandpass">Band Pass</option>
                    </select>
                </label>
                <label>Cutoff Frequency: <input type="range" id="cutoffFreq" min="1" max="10" value="3"></label>
                <span id="cutoffValue">3</span> Hz
            </div>
            <canvas id="filterChart"></canvas>
        </section>

        <section id="resources">
            <h2>DSP Resources</h2>
            <ul>
                <li><a href="https://www.dspguide.com/" target="_blank">The Scientist and Engineer's Guide to DSP</a></li>
                <li><a href="https://ccrma.stanford.edu/~jos/" target="_blank">Julius Smith's DSP Resources</a></li>
                <li><a href="https://www.analog.com/en/education/education-library/software-tools.html" target="_blank">ADI DSP Tools</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <p>Created for GitHub Pages | DSP Education Project</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>