Skip to content

Commit 75a2752

Browse files
wolffeparkewolffeparke
committed
Many (MANY) changes. Both sampling methods are now available at the same time. Made the paragraph and next/previous buttons part of the p5 canvas. Create the simplified 'pages' system as well as the first few pages. Created checkboxes for each of the panels/sliders. Sliders are temporarily only on one column to simplify page layout (we can revert this later).
1 parent ccf6e40 commit 75a2752

6 files changed

Lines changed: 713 additions & 93 deletions

File tree

‎delta-modulation/index.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,44 +14,41 @@
1414
<script src="../fft.js"></script>
1515
<script src="waves_delta.js"></script>
1616
<script src="widget_delta.js"></script>
17+
<script src="pages.js"></script>
1718

1819
</head>
1920
<body>
2021
<div id="page-container">
2122
<center>
2223
<div class="tab">
23-
<a href="index.html" class="button_round">&laquo; Prev </a>
24+
<!--<a id="prevButton" class="button_round">&laquo; Prev </a>-->
2425
<a href="../index.html" class="button_round">Home </a>
25-
<a href="tutorial3.html" class="button_round">Next &raquo;</a>
26+
<!--<a id="nextButton" class="button_round">Next &raquo;</a>-->
2627
</div>
2728
<div class="tabs">
2829
<button class="button_round" onclick="samplingSection(event, 'Question')" id="defaultOpen">Question</button>
2930

3031
</div>
3132
</center>
32-
<div id = "content-wrap" class="title qs">
33+
<!--<div id = "content-wrap" class="title qs">
3334
<H1>
34-
Adaptive Delta Modulation
35+
Waveforms
3536
</H1>
3637
<hr>
37-
</div>
38-
38+
<p id = "main page">
39+
Leave blank
40+
</p>
41+
</div>-->
3942
<div id="Question" class="tabcontent active">
4043
<main>
4144
<script>
42-
const widgetset = new_widget(
43-
[ new deltaModPanel()
44-
, new inputSigFreqPanel()
45-
, new reconstructedSigPanel()
46-
, new reconstructedSigFFTPanel()
45+
widgetset = new_widget(
46+
[ new inputSigPanel()
4747
],
4848
[ new freqSlider()
49-
, new numHarmSlider()
50-
, new sampleRateDeltaSlider()
51-
, new deltaStepSlider()
5249
, new timeZoomSlider()
5350
]
54-
, ["original","recon","quant","adaptive"]
51+
, ["original"]
5552
,"Question"
5653
,"qs"
5754
, 120
@@ -81,6 +78,12 @@ <H1>
8178

8279
// Get the element with id="defaultOpen" and click on it
8380
document.getElementById("defaultOpen").click();
81+
var paragraph = document.getElementById("main page");
82+
var pageNum = 0;
83+
84+
// Add event listener to the Next/Previous button
85+
document.getElementById("nextButton").addEventListener("click", nextPage);
86+
document.getElementById("prevButton").addEventListener("click", prevPage);
8487

8588
function questionlist(evt, questions) {
8689
var i, tabcontent, tablinks;

‎delta-modulation/panel_delta.js‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,12 @@ function drawDeltaModulation(panel, signal) {
132132
panel.buffer.noFill();
133133
panel.buffer.beginShape();
134134
panel.buffer.curveTightness(1.0);
135-
let visibleSamples = Math.floor(panel.plotWidth / panel.settings.downsamplingFactor/panel.settings.timeZoom+1);
135+
let visibleSamples = Math.floor(panel.plotWidth / panel.settings.downsamplingFactorDelta/panel.settings.timeZoom+1);
136136
let ypos = panel.halfh;
137137
let counter = 0; //Consecutive similar bits counter for adaptive modulation
138138
let lastBit = 0;
139139
for (let x = 0; x < visibleSamples; x++) {
140-
let xpos = Math.round(panel.plotLeft + x * panel.settings.downsamplingFactor*panel.settings.timeZoom);
140+
let xpos = Math.round(panel.plotLeft + x * panel.settings.downsamplingFactorDelta*panel.settings.timeZoom);
141141
panel.buffer.curveVertex(xpos, ypos);
142142
if (pixel_max * signal[Math.floor((x/visibleSamples)*panel.plotWidth/panel.settings.timeZoom)]*panel.settings.ampZoom < panel.halfh - ypos) {
143143
if (panel.settings.deltaType == "adaptive") {
@@ -369,6 +369,25 @@ class reconstructedSigPanel extends Panel {
369369
}
370370
}
371371

372+
class reconstructedDeltaModSigPanel extends Panel {
373+
constructor(){
374+
super();
375+
this.name="Reconstructed Signal Time Domain using Delta Modulation";
376+
this.description='This is a straightforward time domain plot of the signal output from the simulated digital-to-analog conversion process using delta modulation. '
377+
+ time_signal_doc + time_ticks_doc + amp_ticks_doc + midline_doc;
378+
}
379+
380+
drawPanel(){
381+
this.buffer.background(this.background);
382+
drawSignal(this, this.settings.reconstructedDelta);
383+
drawMidLine(this);
384+
drawName(this);
385+
drawSignalAmplitudeTicks(this, this.plotHeight/2, 4);
386+
drawTimeTicks(this, this.numTimeTicks/this.settings.timeZoom, 1/(this.settings.timeZoom*this.settings.sampleRate));
387+
this.drawBorder();
388+
}
389+
}
390+
372391
const analytic_frequency_doc='Spikes are drawn at the appropriate frequency and amplitude based on the analytic definition of the signal determined by the frequency, number of harmonics, and harmonic amplitude scaling settings. As such, this plot should accurately reflect the frequency content of the signal without any influence of windowing or other considerations that would affect a discrete time fourier transform. Unfortunately, this approach does not reflect non-linear effects such as quantization and clipping, where applicable. ';
373392
class inputSigFreqPanel extends freqPanel {
374393
constructor(){
@@ -480,6 +499,17 @@ class reconstructedSigFFTPanel extends freqPanel {
480499
}
481500
}
482501

502+
class reconstructedDeltaModSigFFTPanel extends freqPanel {
503+
constructor(){
504+
super();
505+
this.name="Reconstructed Signal using Delta Modulation FFT";
506+
this.description='This plot shows the FFT of the signal output by the simulated digital-to-analog conversion using delta modulation. ' + fft_doc + 'This plot clearly reveals one of the compromises inherent in the simulation; since everything must be represented by the computer, the ideal continuous time output signal must be approximated by a discrete time signal with a sufficiently high sampling rate. ';
507+
}
508+
drawPanel() {
509+
drawFFT(this, this.settings.reconstructedDeltaFreq);
510+
}
511+
}
512+
483513
class impulsePanel extends Panel {
484514
constructor(){
485515
super()

‎delta-modulation/slider_delta.js‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -34,27 +34,28 @@ class slider{
3434
this.button.mousePressed(this.buttonPressed.bind(this));
3535
this.button.mouseReleased(this.onEdit.bind(this));
3636
this.slider.parent(this.settings.element.id);
37-
this.button.parent(this.settings.element.id);
38-
this.textBox.parent(this.settings.element.id);
37+
//this.button.parent(this.settings.element.id);
38+
//this.textBox.parent(this.settings.element.id);
3939
this.textLabel.parent(this.settings.element.id);
4040
}
4141

4242
resize(x, y, w, p){
4343
let width = w - 20;
44-
let labelWidth = 140;
44+
let labelWidth = 160;
4545
width -= labelWidth;
4646
let sliderWidth = width * 0.6;
4747
width -= sliderWidth;
48-
let textboxWidth = width *.4;
48+
let textboxWidth = width * 0.4;
4949
width -= textboxWidth;
5050
let buttonWidth = width;
5151

5252
this.slider.style('width', Math.round(sliderWidth).toString() + "px");
53+
console.log("normal slider", x, y, w)
5354
this.slider.position(x, y);
54-
this.textLabel.position(x + this.slider.width+5, y-18);
55-
this.textBox.position(x+this.slider.width + labelWidth,y);
55+
this.textLabel.position(x+sliderWidth+8, y-18);
56+
this.textBox.position(x+sliderWidth+labelWidth,y+8);
5657
this.textBox.style('width', Math.round(textboxWidth).toString() + "px");
57-
this.button.position(this.textBox.x+this.textBox.width,y);
58+
this.button.position(x+sliderWidth+labelWidth+textboxWidth,y+8);
5859
this.button.style('width', Math.round(buttonWidth).toString() + "px");
5960
}
6061
buttonPressed(){
@@ -76,7 +77,7 @@ class slider{
7677
this.settings = settings;
7778
this.name ="Frequency (Hz)";
7879
this.propName = "fundFreq";
79-
this.min = 100;
80+
this.min = 30;
8081
this.max = this.settings.sampleRate / 4 ;
8182
this.initial = 440;
8283
this.step = 1.0;
@@ -89,7 +90,7 @@ class slider{
8990
class numHarmSlider extends slider{
9091
setup(p,settings){
9192
this.settings = settings;
92-
this.name ="Number of harmonics";
93+
this.name ="Num. of harmonics";
9394
this.propName="numHarm"
9495
this.min = 1;
9596
this.max = 100;
@@ -101,7 +102,7 @@ class slider{
101102
this.oddEvenSel.option("Even");
102103
this.oddEvenSel.option("All");
103104
this.oddEvenSel.selected(this.settings.harmType);
104-
this.oddEvenSel.changed(()=>this.settings.harmType = this.oddEvenSel.value());
105+
this.oddEvenSel.changed(()=>{this.settings.harmType = this.oddEvenSel.value();this.onEdit();});
105106
this.oddEvenSel.parent(this.settings.element.id);
106107

107108
this.slopeSel = p.createSelect();
@@ -111,32 +112,33 @@ class slider{
111112
this.slopeSel.option("flat");
112113
this.slopeSel.option("log");
113114
this.slopeSel.selected(this.settings.harmSlope);
114-
this.slopeSel.changed(()=>this.settings.harmSlope = this.slopeSel.value());
115+
this.slopeSel.changed(()=>{this.settings.harmSlope = this.slopeSel.value();this.onEdit();});
115116
this.slopeSel.parent(this.settings.element.id);
116117
this.makeSlider(p);
117118
}
118119
resize(x, y, w, p){
119120

120121
let width = w - 20;
121-
let labelWidth = 170;
122+
let labelWidth = 160;
122123
width -= labelWidth;
123-
let sliderWidth = width * 0.5; // slider + dropdowns
124+
let sliderWidth = width * 0.6; // slider + dropdowns
124125
width -= sliderWidth;
125-
let dropDownWidth = sliderWidth * .25-10; // Make slider + dropdown the same width as other sliders.
126-
sliderWidth = sliderWidth * .75; // Slider
127-
let textboxWidth = width * 0.42;
128-
let buttonWidth = width*.4;
126+
let dropDownWidth = 50; // Make slider + dropdown the same width as other sliders.
127+
sliderWidth = sliderWidth-(dropDownWidth*2)-20; // Slider
128+
let textboxWidth = width * 0.5;
129+
let buttonWidth = width*.5;
129130

130131
this.slider.style('width', Math.round(sliderWidth).toString() + "px");
132+
console.log("harmSlider", x, y, w);
131133
this.slider.position(x, y);
132134
this.oddEvenSel.style('width', Math.round(dropDownWidth).toString() + "px");
133-
this.oddEvenSel.position(x+this.slider.width+10,y);
135+
this.oddEvenSel.position(x+sliderWidth+20,y);
134136
this.slopeSel.style('width', Math.round(dropDownWidth).toString() + "px");
135-
this.slopeSel.position(x+this.slider.width+dropDownWidth+10,y);
136-
this.textLabel.position(x + 2*dropDownWidth + this.slider.width + 18, y - 18);
137-
this.textBox.position(x + this.slider.width + 2*dropDownWidth+ labelWidth+10,y);
137+
this.slopeSel.position(x+sliderWidth+20+dropDownWidth,y);
138+
this.textLabel.position(x+sliderWidth+20+2*dropDownWidth+7, y-18);
139+
this.textBox.position(x+sliderWidth+22+2*dropDownWidth+labelWidth,y+8);
138140
this.textBox.style('width', Math.round(textboxWidth).toString() + "px");
139-
this.button.position(this.textBox.x + this.textBox.width,y);
141+
this.button.position(x+sliderWidth+22+2*dropDownWidth+labelWidth+textboxWidth,y+8);
140142
this.button.style('width', Math.round(buttonWidth).toString() + "px");
141143
}
142144
}
@@ -145,7 +147,7 @@ class slider{
145147
class sampleRateSlider extends slider{
146148
setup(p,settings){
147149
this.settings = settings;
148-
this.name ="Sample Rate(Hz):";
150+
this.name ="Sample Rate (Hz):";
149151
this.propName="downsamplingFactor";
150152
this.min = p.log(3000)/p.log(2);
151153
this.max = p.log(48000)/p.log(2);
@@ -171,8 +173,8 @@ class slider{
171173
class sampleRateDeltaSlider extends sampleRateSlider{
172174
setup(p,settings){
173175
this.settings = settings;
174-
this.name ="Sample Rate (Hz):";
175-
this.propName="downsamplingFactor";
176+
this.name ="Delta Sample Rate (Hz):";
177+
this.propName="downsamplingFactorDelta";
176178
this.min = p.log(1500)/p.log(2);
177179
this.max = p.log(this.settings.deltaFrequency)/p.log(2);
178180
this.initial = p.log(1500)/p.log(2);
@@ -181,11 +183,11 @@ class slider{
181183
}
182184

183185
calcDisplayVal(){
184-
return this.displayVal= Math.round(this.settings.deltaFrequency / this.settings.downsamplingFactor , 3);//
186+
return this.displayVal= Math.round(this.settings.deltaFrequency / this.settings.downsamplingFactorDelta , 3);//
185187
}
186188

187189
updateValue(p){
188-
this.settings.downsamplingFactor = Math.round(this.settings.deltaFrequency/Math.pow(2, this.slider.value()))/32;
190+
this.settings.downsamplingFactorDelta = Math.round(this.settings.deltaFrequency/Math.pow(2, this.slider.value()))/32;
189191
this.displayVal = this.calcDisplayVal();
190192
this.textBox.value(this.displayVal);//
191193
this.textLabel.html(this.name);// + p.round(this.settings.sampleRate / this.settings.downsamplingFactor / 1000, 3) + " kHz")
@@ -299,7 +301,7 @@ class slider{
299301
}
300302
}
301303

302-
const minTimeZoom = .25;
304+
const minTimeZoom = .30;
303305
class timeZoomSlider extends zoomSlider{
304306
setup(p,settings){
305307
this.settings = settings;

‎delta-modulation/styles_delta.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
body {
22
font-family: Cantarell, sans-serif;
33
line-height: 1.5;
4-
54
}
65

76
canvas {
@@ -66,13 +65,13 @@ body {
6665
position :relative;
6766
z-index: 0;
6867
display: inline-block;
69-
padding: 8px 16px;
68+
padding: 8px 25px;
7069
background-color: rgb(255, 255, 255);
7170
color: black;
7271
border: solid;
7372
margin-right: 2px;
7473
margin-top: 3px;
75-
74+
margin-bottom: 100px;
7675
}
7776
.input {
7877
margin-bottom: 100px;
@@ -147,7 +146,7 @@ body {
147146

148147
}
149148
#Question{
150-
padding-bottom: 2.5rem;
149+
padding-bottom: 10rem;
151150
}
152151
#Answer{
153152
padding-bottom: 2.5rem;

0 commit comments

Comments
 (0)