// Batool Al Tameemi 

// Prompt from list 2: Walk through Pan, Amplitude, Pitch (as opposed to XYZ)

let oscillator;

let panValue = 0; // Pan (ranges from -1 to 1)

let amplitudeValue = 0.5; // Amplitude (ranges from 0 to 1)

let pitchValue = 440; // Pitch (in Hz)

​

function setup() {

  createCanvas(400, 400, WEBGL); // Use WebGL for 3D graphics

  oscillator = new p5.Oscillator(); // Create an oscillator

  oscillator.setType('sine'); // Sine wave for a clean tone

  oscillator.freq(pitchValue); // Set the initial pitch

  oscillator.amp(amplitudeValue); // Set the initial amplitude

  oscillator.pan(panValue); // Set the initial pan position

  oscillator.start(); // Start the oscillator

}

​

function draw() {

  background(220);

​

  // Display the current parameter values

  fill(0);

  text(`Pan: ${panValue.toFixed(2)}`, -180, -180);

  text(`Amplitude: ${amplitudeValue.toFixed(2)}`, -180, -160);

  text(`Pitch: ${pitchValue.toFixed(2)} Hz`, -180, -140);

​

  // Modify the parameters over time

  panValue = map(sin(frameCount * 0.02), -1, 1, -1, 1); // Pan oscillates

  amplitudeValue = map(sin(frameCount * 0.05), -1, 1, 0, 1); // Amplitude oscillates

  pitchValue = map(sin(frameCount * 0.1), -1, 1, 220, 880); // Pitch oscillates

​

  // Apply the updated parameters to the oscillator

  oscillator.pan(panValue);

  oscillator.amp(amplitudeValue);

  oscillator.freq(pitchValue);

​

  // Visual representation of the pan position

  let x = map(panValue, -1, 1, -width / 2, width / 2);

  stroke(0);

  line(x, -height / 2, x, height / 2);

​

  // Rotate the scene based on parameters

  rotateX(frameCount * 0.01);

  rotateY(frameCount * 0.01);

  rotateZ(frameCount * 0.01);

​

  // Create a box to represent the 3D space

  noFill();

  stroke(50);

  box(200);

}

​