Skip to content

Commit 7a6316a

Browse files
Maxw3llGMMaxw3llGM
committed
added the rest of the tutorials, must add text and modify the panels so as to have uneven panel values be 2 per row until the final row
1 parent 927b546 commit 7a6316a

10 files changed

Lines changed: 1186 additions & 5 deletions

‎tutorials/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<div id="page-container">
2121
<center>
2222
<div class="tab">
23-
<a href="#" class="button_round">&laquo; Prev</a>
2423
<a href="../index.html" class="button_round">Home </a>
2524
<a href="tutorial2.html" class="button_round">Next &raquo;</a>
2625
</div>
@@ -127,9 +126,9 @@ <H1>
127126
</div>
128127
<div>
129128
<footer id="footer">
130-
<div>Digital Audio Workbench, by Josh Rohs, Travis J. West & Marcelo M. Wanderley </div>
131-
<div>with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte and Maxwell Gentili-Morin</div>
132-
<div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2020 </div>
129+
<div>Digital Audio Workbench Tutorial, by Maxwell Gentili-Morin & Marcelo M. Wanderley </div>
130+
<div>based on the Digital Audio Workbench</div>
131+
<div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2023 </div>
133132
</footer>
134133
</div>
135134
</div>

‎tutorials/styles_tutorial.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ footer{
1616
font-family: Cantarell, sans-serif;
1717
padding: 5px 10px 0px;
1818
background : lightgrey;
19+
bottom: 0;
20+
left: 0;
1921
font-size: 9pt;
2022
color: grey;
2123
text-align: center;

‎tutorials/tutorial2.html‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="styles_tutorial.css" media="screen" />
5+
<!-- p5.js begin -->
6+
<!-- 1) use p5.min.js for optimizing size/transfer -->
7+
<script src="../p5.min.js"></script>
8+
<!-- 2) use p5.js for debugging -->
9+
<!-- <script src="../p5.js"></script> -->
10+
<!-- p5.js end-->
11+
<script src="../fili.min.js"></script>
12+
<script src="panel_tutorial.js"></script>
13+
<script src="slider_tutorial.js"></script>
14+
<script src="../fft.js"></script>
15+
<script src="waves_tutorial.js"></script>
16+
<script src="widget_tutorial.js"></script>
17+
</head>
18+
<body>
19+
<center>
20+
<div class="tab">
21+
<a href="index.html" class="button_round">&laquo; Prev </a>
22+
<a href="../index.html" class="button_round">Home </a>
23+
<a href="tutorial3.html" class="button_round">Next &raquo;</a>
24+
</div>
25+
<div class="tabs">
26+
<button class="button_round" onclick="samplingSection(event, 'Question')" id="defaultOpen">Question</button>
27+
<button class="button_round" onclick="samplingSection(event, 'Answer')">Answer</button>
28+
</div>
29+
</center>
30+
<div id = "content-wrap" class="title qs">
31+
<H1>
32+
Tutorial 2: Sampling
33+
</H1>
34+
<hr>
35+
</div>
36+
37+
<div id="Question" class="tabcontent active">
38+
<div class = "qs">
39+
<p>
40+
In the left panel, you can see a sine wave with frequency 440 Hz.
41+
Click on the Play Original button at the bottom left to hear how it sounds.
42+
</p>
43+
<p>
44+
In the right panel, a vertical line at 440 Hz represents the sine wave frequency component.
45+
Remember that a sine (or a cosine) wave has only one frequency component,
46+
in other words, it represents a <u>simple harmonic motion</u> such as the motion of an ideal pendulum or a tuning fork.
47+
</p>
48+
</div>
49+
<div class = "tab_questions qs">
50+
<button class="button_round ques" onclick="questionlist(event, 'q1')" onmouseover="questionlist(event, 'q1')" id="defaulthover">Question 1</button>
51+
<button class="button_round ques" onclick="questionlist(event, 'q2')">Question 2</button>
52+
<button class="button_round ques" onclick="questionlist(event, 'q3')">Question 3</button>
53+
<button class="button_round ques" onclick="questionlist(event, 'q4')">Question 4</button>
54+
</div>
55+
<div id = "q1" class = "tab_questions_content qs">
56+
Now use the top right slider.
57+
With the parameters loaded with the application
58+
(Odd harmonics, 1/x amplitude),
59+
add 10 components (harmonics) to the original sine wave.
60+
You can get the same effect by typing 10 in the top right
61+
box and pressing the Update button. Describe what happens
62+
in the left panel.
63+
</div>
64+
<div id = "q2" class = "tab_questions_content qs">
65+
If you add more components (say, 20), what do you see happening in the left panel?
66+
</div>
67+
<div id = "q3" class = "tab_questions_content qs">
68+
Now, what do you see when using 20 harmonics and changing the amplitude values to 1/x2?
69+
</div>
70+
<div id = "q4" class = "tab_questions_content qs">
71+
If you go back to 1/x, change Odd to All, and press the Update button, what happens? Remember that now your highest frequency will be half of the one with only Odd harmonics.
72+
To get a similar maximum frequency value you’ll need to add 40 harmonics in this case.
73+
</div>
74+
<main>
75+
<script>
76+
const widgetset = new_widget(
77+
[
78+
new impulsePanel()
79+
],
80+
[
81+
new sampleRateSlider()
82+
, new phaseSlider()
83+
, new timeZoomSlider()
84+
]
85+
,["original"]
86+
,"Question" //question div id
87+
,"qs" //questions class
88+
);
89+
</script>
90+
<br>
91+
</main>
92+
</div>
93+
<div id="Answer" class="tabcontent">
94+
<p>
95+
You have just played with approximations of the most
96+
common waves used in analog syntehsizers: square, triangular, and sawtooth waves.
97+
98+
</p>
99+
<center><img src="../images/SH_101.png"></center>
100+
<p>
101+
<ul>
102+
<li>
103+
Click again on the Play Original button at the bottom left to hear how they sound. Add and remove
104+
partials and check the resulting visuals and sounds.
105+
</li>
106+
</ul>
107+
</p>
108+
<p>
109+
You can also play with these variable and see the results in both panels and hear the results.
110+
</p>
111+
<p>
112+
<ul>
113+
<li>
114+
For instance, describe what do you hear when using 20 Even harmonics with flat amplitude?
115+
Compare the sonic result to using 20 Odd harmonics and flat amplitude.
116+
</li>
117+
</ul>
118+
</p>
119+
</div>
120+
</div>
121+
<footer>
122+
<div>Digital Audio Workbench Tutorial, by Maxwell Gentili-Morin & Marcelo M. Wanderley </div>
123+
<div>based on the Digital Audio Workbench</div>
124+
<div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2023 </div>
125+
</footer>
126+
<script>
127+
function samplingSection(evt, cityName) {
128+
var i, tabcontent, tablinks;
129+
tabcontent = document.getElementsByClassName("tabcontent");
130+
for (i = 0; i < tabcontent.length; i++) {
131+
tabcontent[i].style.display = "none";
132+
}
133+
tablinks = document.getElementsByClassName("button_round");
134+
for (i = 0; i < tablinks.length; i++) {
135+
tablinks[i].className = tablinks[i].className.replace(" active", "");
136+
}
137+
document.getElementById(cityName).style.display = "block";
138+
evt.currentTarget.className += " active";
139+
}
140+
141+
// Get the element with id="defaultOpen" and click on it
142+
document.getElementById("defaultOpen").click();
143+
144+
function questionlist(evt, questions) {
145+
var i, tabcontent, tablinks;
146+
tabcontent = document.getElementsByClassName("tab_questions_content");
147+
for (i = 0; i < tabcontent.length; i++) {
148+
tabcontent[i].style.display = "none";
149+
}
150+
tablinks = document.getElementsByClassName("ques");
151+
for (i = 0; i < tablinks.length; i++) {
152+
tablinks[i].className = tablinks[i].className.replace(" active", "");
153+
}
154+
document.getElementById(questions).style.display = "block";
155+
evt.currentTarget.className += " active";
156+
}
157+
document.getElementById("defaulthover").click();
158+
</script>
159+
</body>
160+
</html>

‎tutorials/tutorial3.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<!-- TODO: add the ability to adjust the sampling rate values/frequency rate-->
3+
<html>
4+
<head>
5+
<link rel="stylesheet" type="text/css" href="styles_tutorial.css" media="screen" />
6+
<!-- p5.js begin -->
7+
<!-- 1) use p5.min.js for optimizing size/transfer -->
8+
<script src="../p5.min.js"></script>
9+
<!-- 2) use p5.js for debugging -->
10+
<!-- <script src="../p5.js"></script> -->
11+
<!-- p5.js end-->
12+
<script src="../fili.min.js"></script>
13+
<script src="panel_tutorial.js"></script>
14+
<script src="slider_tutorial.js"></script>
15+
<script src="../fft.js"></script>
16+
<script src="waves_tutorial.js"></script>
17+
<script src="widget_tutorial.js"></script>
18+
</head>
19+
<body>
20+
<center>
21+
<div class="tab">
22+
<a href="tutorial2.html" class="button_round">&laquo; Prev </a>
23+
<a href="../index.html" class="button_round">Home </a>
24+
<a href="tutorial4.html" class="button_round">Next &raquo;</a>
25+
</div>
26+
<div class="tabs">
27+
<button class="button_round" onclick="samplingSection(event, 'Question')" id="defaultOpen">Question</button>
28+
<button class="button_round" onclick="samplingSection(event, 'Answer')">Answer</button>
29+
</div>
30+
</center>
31+
<div id = "content-wrap" class="title qs">
32+
<H1>
33+
Tutorial 3: Sampling a Waveform
34+
</H1>
35+
<hr>
36+
</div>
37+
38+
<div id="Question" class="tabcontent active">
39+
<div class = "qs">
40+
<p>
41+
In the left panel, you can see a sine wave with frequency 440 Hz.
42+
Click on the Play Original button at the bottom left to hear how it sounds.
43+
</p>
44+
<p>
45+
In the right panel, a vertical line at 440 Hz represents the sine wave frequency component.
46+
Remember that a sine (or a cosine) wave has only one frequency component,
47+
in other words, it represents a <u>simple harmonic motion</u> such as the motion of an ideal pendulum or a tuning fork.
48+
</p>
49+
</div>
50+
<div class = "tab_questions qs">
51+
<button class="button_round ques" onclick="questionlist(event, 'q1')" onmouseover="questionlist(event, 'q1')" id="defaulthover">Question 1</button>
52+
<button class="button_round ques" onclick="questionlist(event, 'q2')">Question 2</button>
53+
<button class="button_round ques" onclick="questionlist(event, 'q3')">Question 3</button>
54+
<button class="button_round ques" onclick="questionlist(event, 'q4')">Question 4</button>
55+
</div>
56+
<div id = "q1" class = "tab_questions_content qs">
57+
Now use the top right slider.
58+
With the parameters loaded with the application
59+
(Odd harmonics, 1/x amplitude),
60+
add 10 components (harmonics) to the original sine wave.
61+
You can get the same effect by typing 10 in the top right
62+
box and pressing the Update button. Describe what happens
63+
in the left panel.
64+
</div>
65+
<div id = "q2" class = "tab_questions_content qs">
66+
If you add more components (say, 20), what do you see happening in the left panel?
67+
</div>
68+
<div id = "q3" class = "tab_questions_content qs">
69+
Now, what do you see when using 20 harmonics and changing the amplitude values to 1/x2?
70+
</div>
71+
<div id = "q4" class = "tab_questions_content qs">
72+
If you go back to 1/x, change Odd to All, and press the Update button, what happens? Remember that now your highest frequency will be half of the one with only Odd harmonics.
73+
To get a similar maximum frequency value you’ll need to add 40 harmonics in this case.
74+
</div>
75+
<main>
76+
<script>
77+
const widgetset = new_widget(
78+
[ new inputSigPanel()
79+
, new inputPlusSampledPanel_no_binary()
80+
],
81+
[ new freqSlider()
82+
, new numHarmSlider()
83+
, new sampleRateSlider()
84+
, new phaseSlider()
85+
, new timeZoomSlider()
86+
]
87+
,["original"]
88+
,"Question" //question div id
89+
,"qs" //questions class
90+
91+
);
92+
</script>
93+
<br>
94+
</main>
95+
</div>
96+
<div id="Answer" class="tabcontent">
97+
<p>
98+
You have just played with approximations of the most
99+
common waves used in analog syntehsizers: square, triangular, and sawtooth waves.
100+
101+
</p>
102+
<center><img src="../images/SH_101.png"></center>
103+
<p>
104+
<ul>
105+
<li>
106+
Click again on the Play Original button at the bottom left to hear how they sound. Add and remove
107+
partials and check the resulting visuals and sounds.
108+
</li>
109+
</ul>
110+
</p>
111+
<p>
112+
You can also play with these variable and see the results in both panels and hear the results.
113+
</p>
114+
<p>
115+
<ul>
116+
<li>
117+
For instance, describe what do you hear when using 20 Even harmonics with flat amplitude?
118+
Compare the sonic result to using 20 Odd harmonics and flat amplitude.
119+
</li>
120+
</ul>
121+
</p>
122+
</div>
123+
</div>
124+
<footer>
125+
<div>Digital Audio Workbench Tutorial, by Maxwell Gentili-Morin & Marcelo M. Wanderley </div>
126+
<div>based on the Digital Audio Workbench</div>
127+
<div>Copyright <a href="//www-new.idmil.org/">IDMIL</a>/McGill University, 2023 </div>
128+
</footer>
129+
<script>
130+
function samplingSection(evt, cityName) {
131+
var i, tabcontent, tablinks;
132+
tabcontent = document.getElementsByClassName("tabcontent");
133+
for (i = 0; i < tabcontent.length; i++) {
134+
tabcontent[i].style.display = "none";
135+
}
136+
tablinks = document.getElementsByClassName("button_round");
137+
for (i = 0; i < tablinks.length; i++) {
138+
tablinks[i].className = tablinks[i].className.replace(" active", "");
139+
}
140+
document.getElementById(cityName).style.display = "block";
141+
evt.currentTarget.className += " active";
142+
}
143+
144+
// Get the element with id="defaultOpen" and click on it
145+
document.getElementById("defaultOpen").click();
146+
147+
function questionlist(evt, questions) {
148+
var i, tabcontent, tablinks;
149+
tabcontent = document.getElementsByClassName("tab_questions_content");
150+
for (i = 0; i < tabcontent.length; i++) {
151+
tabcontent[i].style.display = "none";
152+
}
153+
tablinks = document.getElementsByClassName("ques");
154+
for (i = 0; i < tablinks.length; i++) {
155+
tablinks[i].className = tablinks[i].className.replace(" active", "");
156+
}
157+
document.getElementById(questions).style.display = "block";
158+
evt.currentTarget.className += " active";
159+
}
160+
document.getElementById("defaulthover").click();
161+
</script>
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)