var soundUp, soundDown, soundLeft, soundRight;

function preload() {

  soundUp = loadSound("./sounds/up.ogg");

  soundDown = loadSound("./sounds/down.ogg");

  soundLeft = loadSound("./sounds/left.ogg");

  soundRight = loadSound("./sounds/right.ogg");

}

​

function setup() {

  createCanvas(800, 800)

  angleMode(DEGREES)

  amplitude = new p5.Amplitude()

}

​

function draw() {

  background(255)

  noFill()

  translate(400, 400)

​

  if (keyIsPressed) {

    if (keyCode == UP_ARROW) {

      drawUp()

      playUp()

    }

    if (keyCode == DOWN_ARROW) {

      drawDown()

      playDown()

    }

    if (keyCode == LEFT_ARROW) {

      drawLeft()

      playLeft()

    }

    if (keyCode == RIGHT_ARROW) {

      drawRight()

      playRight()

    }

  } else {

    pauseAllSounds()

  }

}

​

function drawUp() {

  stroke("red")

  for (var count = 0; count < 50; count += 1) {

    var radius = 100 + (5 * count)

    drawNoisyCircle(0, 0, radius)

  }

}

function playUp() {

  if (!soundUp.isPlaying()) {

    pauseAllSounds()

    soundUp.loop()    

  }

}

​

function drawDown() {

  stroke("blue")

  for (var count = 0; count < 50; count += 1) {

    var radius = 100 + (5 * count)

    drawNoisyCircle(0, 0, radius)

  }

}

function playDown() {

  if (!soundDown.isPlaying()) {

    pauseAllSounds()

    soundDown.loop()    

  }

}

​

​

function drawLeft() {

  stroke("green")

  for (var count = 0; count < 50; count += 1) {

    var radius = 100 + (5 * count)

    drawNoisyCircle(0, 0, radius)

  }

}

function playLeft() {

  if (!soundLeft.isPlaying()) {

    pauseAllSounds()

    soundLeft.loop()    

  }

}

​

function drawRight() {

  stroke("orange")

  for (var count = 0; count < 50; count += 1) {

    var radius = 100 + (5 * count)

    drawNoisyCircle(0, 0, radius)

  }

}

function playRight() {

  if (!soundRight.isPlaying()) {

    pauseAllSounds()

    soundRight.loop()    

  }

}

​

function drawNoisyCircle(x, y, radius) {

  push()

  translate(x, y)

  beginShape()

  for (var i = 0; i < 360; i += 5) {

    var noiseOffset = map(noise(i * 0.03), 0, 1, -30, 30)

    var soundLevel = amplitude.getLevel()

    var soundOffset = map(soundLevel, 0, 0.1, -10, 10)

    var timeOffset = map(sin(frameCount * i / 1000), -1, 1, -10, 10)

    var px = (radius + noiseOffset + timeOffset) * sin(i + soundOffset + timeOffset)

    var py = (radius + noiseOffset + timeOffset) * cos(i + soundOffset + timeOffset)

    vertex(px, py)

  }

  endShape(CLOSE)

  pop()

}

​

function pauseAllSounds() {

  soundUp.pause()

  soundDown.pause()

  soundLeft.pause()

  soundRight.pause()

}