Übung 47

Sie haben in einer früheren Übung bereits mit p5.js gearbeitet. Bearbeiten Sie diese Übung bitte im p5.js-Editor.

Werden Sie Ludwig van Beathoven! Machen Sie sich mit der Funktionsweise des in https://p5js.org/reference/#/p5.PolySynth abgedruckten Programms vertraut. Es demonstriert, wie man mit der Bibliothek p5.sound musikalische Noten mit der Methode play() abspielt.

Die musikalischen Noten werden grundsätzlich wie folgt angegeben, sortiert von der niedrigsten zur höchsten Tonhöhe:

C1, C#1, D1, D#1, E1, F1, F#1, G1, G#1, A2, A#2, b2, C2, C#2, D2, D#2, E2, F2, F#2, G2, G#2, A3, A#3, b3, …

Die “erhöhten Noten” mit “#” sind “Cis”, “Dis”, “Fis”, “Gis”. “b” entspricht der Note “H”. Bestimmt kann man auch “verminderte Noten” angeben, also “Des”, “Es”, “Ges”, “Aes”. Leider haben wir für die Bibliothek keine Tabelle der erlaubten Noten und keine Erläuterungen dazu gefunden.

Hinter jeden Note folgt eine Zahl, die die sog. Oktavlage angibt. Eine Oktave in der Musik umfaßt immer zwölf sog. Halbtöne. Auf einem Klavier sind benachbarte Halbtöne immer eine scharze und eine weiße Taste mit Ausnahme der Paare E, F und H, C.

Das folgende Programm ist eine Modifikation des oben erwähnten Programms von der Webseite.

Das Programm liest musikalische Noten wie G2, A3, C4, … innerhalb einer for-Schleife aus einem Array und spielt diese mittels polySynth.play(…) hintereinander ab.

“Komponieren” Sie mit dieser Technik Ihre eigene Melodie, mit der Sie Ihre Stimmung ausdrücken, die Ihre ersten Eindrücke an unserer Hochschule beschreibt. ;-) Ihre Melodie sollte aus mindestens 20 Noten bestehen und darf einstimmig sein. Die Noten Ihrer Melodie dürfen nicht alle gleich lang sein.

Im Array sind hintereinander Paare aus der zu spielenden Note und dann ihre Dauer gespeichert. Die Methode polySynth.play() erwartet als Parameter allerdings den Zeitpunkt, zu dem eine Note abgespielt wird, nicht ihre Tonlänge. Mit einem gedanklichen Kniff klappt das aber trotzdem.

Erläutern Sie bitte, worin dieser Kniff besteht.

Die folgende Seite beschäftigt sich mit dem Thema “Arrays in p5.js”: https://happycoding.io/tutorials/p5js/arrays.

Zeigen Sie Ihr fertiges Programm in Ihrem Blog.

Mein Musikstück:

https://editor.p5js.org/ich/sketches/m9ZBLq3pP

let polySynth

let melody = [
  '',
  '1',
  'C3',
  '1',
  'E3',
  '1',
  'F3',
  '1',
  'C4',
  '2',
  'C3',
  '1',
  'E3',
  '1',
  'F3',
  '1',
  'E4',
  '2',
  'C3',
  '1',
  'E3',
  '1',
  'F3',
  '1',
  'F4',
  '2',
  'F5',
  '1',
  'E5',
  '1',
  'C5',
  '1',
  'E5',
  '1',
  'F5',
  '1',
  'A5',
  '2',
  'C6',
  '2',
]

function setup() {
  let cnv = createCanvas(100, 100)
  cnv.mousePressed(playSynth)
  background(220)
  text('click to play', 20, 20)

  polySynth = new p5.PolySynth()
}

function playSynth() {
  userStartAudio()

  // note duration (in seconds)
  let dur = 0.1

  // time from now (in seconds)
  let time = 0

  // velocity (volume, from 0 to 1)
  let vel = 0.5

  for (let i = 2; i < melody.length; i = i + 2) {
    let note = melody[i]
    let on = 0.2 * parseFloat(melody[i - 1])
    polySynth.play(note, vel, (time += on), dur)
  }
}