Moving to the Music

With synths in the scene, the effects can move to the music.

playNotes("C2 - C2 C2 - C2 G1 -", 0.25, { repeat: true })

const shine = glow(0.5)
react(shine, "strength", "bass", { from: 0.4, to: 1.5 })     // the glow follows the bass

function draw() {
  background("black")
  circle(width / 2, height / 2, 60, "gold")
}

react ties a setting of an effect to the music: here the glow's strength is 0.4 when there is no bass and 1.5 when there is all of it. In JavaScript the two ends are { from, to }; in Python they are the two numbers after the band.

The five numbers

Five numbers follow the sound, each from 0 to 1 and smoothed so that they look musical:

They are the bands react takes by name: "bass", "mids", "highs", "loudness" and "pulse". Use the numbers anywhere in your own drawing:

function draw() {
  background("black")
  circle(width / 2, height / 2, 20 + 60 * bass(), "tomato")
}

In JavaScript a setting can be given them as a function, which is asked every frame:

const shine = glow(0.5)
shine.strength = () => 0.3 + bass()

In Python the five numbers are what the page last told your program, so they are a frame late: fine for the size of a circle, and react is there for anything that must be exact, because it is done in the page, on the beat.

Quiet music moves the numbers as much as loud: they are measured against how loud it has been lately. With nothing to listen to they are 0, and nothing goes wrong.

What to listen to

const lead = makeSynth("lead")
listenTo(lead)                    // this synth alone

listenTo says what the music is taken from: a synth, a song, the microphone (listenTo(useMicrophone())), or all the sound (listenTo(soundOutput())). In a pictures.js scene the effects will listen to all the sound by themselves; in Python, say listen_to(sound_output()) once.

The music, drawn

Five effects draw the sound itself: spectrumBars, spectrumRing, waveformRing, beatFlash and bassShake. Each is one line:

playNotes("C2 E2 G2 C3", 0.25, { repeat: true })
spectrumBars("fire")

function draw() {
  background()
}

The music, drawn has a picture of each, and its settings.

Exactly on the beat

For motion that is exactly on the beat, the sound library's own clock is better than listening. beat() is from synths:

setTempo(120)
const pattern = kaleidoscope(6)
pattern.angle = () => beat() * 45

A whole visualiser

A short tune, and a picture that moves to it:

const STEP = 0.134
makeSynth("kick").playNotes("C2 - - - C2 - - C2", STEP, { repeat: true })
makeSynth("hat").playNotes("- - C5 - - - C5 C5", STEP, { repeat: true })
makeSynth("bass").playNotes("C2:2 C2 - C3 - C2:2 A1:2 A1 - A2 - A1:2", STEP, { repeat: true })

kaleidoscope(6)
const tail = trails(0.7, { zoom: 1.5, spin: 25, hue: 90 })
const shine = glow(0.7, { radius: 36 })
vignette(0.5)
react(shine, "strength", "bass", { from: 0.4, to: 1.5 })
react(tail, "zoom", "pulse", { from: 1.3, to: 2.6 })

function draw() {
  background("black")
  circle(width / 2 + 70, height / 2 + 20, 12 + 26 * bass(), "tomato")
  star(width / 2 + 150, height / 2 + 40, 10 + 22 * mids(), 5, "gold")
}

Tap to enlarge

A browser keeps a page silent until it is clicked or tapped, so the music, and the movement with it, begins at the first touch.

Related

• Notes, chords and tunes
• Every effect