Skip to content

Commit 76e4b12

Browse files
committed
Adjustments to CSS for Tutorials, part 28
1 parent c1f4a39 commit 76e4b12

File tree

2 files changed

+46
-52
lines changed

2 files changed

+46
-52
lines changed

content/static/tutorials/sound/index.html

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -82,52 +82,52 @@ <h3>Code</h3>
8282
<p class="txt">Example 1</p>
8383

8484
<pre>
85-
<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>
89-
<span style="color: #666666;">&nbsp;*/</span>
90-
91-
<span style="color: #33997E;">import</span> processing.sound.*;
92-
93-
SinOsc[]&nbsp;sineWaves;&nbsp;<span style="color: #666666;">// Array of sines</span>
94-
<span style="color: #E2661A;">float</span>[] sineFreq; <span style="color: #666666;">// Array of frequencies</span>
95-
<span style="color: #E2661A;">int</span> numSines = 5; <span style="color: #666666;">// Number of oscillators to use</span>
96-
97-
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
98-
&nbsp;&nbsp;<span style="color: #006699;">size</span>(640, 360);
99-
&nbsp;&nbsp;<span style="color: #006699;">background</span>(255);
100-
101-
&nbsp;&nbsp;sineWaves&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SinOsc[numSines]; <span style="color: #666666;">// Initialize the oscillators</span>
102-
&nbsp;&nbsp;sineFreq&nbsp;=&nbsp;<span style="color: #33997E;">new</span> <span style="color: #E2661A;">float</span>[numSines]; <span style="color: #666666;">// Initialize array for Frequencies</span>
103-
104-
&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; numSines; i++) {
105-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Calculate the amplitude for each oscillator</span>
106-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #E2661A;">float</span> sineVolume = (1.0 / numSines) / (i + 1);
107-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Create the oscillators</span>
108-
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i]&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SinOsc(<span style="color: #33997E;">this</span>);
109-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Start Oscillators</span>
110-
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].play();
111-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Set the amplitudes for all oscillators</span>
112-
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].amp(sineVolume);
113-
&nbsp;&nbsp;}
114-
}
115-
116-
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
117-
118-
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY from 0 to 1</span>
119-
&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);
120-
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY logarithmically to 150 - 1150 to create a base frequency range</span>
121-
&nbsp;&nbsp;<span style="color: #E2661A;">float</span> frequency = <span style="color: #006699;">pow</span>(1000, yoffset) + 150;
122-
&nbsp;&nbsp;<span style="color: #666666;">//Use mouseX mapped from -0.5 to 0.5 as a detune argument</span>
123-
&nbsp;&nbsp;<span style="color: #E2661A;">float</span> detune = <span style="color: #006699;">map</span>(<span style="color: #D94A7A;">mouseX</span>, 0, <span style="color: #D94A7A;">width</span>, -0.5, 0.5);
124-
125-
&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; numSines; i++) {
126-
&nbsp;&nbsp;&nbsp;&nbsp;sineFreq[i]&nbsp;=&nbsp;frequency&nbsp;*&nbsp;(i&nbsp;+&nbsp;1&nbsp;*&nbsp;detune);
127-
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Set the frequencies for all oscillators</span>
128-
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].freq(sineFreq[i]);
129-
&nbsp;&nbsp;}
130-
}
85+
<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>
89+
<span style="color: #666666;">&nbsp;*/</span>
90+
91+
<span style="color: #33997E;">import</span> processing.sound.*;
92+
93+
SinOsc[]&nbsp;sineWaves;&nbsp;<span style="color: #666666;">// Array of sines</span>
94+
<span style="color: #E2661A;">float</span>[] sineFreq; <span style="color: #666666;">// Array of frequencies</span>
95+
<span style="color: #E2661A;">int</span> numSines = 5; <span style="color: #666666;">// Number of oscillators to use</span>
96+
97+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
98+
&nbsp;&nbsp;<span style="color: #006699;">size</span>(640, 360);
99+
&nbsp;&nbsp;<span style="color: #006699;">background</span>(255);
100+
101+
&nbsp;&nbsp;sineWaves&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SinOsc[numSines]; <span style="color: #666666;">// Initialize the oscillators</span>
102+
&nbsp;&nbsp;sineFreq&nbsp;=&nbsp;<span style="color: #33997E;">new</span> <span style="color: #E2661A;">float</span>[numSines]; <span style="color: #666666;">// Initialize array for Frequencies</span>
103+
104+
&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; numSines; i++) {
105+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Calculate the amplitude for each oscillator</span>
106+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #E2661A;">float</span> sineVolume = (1.0 / numSines) / (i + 1);
107+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Create the oscillators</span>
108+
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i]&nbsp;=&nbsp;<span style="color: #33997E;">new</span> SinOsc(<span style="color: #33997E;">this</span>);
109+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Start Oscillators</span>
110+
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].play();
111+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Set the amplitudes for all oscillators</span>
112+
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].amp(sineVolume);
113+
&nbsp;&nbsp;}
114+
}
115+
116+
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>() {
117+
118+
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY from 0 to 1</span>
119+
&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);
120+
&nbsp;&nbsp;<span style="color: #666666;">//Map mouseY logarithmically to 150 - 1150 to create a base frequency range</span>
121+
&nbsp;&nbsp;<span style="color: #E2661A;">float</span> frequency = <span style="color: #006699;">pow</span>(1000, yoffset) + 150;
122+
&nbsp;&nbsp;<span style="color: #666666;">//Use mouseX mapped from -0.5 to 0.5 as a detune argument</span>
123+
&nbsp;&nbsp;<span style="color: #E2661A;">float</span> detune = <span style="color: #006699;">map</span>(<span style="color: #D94A7A;">mouseX</span>, 0, <span style="color: #D94A7A;">width</span>, -0.5, 0.5);
124+
125+
&nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i &lt; numSines; i++) {
126+
&nbsp;&nbsp;&nbsp;&nbsp;sineFreq[i]&nbsp;=&nbsp;frequency&nbsp;*&nbsp;(i&nbsp;+&nbsp;1&nbsp;*&nbsp;detune);
127+
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #666666;">// Set the frequencies for all oscillators</span>
128+
&nbsp;&nbsp;&nbsp;&nbsp;sineWaves[i].freq(sineFreq[i]);
129+
&nbsp;&nbsp;}
130+
}
131131
</pre>
132132

133133
<hr />

css/style.css

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,6 @@ h6 { font-size : 1em; }
491491
p { font-size : 1em; }
492492

493493
pre {
494-
display : inline;
495494
font-family : monaco, "Courier New", Courier, monospace;
496495
font-size : 11px;
497496
line-height : normal; color: #000000;
@@ -1159,11 +1158,6 @@ h2 { margin-bottom: 0; margin-top: 0;}
11591158
background-color: #eee;
11601159
}
11611160

1162-
#Tutorials pre {
1163-
display: inline;
1164-
margin-left: 0px;
1165-
}
1166-
11671161
#Tutorials p.txt {
11681162
color: #00CCFF;
11691163
margin-top: 0em;

0 commit comments

Comments
 (0)