Skip to content

Commit 7460ab6

Browse files
wolffeparkewolffeparke
committed
Second pass at delta modulation, added reconstruction panel/sound buttons, issues with css formatting of the sliders/buttons
1 parent f7b2caf commit 7460ab6

5 files changed

Lines changed: 199 additions & 26 deletions

File tree

‎delta-modulation/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<link rel="stylesheet" type="text/css" href="../tutorials/styles_tutorial.css" media="screen" />
4+
<link rel="stylesheet" type="text/css" href="styles_delta.css" media="screen" />
55
<!-- p5.js begin -->
66
<!-- 1) use p5.min.js for optimizing size/transfer -->
77
<script src="../p5.min.js"></script>
@@ -26,7 +26,7 @@
2626
</div>
2727
<div class="tabs">
2828
<button class="button_round" onclick="samplingSection(event, 'Question')" id="defaultOpen">Question</button>
29-
<button class="button_round" onclick="samplingSection(event, 'Answer')">Answer</button>
29+
3030
</div>
3131
</center>
3232
<div id = "content-wrap" class="title qs">
@@ -41,14 +41,15 @@ <H1>
4141
<script>
4242
const widgetset = new_widget(
4343
[ new deltaModPanel()
44+
, new reconstructedSigPanel()
4445
],
4546
[ new freqSlider()
4647
, new numHarmSlider()
4748
, new sampleRateDeltaSlider()
4849
, new deltaStepSlider()
4950
, new timeZoomSlider()
5051
]
51-
, ["original"]
52+
, ["original","recon","quant"]
5253
,"Question"
5354
,"qs"
5455
, 120

‎delta-modulation/panel_delta.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,12 +129,10 @@ function drawSignal(panel, signal)
129129

130130
function drawDeltaModulation(panel, signal) {
131131
let pixel_max = panel.plotHeight/2;
132-
let pixel_per_fullscale = pixel_max * panel.settings.ampZoom;
133132
panel.buffer.noFill();
134133
panel.buffer.beginShape();
135134
panel.buffer.curveTightness(1.0);
136135
let visibleSamples = Math.floor(panel.plotWidth / panel.settings.downsamplingFactor/panel.settings.timeZoom+1);
137-
console.log(visibleSamples);
138136
let ypos = panel.halfh;
139137
for (let x = 0; x < visibleSamples; x++) {
140138
let xpos = Math.round(panel.plotLeft + x * panel.settings.downsamplingFactor*panel.settings.timeZoom);

‎delta-modulation/styles_delta.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
body {
2+
font-family: Cantarell, sans-serif;
3+
line-height: 1.5;
4+
5+
}
6+
7+
canvas {
8+
width: 100% !important;
9+
height: 100% !important;
10+
text-align: center;
11+
}
12+
13+
sup { vertical-align: top; position: relative; top: -0.5em; }
14+
15+
footer{
16+
font-family: Cantarell, sans-serif;
17+
padding: 5px 10px 0px;
18+
background : lightgrey;
19+
bottom: 0;
20+
left: 0;
21+
font-size: 9pt;
22+
color: grey;
23+
text-align: center;
24+
}
25+
.tab_questions {
26+
overflow: hidden;
27+
border: 1px solid #ccc;
28+
background-color: #f1f1f1;
29+
}
30+
.tab_questions button {
31+
background-color: inherit;
32+
float: left;
33+
border: none;
34+
outline: none;
35+
cursor: pointer;
36+
padding: 0px 0px;
37+
transition: 0.3s;
38+
font-size: 0px;
39+
}
40+
.tab_questions_content {
41+
42+
display: none;
43+
padding: 0px 0px;
44+
border: 1px solid #ccc;
45+
border-top: none;
46+
}
47+
48+
.previous:hover {
49+
background-color: #ddd;
50+
color: black;
51+
}
52+
53+
.tabcontent {
54+
margin-left: 30px;
55+
margin-right: 50px;
56+
display: none;
57+
}
58+
.title{
59+
margin-left: 100px;
60+
}
61+
.intro_text{
62+
margin-left: 100px;
63+
}
64+
.button {
65+
text-decoration: none;
66+
position :relative;
67+
z-index: 0;
68+
display: inline-block;
69+
padding: 8px 16px;
70+
background-color: rgb(255, 255, 255);
71+
color: black;
72+
border: solid;
73+
margin-right: 2px;
74+
margin-top: 3px;
75+
76+
}
77+
.input {
78+
margin-bottom: 0px;
79+
}
80+
.button:hover{
81+
background-color: #ddd;
82+
color: black;
83+
}
84+
.button_round{
85+
text-decoration: none;
86+
display: inline-block;
87+
padding: 8px 16px;
88+
background-color: rgb(255, 255, 255);
89+
color: black;
90+
border: 2px solid black;
91+
margin-right: 2px;
92+
93+
margin-top: 3px;
94+
border-radius: 20px;
95+
}
96+
.button_round:hover{
97+
background-color: #ddd;
98+
color: black;
99+
}
100+
.button_round.active {
101+
background-color: #ddd;
102+
}
103+
104+
.next:hover {
105+
background-color: #ddd;
106+
color: black;
107+
}
108+
109+
.next {
110+
text-decoration: none;
111+
display: inline-block;
112+
padding: 8px 16px;
113+
background-color: rgb(255, 255, 255);
114+
color: black;
115+
border: solid;
116+
box-shadow: -3px -4px grey;
117+
}
118+
.home:hover {
119+
background-color: #ddd;
120+
color: black;
121+
}
122+
.home {
123+
text-decoration: none;
124+
display: inline-block;
125+
padding: 8px 16px;
126+
background-color: rgb(255, 255, 255);
127+
color: black;
128+
border: solid;
129+
box-shadow: -3px -4px grey;
130+
}
131+
#page-container {
132+
position: relative;
133+
min-height: 100vh;
134+
}
135+
136+
#content-wrap {
137+
padding-bottom: 0rem; /* Footer height */
138+
}
139+
#content-wrap2 {
140+
padding-bottom: 10rem; /* Footer height */
141+
}
142+
#footer {
143+
position: relative;
144+
bottom: 0;
145+
width: 100%;
146+
height: 2.5rem; /* Footer height */
147+
148+
}
149+
#Question{
150+
padding-bottom: 2.5rem;
151+
}
152+
#Answer{
153+
padding-bottom: 2.5rem;
154+
margin-left: 100px;
155+
}
156+

‎delta-modulation/waves_delta.js‎

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,8 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
225225
// downsampling factor
226226
if (playback) {
227227
settings.downsampled_pb = new Float32Array(p.round(original.length / settings.downsamplingFactor));
228-
settings.quantNoise_pb = new Float32Array(p.round(original.length / settings.downsamplingFactor));
228+
settings.quantNoise_pb = new Float32Array(p.round(original.length));
229+
229230
} else {
230231
settings.downsampled = new Float32Array(p.round(original.length / settings.downsamplingFactor));
231232
settings.quantNoise = new Float32Array(p.round(original.length / settings.downsamplingFactor));
@@ -236,34 +237,51 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
236237
quantNoiseStuffed.fill(0);
237238

238239
// calculate the maximum integer value representable with the given bit depth
239-
let maxInt = p.pow(2, settings.bitDepth) - 1;
240+
let maxInt = 1;
240241

241242
let stepSize = (settings.quantType == "midTread") ? 2/(maxInt-1) : 2/(maxInt);
242243

244+
let currentAmp = 0;
245+
for (let x = 0; x < downsampled.length; x++) {
246+
if (original[Math.floor(x/downsampled.length*original.length)] > currentAmp) {
247+
currentAmp += settings.deltaStep;
248+
} else {
249+
currentAmp -= settings.deltaStep;
250+
}
251+
currentAmp = (currentAmp>1.0)? currentAmp = 1.0 : (currentAmp<-1.0)? currentAmp = -1.0 : currentAmp = currentAmp;
252+
downsampled[x] = currentAmp;
253+
254+
/* let xpos = Math.round(panel.plotLeft + x * panel.settings.downsamplingFactor*panel.settings.timeZoom);
255+
panel.buffer.curveVertex(xpos, ypos);
256+
if (pixel_max * signal[Math.floor((x/visibleSamples)*panel.plotWidth/panel.settings.timeZoom)]*panel.settings.ampZoom < panel.halfh - ypos) {
257+
ypos += panel.settings.deltaStep*panel.plotHeight;
258+
//if (ypos >= panel.plotBottom) ypos -= 2*panel.settings.deltaStep*panel.plotHeight; //Prevent signal from going below bounds
259+
} else {
260+
ypos -= panel.settings.deltaStep*panel.plotHeight;
261+
//if (ypos <= panel.plotTop) ypos += 2*panel.settings.deltaStep*panel.plotHeight; //Same for the top bound
262+
}
263+
ypos = (ypos<panel.plotTop)? ypos=panel.plotTop : (ypos>panel.plotBottom)? ypos= panel.plotBottom: ypos=ypos;
264+
panel.buffer.curveVertex(xpos, ypos); */
265+
}
266+
console.log(settings.downsamplingFactor, quantNoise.length, reconstructed.length, original.length);
267+
for (let x=0; x<reconstructed.length; x++) {
268+
reconstructed[x]=downsampled[Math.floor(x/reconstructed.length*downsampled.length)];
269+
let currentAmp = original[x] - reconstructed[x];
270+
currentAmp = (currentAmp>1.0)? currentAmp = 1.0 : (currentAmp<-1.0)? currentAmp = -1.0 : currentAmp = currentAmp;
271+
quantNoise[Math.floor(x/reconstructed.length*quantNoise.length)] = currentAmp;
272+
quantNoiseStuffed[Math.floor(x/reconstructed.length*quantNoiseStuffed.length)] = currentAmp;
273+
}
274+
243275
// generate the output of the simulated ADC process by "sampling" (actually
244276
// just downsampling), and quantizing with dither. During this process, we
245277
// also load the buffer for the reconstructed signal with the sampled values;
246278
// this allows us to skip an explicit zero-stuffing step later
247-
248-
downsampled.forEach( (_, n, arr) => {
279+
/* downsampled.forEach( (_, n, arr) => {
249280
250281
// keep only every kth sample where k is the integer downsampling factor
251282
let y = original[n * settings.downsamplingFactor];
252283
y = y > 1.0 ? 1.0 : y < -1.0 ? -1.0 : y; // apply clipping
253284
254-
// if the bit depth is set to the maximum, we skip quantization and dither
255-
if (settings.bitDepth == BIT_DEPTH_MAX) {
256-
257-
// record the sampled output of the ADC process
258-
arr[n] = y;
259-
260-
// sparsely fill the reconstruction and zero stuffed buffers to avoid
261-
// having to explicitly zero-stuff
262-
reconstructed[n * settings.downsamplingFactor] = y;
263-
stuffed[n * settings.downsamplingFactor] = y * settings.downsamplingFactor;
264-
return;
265-
}
266-
267285
// generate dither noise
268286
let dither = (2 * Math.random() - 1) * settings.dither;
269287
@@ -289,12 +307,12 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
289307
// record the quantization error
290308
quantNoise[n] = quantized - y;
291309
quantNoiseStuffed[n * settings.downsamplingFactor] = quantNoise[n];
292-
});
310+
}); */
293311

294312
// render reconstructed wave by low pass filtering the zero stuffed array----
295313

296314
// specify filter parameters; as before, the cutoff is set to the Nyquist
297-
var filterCoeffs = firCalculator.lowpass(
315+
/* var filterCoeffs = firCalculator.lowpass(
298316
{ order: 200
299317
, Fs: WEBAUDIO_MAX_SAMPLERATE
300318
, Fc: (WEBAUDIO_MAX_SAMPLERATE / settings.downsamplingFactor) / 2
@@ -314,7 +332,7 @@ function renderWavesImpl(settings, fft, p) { return (playback = false) => {
314332
315333
// time shift the signal by half the filter order to compensate for the delay
316334
// introduced by the FIR filter
317-
reconstructed.forEach( (x, n, arr) => arr[n - 100] = x );
335+
reconstructed.forEach( (x, n, arr) => arr[n - 100] = x ); */
318336

319337
// render FFTs --------------------------------------------------------------
320338
// TODO: apply windows?

‎delta-modulation/widget_delta.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ function resize(w, h) {
172172

173173
function buttonSetup() {
174174
originalButton = p.createButton("play original");
175-
originalButton.position(p.width/2 + 10, p.height - p.height / numPanels );
175+
originalButton.position(p.width/2 + 10, p.height - p.height /numPanels, 'absolute');
176176
originalButton.mousePressed( () => {
177177
renderWaves(true);
178178
if (!settings.snd) settings.snd = new (window.AudioContext || window.webkitAudioContext)();

0 commit comments

Comments
 (0)