Skip to content

Commit 9ac1ffc

Browse files
epsaulepsaul
authored
Create primitive-vco.html
Initial VCO page
1 parent 2a44005 commit 9ac1ffc

File tree

1 file changed

+114
-0
lines changed

1 file changed

+114
-0
lines changed

‎primers/primitive-vco.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Primitive VCO · EasySynth</title>
7+
<link rel="stylesheet" href="/styles/main.css" />
8+
<style>
9+
.slider-container {
10+
margin-top: 1em;
11+
}
12+
#waveform path {
13+
transition: d 0.3s ease;
14+
}
15+
.readout {
16+
font-family: monospace;
17+
margin-top: 0.5em;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<section id="primitive-vco" class="primer">
23+
<header>
24+
<h1>Primitive VCO</h1>
25+
<p class="subtitle">Voltage as Rhythm, Transistors as Timekeepers</p>
26+
</header>
27+
28+
<article>
29+
<section class="intro">
30+
<p>This module explores how a classic transistor flip-flop can be transformed into a voltage-controlled oscillator. No ICs — just analog logic sculpted into sound.</p>
31+
</section>
32+
33+
<section class="components">
34+
<h2>Core Circuit Elements</h2>
35+
<ul>
36+
<li>2 × NPN Transistors (e.g. 2N3904)</li>
37+
<li>2 × Capacitors (10µF electrolytic)</li>
38+
<li>4–6 × Resistors (fixed + voltage-controlled)</li>
39+
<li>1 × Control Voltage Input (0–5V or 0–9V)</li>
40+
<li>Optional: RC filter for waveform shaping</li>
41+
</ul>
42+
</section>
43+
44+
<details open>
45+
<summary><h2>How It Works</h2></summary>
46+
<ol>
47+
<li>Transistors toggle via capacitor-coupled feedback</li>
48+
<li>Capacitor charge time sets oscillation frequency</li>
49+
<li>Control voltage modulates resistance in RC path</li>
50+
<li>Output: square wave or filtered triangle-like wave</li>
51+
</ol>
52+
</details>
53+
54+
<details>
55+
<summary><h2>Circuit Variations</h2></summary>
56+
<ul>
57+
<li>JFET as voltage-controlled resistor</li>
58+
<li>LED indicators on transistor collectors</li>
59+
<li>RC filter for smoother waveform</li>
60+
</ul>
61+
</details>
62+
63+
<details open>
64+
<summary><h2>Visual Index</h2></summary>
65+
<p>Interactive diagram: voltage slider → waveform preview → frequency readout</p>
66+
67+
<div class="slider-container">
68+
<label for="voltage">Control Voltage (V):</label>
69+
<input type="range" id="voltage" min="0" max="9" step="0.1" value="5" />
70+
<div class="readout">Frequency: <span id="freq">500</span> Hz</div>
71+
</div>
72+
73+
<svg id="waveform" width="300" height="200" viewBox="0 0 300 200">
74+
<path id="wave" d="M10 150 L50 100 L90 150 L130 100 L170 150" stroke="black" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
75+
<text x="10" y="180" font-size="12">Time →</text>
76+
<text x="5" y="20" font-size="12" transform="rotate(-90 5,20)">Voltage</text>
77+
</svg>
78+
</details>
79+
80+
<section class="philosophy">
81+
<h2>Philosophical Footnote</h2>
82+
<p>From binary logic comes rhythm, and from rhythm comes tone. Even the simplest components — when arranged with care — can sing.</p>
83+
</section>
84+
</article>
85+
86+
<footer>
87+
<p>© 2025 Edward Saul · Form follows function, but meaning follows form</p>
88+
</footer>
89+
</section>
90+
91+
<script>
92+
const slider = document.getElementById('voltage');
93+
const freqDisplay = document.getElementById('freq');
94+
const wave = document.getElementById('wave');
95+
96+
function updateWaveform(voltage) {
97+
const freq = Math.round(voltage * 100);
98+
freqDisplay.textContent = freq;
99+
100+
const baseY = 150;
101+
const peakY = baseY - voltage * 10;
102+
const path = `M10 ${baseY} L50 ${peakY} L90 ${baseY} L130 ${peakY} L170 ${baseY}`;
103+
wave.setAttribute('d', path);
104+
}
105+
106+
slider.addEventListener('input', () => {
107+
const voltage = parseFloat(slider.value);
108+
updateWaveform(voltage);
109+
});
110+
111+
updateWaveform(parseFloat(slider.value));
112+
</script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)