Skip to content

Commit c942012

Browse files
Maxw3llGMMaxw3llGM
committed
roughly added work done in the tutorial, changes should be applied to the entire webpage when everything is finished, for know however they will be kept to the tutorial section to avoid breaking the rest.
1 parent bcf513b commit c942012

8 files changed

Lines changed: 1906 additions & 1 deletion

File tree

‎images/SH_101.png‎

386 KB
Loading

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h4>Input Devices and Musical Interaction Laboratory (IDMIL) - <a href="//www.id
1515
<p style="margin-left: 40px">
1616
<i>
1717
By Josh Rohs, Travis J. West & Marcelo M. Wanderley<br>
18-
<small>with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, and others.</small><br>
18+
<small>with contributions by Eduardo Meneses, Christian Frisson, Erivan Duarte, Maxwell Gentili-Morin, and others.</small><br>
1919
Copyright IDMIL/McGill University, 2020-2021
2020
</i>
2121
</p>
@@ -43,6 +43,7 @@ <h4>Input Devices and Musical Interaction Laboratory (IDMIL) - <a href="//www.id
4343
<ul>
4444
<li><a href="sampling">sampling & aliasing</a></li>
4545
<li><a href="quantization">quantization & dither</a></li>
46+
<li><a href="tutorials">Tutorial on Sampling and Quantization</a></li>
4647
<li><a href="all-panels">all panels and sliders</a> (mainly for developers)</li>
4748
</ul>
4849

‎tutorials/index.html‎

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

0 commit comments

Comments
 (0)