Class structure slides

https://docs.google.com/presentation/d/15LADDpWzgYchJ5cvN1SlAMCc4Hj-SG1cSbtzXIC4Sp0/edit?usp=sharing

Today’s Exercise:

• Re-Familiarize yourself with the P5 Editor and the computers in the lab
• 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 “Week 1” of the Discord Server - Week 1.

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);
}

Using conditional statements, i.e. if … then …. else …. to control different blocks of code from running under different conditions. (i.e. we will use the mouse position to create different conditions):