Today’s Exercise:

• Play/Discuss one song from Discord
• Question of the Day (we did not do this last week): What elements do we think are important within a musical ensemble?
• Workshop that continues upon last week’s work
  • P5 Sliders
  • Tone.Player() parameters and methods
    • Controlling Loops: start, end, reverse
    • Playback Speed and Volume
    • Notes
    • Buffer and Splice
  • Tone.Sampler()
• Group Work - break out into groups of 4
  • Using the Post-It notes, have your team come up with the top 5 elements that we think are important within a musical ensemble (10 mins)
  • For the rest of the lab class, we are going to build out a sketch that will let us play music together. It is important that we work together on this project. As a suggestion, I would assign roles to each member of the group:
    • Development Lead, Developer, User Interface Lead, Music Director, Content Researcher, Art Director
    • As a group discuss a particular vibe or arc of the music that you want to perform later in the day
  • By the end of the class, each of the 4 groups will present what they have.
• Upload your completed sketch to the Discord Server.

P5 Sliders

A slider is a user interface element that lets us move the position of a slider to get a number between a range. The following code will add a slider to a sketch that allows us to select a number from 0 to 100 (with a default at the start of 50). Each time the value is changed we will display the value of the slider in the console window. Note we write to the console window just so we can see it is working, in the future, we will use the slider or similar elements to control properties of our sounds (for instance, volume, playback speed, etc). Check it out on the P5 Editor.

let slider;

function setup() {
  createCanvas(400, 400);
  slider = createSlider(0, 100,50);
  slider.position(100,260);
  slider.input(sliderChanged);
}

function sliderChanged() {
  console.log(slider.value());
}

function draw() {
  background(220);
}

Making a Circle act like a button

We covered an additional user interface topic that was brought to our attention, what if we want to make a circle behave like a button? The following is an example of how to make a circle become a user interface element with the ability to accept a click. Check it out on the P5 Editor:

let mouseWithinCircle=false;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  mouseWithinCircle=dist(100,100,mouseX,mouseY)<75/2;
  if (mouseWithinCircle) {
    fill(100,40,70);
  } else {
    fill(0,200,50);
  }
  circle(100,100,75);
}

function mousePressed() {
  if (mouseWithinCircle) {
    alert("Clicked");
  } 
}

Tone.JS Player Object - Additional Parameters and Methods

Changing the Volume:

player.volume.value=-10;

Changing the speed that the Sample is played: