You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/tutorials/en/simple-melody-app.mdx
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ import Callout from "../../../components/Callout/index.astro";
20
20
21
21
## Introduction
22
22
23
-
[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear. In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.Oscillator) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
23
+
[Music](https://www.britannica.com/art/music) is used by cultures around the world as a way to communicate their histories, emotions and experiences by combining vocal or instrumental [sounds](https://www.britannica.com/science/sound-physics). One of music's basic elements is a [*melody:*](https://www.masterclass.com/articles/music-101-what-is-melody) a group of musical notes that form compositions of sounds that are pleasing to hear. In this tutorial you will explore how to use [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate musical notes, and develop an web application where users create melodies, and play them back!
24
24
25
25
This tutorial is part 1 in a series of 3 tutorials that walk you through creating different versions of a melody app.
26
26
@@ -62,7 +62,7 @@ Skip to [Play musical notes with oscillators](https://docs.google.com/document/d
[`p5.Oscillator`](/reference/p5.Oscillator) objects hold information to generate electrical signals called [oscillators ](https://www.techtarget.com/whatis/definition/oscillator)that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound!
65
+
[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects hold information to generate electrical signals called [oscillators ](https://www.techtarget.com/whatis/definition/oscillator)that can play [musical notes](https://www.simplifyingtheory.com/music-note/). These signals change between a minimum and maximum value in a pattern that repeats at a specific rate. When the signal is played through your speakers, we can hear that it generates a sound!
66
66
67
67
To understand how oscillators generate musical notes, we can dive into some science behind [sound](https://www.britannica.com/science/sound-physics).
68
68
@@ -188,7 +188,7 @@ Identify a frequency that matches a musical note, and store it in a global varia
188
188
189
189
Visit [this resource](https://www.idrumtune.com/ultimate-guide-to-musical-frequencies/) for a list of musical notes and corresponding frequencies. [Middle C](https://www.sciencedirect.com/topics/mathematics/middle-c) has a frequency of 262 Hz.
190
190
191
-
Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.Oscillator) object.
191
+
Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object.
192
192
193
193
- Add this code above `setup():`
194
194
@@ -197,7 +197,7 @@ Declare a global variable that will store the [`p5.Oscillator`](/reference/p5.Os
197
197
let osc;
198
198
```
199
199
200
-
Initialize `osc` with a [`p5.Oscillator`](/reference/p5.Oscillator) object using `myFreq` as an argument.
200
+
Initialize `osc` with a [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object using `myFreq` as an argument.
201
201
202
202
- Add this code in `setup()`:
203
203
@@ -218,7 +218,7 @@ r {started: false, phaseAmount: undefined, oscillator: OscillatorNode, f: 262, o
218
218
219
219
You can confirm that you created an oscillator object with the correct frequency by examining the “`f`” property in the console, or printing it using `console.log(osc.f).` The frequency in the `osc.f` should match the frequency you identified for your note.
220
220
221
-
Visit the [`p5.Oscillator`](/reference/p5.Oscillator) reference to learn more about the properties in p5.Oscillator objects. [See this resource](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) for a chart that lists the frequencies for specific musical notes.
221
+
Visit the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) reference to learn more about the properties in p5.Oscillator objects. [See this resource](https://mixbutton.com/mixing-articles/music-note-to-frequency-chart/) for a chart that lists the frequencies for specific musical notes.
222
222
223
223
Your sketch.js file should look like this:
224
224
@@ -316,7 +316,7 @@ function mousePressed() {
316
316
317
317
In the code above, a new `p5.Oscillator` object is initialized with a frequency of 262 Hz and stored in the `osc` variable. The user can start and stop the oscillator by clicking the canvas. To add this interactivity, you added a conditional statement in `mousePress()` that used the oscillators `.started` property to check if the oscillator has started playing already. `osc.started` is `true` if the oscillator has started, and `false` otherwise. If the oscillator has started, the conditional instructs the program to stop the oscillator using the `.stop()` function, otherwise the oscillator starts using the `.start()` function.
318
318
319
-
Visit the p5.js reference for [`p5.Oscillator`](/reference/p5.Oscillator) to learn more about its functions and properties.
319
+
Visit the p5.js reference for [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) to learn more about its functions and properties.
Visit these resources to explore more about [other musical scales](https://piano-music-theory.com/2016/05/31/major-scales/), [octaves](https://www.masterclass.com/articles/music-101-what-is-an-octave), [melody composition and scales](https://pulse.berklee.edu/?id=4\&lesson=73), and [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm).
555
555
556
-
This project uses [`p5.Oscillator`](/reference/p5.Oscillator) objects to generate the musical notes that will play during a melody. We learned to initialize a new [`p5.Oscillator`](/reference/p5.Oscillator) object in a variable with a specific frequency in Step 1. To generate oscillators for a musical scale, we can initialize multiple [`p5.Oscillator`](/reference/p5.Oscillator) objects with different frequencies in an array.
556
+
This project uses [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects to generate the musical notes that will play during a melody. We learned to initialize a new [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) object in a variable with a specific frequency in Step 1. To generate oscillators for a musical scale, we can initialize multiple [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects with different frequencies in an array.
557
557
558
558
To learn more about arrays, visit the MDN resource for [JavaScript Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).
559
559
@@ -597,9 +597,9 @@ Declare a global variable `myFreq` and initialize it the frequency of the first
597
597
];
598
598
```
599
599
600
-
Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note in [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm).
600
+
Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note in [C Major](https://ux1.eiu.edu/~cfadd/3050/Adventures/chapter_12/ch12_4.htm).
601
601
602
-
- Create a global variable called `oscillators` and initialize it with an empty array. This array will hold the [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note.
602
+
- Create a global variable called `oscillators` and initialize it with an empty array. This array will hold the [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note.
603
603
- Add this code above `setup()`:
604
604
605
605
```js
@@ -618,7 +618,7 @@ Access the elements in the `frequencies` array to initialize [`p5.Oscillator`](/
618
618
}
619
619
```
620
620
621
-
Here you use a `for` loop to access each frequency in the `frequencies` array to initialize new [`p5.Oscillator`](/reference/p5.Oscillator) objects for each note. Each oscillator object is stored in the `oscillators` array.
621
+
Here you use a `for` loop to access each frequency in the `frequencies` array to initialize new [`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects for each note. Each oscillator object is stored in the `oscillators` array.
622
622
623
623
<Callouttitle="Note">
624
624
The index of for specific frequencies in the `frequencies` array match the index of oscillator objects in the `oscillators` array.
@@ -675,7 +675,7 @@ function draw() {
675
675
}
676
676
```
677
677
678
-
[`p5.Oscillator`](/reference/p5.Oscillator) objects have methods such as `.start()`, `.stop()`, and `.amp()` that help control the intensity of the sound they produce. They also have properties such a `.f` and `.started` that store, respectively, its frequency in Hz, and a boolean value that is `true` when the oscillator starts, and `false` otherwise. We will use these to add more interactive elements to the sketch later on.
678
+
[`p5.Oscillator`](/reference/p5.sound/p5.Oscillator/) objects have methods such as `.start()`, `.stop()`, and `.amp()` that help control the intensity of the sound they produce. They also have properties such a `.f` and `.started` that store, respectively, its frequency in Hz, and a boolean value that is `true` when the oscillator starts, and `false` otherwise. We will use these to add more interactive elements to the sketch later on.
0 commit comments