We reviewed the class structure with the following presentation

https://docs.google.com/presentation/d/1YNThqe2D2pWwpESw0inBHdUvweoxqpUwr-WGBU1uzUg/edit?usp=sharing

Today’s Exercise:

• Question of the Day: What elements do we think are important within a musical ensemble?
• Re-Familiarize yourself with the P5 Editor and the computers in the lab
• Include Tone.JS within index.html
• Create a sketch that plays some samples, some possibilities: 1) Add buttons to the user interface and have the buttons trigger samples; 2) Maybe different keys on your computer play different samples; 3) Discover samples you like, find your own audio clips or feel free to look at the SuperDirt samples at: https://github.com/tidalcycles/Dirt-Samples
• Upload your completed sketch to the Discord Server.

Using P5 to Play Samples

After getting some feedback from the class to determine everyone’s familiarity with P5, we decided it would be useful to create a mini workshop on using P5 to play samples. The following are the steps we took to to familiarize ourself with P5 basics and to play our first samples:

Basic structure of a P5 sketch:

We learned that in a P5 sketch, setup is called once at the beginning of the sketch and draw is called may times per second. The following sketch just creates a 400 x 400 empty canvas and then draws a rectangle. Check it out on P5 Editor :

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

function draw() {
  background(220);
	rect(20,20,100,50);
}

We then added a button to the sketch. We also created a function that gets called (btn1Pressed) when the button is pressed. Check it out on P5 Editor :

function setup() {
  createCanvas(400, 400);
  
  btn1=createButton("My First Button");
  btn1.position(20,200);
  btn1.mousePressed(btn1Pressed);
}

function btn1Pressed() {
  alert("Button 1 Pressed");
}

function draw() {
  background(220);
  rect(20,20,100,50);
}

We also saw an example of how the draw is called continuosly by drawing a circle wherever the mouse is located. Note in the example below we moved the background out of the draw routine and moved it to setup so that it would not redraw the background (and clearing the screen) with each draw. We used the ellipse function to draw a circle. We also introduced the mouseX, mouseY variables that are built in P5 variables that hold the mouse position. Check it out in the P5 Editor :

function setup() {
  createCanvas(400, 400);
  background(130,50,200);
}

function draw() {
  fill(0,255,255);
  text("Move Your Mouse Within this Window",30,350);
  ellipse(mouseX,mouseY,50);
}

Some Concepts you should understand:

• You should become familiar with the P5 Editor. Register and create an account.
• Be sure you name and save your sketch.