Skip to content

Commit d29abd7

Browse files
committed
Adjustments to CSS for Tutorials, part 30
1 parent 09041e5 commit d29abd7

1 file changed

Lines changed: 193 additions & 6 deletions

File tree

content/static/tutorials/sound/index.html

Lines changed: 193 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,15 @@ <h3>Notes</h3>
7979

8080
<h3>Code</h3>
8181

82-
<p class="txt">Example 1</p>
82+
<hr />
8383

8484
<pre>
8585
<span style="color: #666666;">/**</span>
86-
<span style="color: #666666;">&nbsp;*&nbsp;In&nbsp;this&nbsp;example,&nbsp;five&nbsp;sine&nbsp;waves&nbsp;are&nbsp;layered&nbsp;to&nbsp;construct&nbsp;a&nbsp;cluster&nbsp;</span>
87-
<span style="color: #666666;">&nbsp;*&nbsp;of&nbsp;frequencies.&nbsp;This&nbsp;method&nbsp;is&nbsp;called&nbsp;additive&nbsp;synthesis.&nbsp;Use&nbsp;the&nbsp;</span>
88-
<span style="color: #666666;">&nbsp;*&nbsp;mouse&nbsp;position&nbsp;inside&nbsp;the&nbsp;display&nbsp;window&nbsp;to&nbsp;detune&nbsp;the&nbsp;cluster.</span>
86+
<span style="color: #666666;">&nbsp;*&nbsp;Processing&nbsp;Sound&nbsp;Library,&nbsp;Example&nbsp;1</span>
87+
<span style="color: #666666;">&nbsp;*&nbsp;</span>
88+
<span style="color: #666666;">&nbsp;*&nbsp;Five&nbsp;sine&nbsp;waves&nbsp;are&nbsp;layered&nbsp;to&nbsp;construct&nbsp;a&nbsp;cluster&nbsp;of&nbsp;frequencies.&nbsp;</span>
89+
<span style="color: #666666;">&nbsp;*&nbsp;This&nbsp;method&nbsp;is&nbsp;called&nbsp;additive&nbsp;synthesis.&nbsp;Use&nbsp;the&nbsp;mouse&nbsp;position&nbsp;</span>
90+
<span style="color: #666666;">&nbsp;*&nbsp;inside&nbsp;the&nbsp;display&nbsp;window&nbsp;to&nbsp;detune&nbsp;the&nbsp;cluster.</span>
8991
<span style="color: #666666;">&nbsp;*/</span>
9092

9193
<span style="color: #33997E;">import</span> processing.sound.*;
@@ -114,7 +116,6 @@ <h3>Code</h3>
114116
}
115117

116118
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
117-
118119
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY from 0 to 1</span>
119120
&nbsp;&nbsp;<span style="color: #E2661A;">float</span> yoffset = <span style="color: #006699;">map</span>(<span style="color: #D94A7A;">mouseY</span>, 0, <span style="color: #D94A7A;">height</span>, 0, 1);
120121
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY logarithmically to 150 - 1150 to create a base frequency range</span>
@@ -132,7 +133,193 @@ <h3>Code</h3>
132133

133134
<hr />
134135

135-
<p class="txt">Example 2</p>
136+
<pre>
137+
<span style="color: #666666;">/**</span>
138+
<span style="color: #666666;">&nbsp;*&nbsp;Processing&nbsp;Sound&nbsp;Library,&nbsp;Example&nbsp;2</span>
139+
<span style="color: #666666;">&nbsp;*&nbsp;</span>
140+
<span style="color: #666666;">&nbsp;*&nbsp;This&nbsp;sketch&nbsp;shows&nbsp;how&nbsp;to&nbsp;use&nbsp;envelopes&nbsp;and&nbsp;oscillators.&nbsp;</span>
141+
<span style="color: #666666;">&nbsp;*&nbsp;Envelopes&nbsp;describe&nbsp;to&nbsp;course&nbsp;of&nbsp;amplitude&nbsp;over&nbsp;time.&nbsp;</span>
142+
<span style="color: #666666;">&nbsp;*&nbsp;The&nbsp;Sound&nbsp;library&nbsp;provides&nbsp;an&nbsp;ASR&nbsp;envelope&nbsp;which&nbsp;stands&nbsp;for&nbsp;</span>
143+
<span style="color: #666666;">&nbsp;*&nbsp;attack,&nbsp;sustain,&nbsp;release.&nbsp;</span>
144+
<span style="color: #666666;">&nbsp;*&nbsp;</span>
145+
<span style="color: #666666;">&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.________</span>
146+
<span style="color: #666666;">&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---</span>
147+
<span style="color: #666666;">&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---&nbsp;</span>
148+
<span style="color: #666666;">&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;---</span>
149+
<span style="color: #666666;">&nbsp;*&nbsp;&nbsp;&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;R&nbsp;</span>
150+
<span style="color: #666666;">&nbsp;*/</span>
151+
152+
<span style="color: #33997E;">import</span> processing.sound.*;
153+
154+
<span style="color: #666666;">//&nbsp;Oscillator&nbsp;and&nbsp;envelope&nbsp;</span>
155+
TriOsc&nbsp;triOsc;
156+
Env&nbsp;env;&nbsp;
157+
158+
<span style="color: #666666;">//&nbsp;Times&nbsp;and&nbsp;levels&nbsp;for&nbsp;the&nbsp;ASR&nbsp;envelope</span>
159+
<span style="color: #E2661A;">float</span> attackTime = 0.001;
160+
<span style="color: #E2661A;">float</span> sustainTime = 0.004;
161+
<span style="color: #E2661A;">float</span> sustainLevel = 0.2;
162+
<span style="color: #E2661A;">float</span> releaseTime = 0.2;
163+
164+
<span style="color: #666666;">//&nbsp;This&nbsp;is&nbsp;an&nbsp;octave&nbsp;in&nbsp;MIDI&nbsp;notes.</span>
165+
<span style="color: #E2661A;">int</span>[] midiSequence = {
166+
&nbsp;&nbsp;60,&nbsp;61,&nbsp;62,&nbsp;63,&nbsp;64,&nbsp;65,&nbsp;66,&nbsp;67,&nbsp;68,&nbsp;69,&nbsp;70,&nbsp;71,&nbsp;72
167+
};&nbsp;
168+
169+
<span style="color: #666666;">//&nbsp;Set&nbsp;the&nbsp;duration&nbsp;between&nbsp;the&nbsp;notes</span>
170+
<span style="color: #E2661A;">int</span> duration = 200;
171+
<span style="color: #666666;">//&nbsp;Set&nbsp;the&nbsp;note&nbsp;trigger</span>
172+
<span style="color: #E2661A;">int</span> trigger = 0;
173+
174+
<span style="color: #666666;">//&nbsp;An&nbsp;index&nbsp;to&nbsp;count&nbsp;up&nbsp;the&nbsp;notes</span>
175+
<span style="color: #E2661A;">int</span> note = 0;
176+
177+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
178+
&nbsp;&nbsp;<span style="color: #006699;">size</span>(640, 360);
179+
&nbsp;&nbsp;<span style="color: #006699;">background</span>(255);
180+
181+
&nbsp;&nbsp;<span style="color: #666666;">// Create triangle wave and envelope </span>
182+
&nbsp;&nbsp;triOsc&nbsp;=&nbsp;<span style="color: #33997E;">new</span> TriOsc(<span style="color: #33997E;">this</span>);
183+
&nbsp;&nbsp;env&nbsp;&nbsp;=&nbsp;<span style="color: #33997E;">new</span> Env(<span style="color: #33997E;">this</span>);
184+
}
185+
186+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
187+
188+
&nbsp;&nbsp;<span style="color: #666666;">// If value of trigger is equal to the computer clock and if not all </span>
189+
&nbsp;&nbsp;<span style="color: #666666;">// notes have been played yet, the next note gets triggered.</span>
190+
&nbsp;&nbsp;<span style="color: #669900;">if</span> ((<span style="color: #006699;">millis</span>() &gt; trigger) &amp;&amp; (note&lt;midiSequence.<span style="color: #33997E;">length</span>)) {
191+
192+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// midiToFreq transforms the MIDI value into a frequency in Hz which we use </span>
193+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">//to control the triangle oscillator with an amplitute of 0.8</span>
194+
&nbsp;&nbsp;&nbsp;&nbsp;triOsc.play(midiToFreq(midiSequence[note]),&nbsp;0.8);
195+
196+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// The envelope gets triggered with the oscillator as input and the times and </span>
197+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// levels we defined earlier</span>
198+
&nbsp;&nbsp;&nbsp;&nbsp;env.play(triOsc,&nbsp;attackTime,&nbsp;sustainTime,&nbsp;sustainLevel,&nbsp;releaseTime);
199+
200+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Create the new trigger according to predefined durations and speed</span>
201+
&nbsp;&nbsp;&nbsp;&nbsp;trigger&nbsp;=&nbsp;<span style="color: #006699;">millis</span>() + duration;
202+
203+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Advance by one note in the midiSequence;</span>
204+
&nbsp;&nbsp;&nbsp;&nbsp;note++;&nbsp;
205+
206+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Loop the sequence</span>
207+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #669900;">if</span> (note == 12) {
208+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;note&nbsp;=&nbsp;0;
209+
&nbsp;&nbsp;&nbsp;&nbsp;}
210+
&nbsp;&nbsp;}
211+
}&nbsp;
212+
213+
<span style="color: #666666;">//&nbsp;This&nbsp;function&nbsp;calculates&nbsp;the&nbsp;respective&nbsp;frequency&nbsp;of&nbsp;a&nbsp;MIDI&nbsp;note</span>
214+
<span style="color: #E2661A;">float</span> midiToFreq(<span style="color: #E2661A;">int</span> note) {
215+
&nbsp;&nbsp;<span style="color: #33997E;">return</span> (<span style="color: #006699;">pow</span>(2, ((note-69)/12.0)))*440;
216+
}
217+
218+
</pre>
219+
220+
<hr />
221+
222+
<pre>
223+
<span style="color: #666666;">/**</span>
224+
<span style="color: #666666;">&nbsp;*&nbsp;Processing&nbsp;Sound&nbsp;Library,&nbsp;Example&nbsp;3</span>
225+
<span style="color: #666666;">&nbsp;*&nbsp;</span>
226+
<span style="color: #666666;">&nbsp;*&nbsp;This&nbsp;example&nbsp;shows&nbsp;how&nbsp;to&nbsp;make&nbsp;a&nbsp;simple&nbsp;sampler&nbsp;and&nbsp;sequencer&nbsp;</span>
227+
<span style="color: #666666;">&nbsp;*&nbsp;with&nbsp;the&nbsp;Sound&nbsp;library.&nbsp;In&nbsp;this&nbsp;sketch,&nbsp;five&nbsp;different&nbsp;samples&nbsp;are&nbsp;</span>
228+
<span style="color: #666666;">&nbsp;*&nbsp;loaded&nbsp;and&nbsp;played&nbsp;back&nbsp;at&nbsp;different&nbsp;pitches,&nbsp;in&nbsp;this&nbsp;case&nbsp;five&nbsp;</span>
229+
<span style="color: #666666;">&nbsp;*&nbsp;different&nbsp;octaves.&nbsp;The&nbsp;sequencer&nbsp;triggers&nbsp;an&nbsp;event&nbsp;every&nbsp;200-1000&nbsp;</span>
230+
<span style="color: #666666;">&nbsp;*&nbsp;milliseconds&nbsp;randomly.&nbsp;Each&nbsp;time&nbsp;a&nbsp;sound&nbsp;is&nbsp;played&nbsp;a&nbsp;colored&nbsp;</span>
231+
<span style="color: #666666;">&nbsp;*&nbsp;rect&nbsp;with&nbsp;a&nbsp;random&nbsp;color&nbsp;is&nbsp;displayed.</span>
232+
<span style="color: #666666;">&nbsp;*/</span>
233+
234+
<span style="color: #33997E;">import</span> processing.sound.*;
235+
236+
SoundFile[]&nbsp;files;
237+
238+
<span style="color: #666666;">//&nbsp;Create&nbsp;an&nbsp;array&nbsp;of&nbsp;values&nbsp;which&nbsp;represent&nbsp;the&nbsp;octaves.&nbsp;</span>
239+
<span style="color: #666666;">//&nbsp;1.0&nbsp;is&nbsp;playback&nbsp;at&nbsp;normal&nbsp;speed,&nbsp;0.5&nbsp;is&nbsp;half&nbsp;and&nbsp;therefore&nbsp;</span>
240+
<span style="color: #666666;">//&nbsp;one&nbsp;octave&nbsp;down.&nbsp;2.0&nbsp;is&nbsp;double&nbsp;so&nbsp;one&nbsp;octave&nbsp;up.</span>
241+
<span style="color: #E2661A;">float</span>[] octave = {
242+
&nbsp;&nbsp;0.25,&nbsp;0.5,&nbsp;1.0,&nbsp;2.0,&nbsp;4.0
243+
};
244+
245+
<span style="color: #666666;">//&nbsp;The&nbsp;playSound&nbsp;array&nbsp;is&nbsp;defining&nbsp;how&nbsp;many&nbsp;samples&nbsp;will&nbsp;be&nbsp;</span>
246+
<span style="color: #666666;">//&nbsp;played&nbsp;at&nbsp;each&nbsp;trigger&nbsp;event</span>
247+
<span style="color: #E2661A;">int</span>[] playSound = {
248+
&nbsp;&nbsp;1,&nbsp;1,&nbsp;1,&nbsp;1,&nbsp;1
249+
};
250+
251+
<span style="color: #666666;">//&nbsp;The&nbsp;trigger&nbsp;is&nbsp;an&nbsp;integer&nbsp;number&nbsp;in&nbsp;milliseconds&nbsp;so&nbsp;we&nbsp;</span>
252+
<span style="color: #666666;">//&nbsp;can&nbsp;schedule&nbsp;new&nbsp;events&nbsp;in&nbsp;the&nbsp;draw&nbsp;loop</span>
253+
<span style="color: #E2661A;">int</span> trigger=0;
254+
255+
<span style="color: #666666;">//&nbsp;This&nbsp;array&nbsp;holds&nbsp;the&nbsp;pixel&nbsp;positions&nbsp;of&nbsp;the&nbsp;rectangles&nbsp;</span>
256+
<span style="color: #666666;">//&nbsp;that&nbsp;are&nbsp;drawn&nbsp;each&nbsp;event</span>
257+
<span style="color: #E2661A;">int</span>[] posx = {
258+
&nbsp;&nbsp;0,&nbsp;128,&nbsp;256,&nbsp;384,&nbsp;512
259+
};
260+
261+
262+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
263+
&nbsp;&nbsp;<span style="color: #006699;">size</span>(640, 360);
264+
&nbsp;&nbsp;<span style="color: #006699;">background</span>(255);
265+
266+
&nbsp;&nbsp;<span style="color: #666666;">// Create an array of 5 empty soundfiles</span>
267+
&nbsp;&nbsp;files&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SoundFile[5];
268+
269+
&nbsp;&nbsp;<span style="color: #666666;">// Load 5 soundfiles from a folder in a for loop. By naming </span>
270+
&nbsp;&nbsp;<span style="color: #666666;">// the files 1., 2., 3., [...], n.aif it is easy to iterate </span>
271+
&nbsp;&nbsp;<span style="color: #666666;">// through the folder and load all files in one line of code.</span>
272+
&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; files.<span style="color: #33997E;">length</span>; i++) {
273+
&nbsp;&nbsp;&nbsp;&nbsp;files[i]&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SoundFile(<span style="color: #33997E;">this</span>, (i+1) + <span style="color: #7D4793;">&quot;.aif&quot;</span>);
274+
&nbsp;&nbsp;}
275+
}
276+
277+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
278+
279+
&nbsp;&nbsp;<span style="color: #666666;">// If the determined trigger moment in time matches up with </span>
280+
&nbsp;&nbsp;<span style="color: #666666;">// the computer clock events get triggered.</span>
281+
&nbsp;&nbsp;<span style="color: #669900;">if</span> (<span style="color: #006699;">millis</span>() &gt; trigger) {
282+
283+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Redraw the background every time to erase old rects</span>
284+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006699;">background</span>(255);
285+
286+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// By iterating through the playSound array we check for </span>
287+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// 1 or 0, 1 plays a sound and draws a rect, for 0 nothing happens</span>
288+
289+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; files.<span style="color: #33997E;">length</span>; i++) {
290+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Check which indexes are 1 and 0.</span>
291+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #669900;">if</span> (playSound[i] == 1) {
292+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #E2661A;">float</span> rate;
293+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Choose a random color and get set to noStroke()</span>
294+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006699;">fill</span>(<span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(255)), <span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(255)), <span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(255)));
295+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006699;">noStroke</span>();
296+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Draw the rect in the positions we defined earlier in posx</span>
297+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #006699;">rect</span>(posx[i], 50, 128, 260);
298+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Choose a random index of the octave array</span>
299+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rate&nbsp;=&nbsp;octave[<span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(0, 5))];
300+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Play the soundfile from the array with the respective </span>
301+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// rate and loop set to false</span>
302+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files[i].play(rate,&nbsp;1.0);
303+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
304+
305+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Renew the indexes of playSound so that at the next event </span>
306+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// the order is different and randomized.</span>
307+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;playSound[i]&nbsp;=&nbsp;<span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(0, 2));
308+
&nbsp;&nbsp;&nbsp;&nbsp;}
309+
310+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Create a new triggertime in the future, with a random offset </span>
311+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// between 200 and 1000 milliseconds</span>
312+
&nbsp;&nbsp;&nbsp;&nbsp;trigger&nbsp;=&nbsp;<span style="color: #006699;">millis</span>() + <span style="color: #006699;">int</span>(<span style="color: #006699;">random</span>(200, 1000));
313+
&nbsp;&nbsp;}
314+
}
315+
316+
</pre>
317+
318+
<hr />
319+
320+
321+
322+
<hr />
136323

137324

138325

0 commit comments

Comments
 (0)