p5.js Web Editor | Quack quack

xxxxxxxxxx
let xyloX;
let notes = [60, 62, 64, 65, 67, 69, 71, 72]; // The midi notes of a scale
let osc;
let rX = 0;
let rY = 0;
let speed = 5;
​
function setup() {
  createCanvas(600, 600);
  time = millis();
  rectMode(CENTER);
  noStroke();
  /* This piece of code to create a triangle oscillator comes from this p5.js example: https://p5js.org/examples/hello-p5-song.html */
  osc = new p5.TriOsc(); // A Triangle Oscillator
  // Start silent
  osc.start();
  osc.amp(0);
}
​
/* This function to play the notes comes from this p5.js example: https://p5js.org/examples/hello-p5-song.html */
function playNote(note, duration) { // Play a Note
  osc.freq(midiToFreq(note)); 
  osc.fade(0.5,0.2); // Fade it in
  if (duration) { // Fade It Out
    setTimeout(function() {
      osc.fade(0,0.2);
    }, duration-50);
  }
}
​
function draw() {
  background(111, 71, 210);
  
  /* Draw Background Pattern */
  drawPattern();
​
  /* Show Text Instruction */
  textSize(18);
  textStyle(BOLD);
  textAlign(CENTER);
  text("Press the correct bar on the xylophone to play", 300, 200);
  
  /* Show the Notes */
  playNotes();
   
  
  /* Create Xylophone */
  drawXylophone();  
  
}
​
function drawPattern() {
  pW = 18.18
  push();
  fill(56, 71, 210); //Dark Blue
  rectMode(CORNER);
  rect(0, 0, pW, 600);
  rect(pW*2, 0, pW, 600);
  rect(pW*5, 0, pW*2, 600);
  rect(pW*8, 0, pW, 600);
  rect(pW*10, 0, pW, 600);
  rect(pW*12, 0, pW*2, 600);
  rect(pW*16, 0, pW, 600);
  rect(pW*18, 0, pW, 600);
  rect(pW*21, 0, pW, 600);
  rect(pW*23, 0, pW*2, 600);
  rect(pW*26, 0, pW, 600);
  rect(pW*28, 0, pW*2, 600);
  rect(pW*31, 0, pW, 600);
  pop();
}
​
function drawXylophone() { // Create Xylophone
​
  for (let x = 2; x < 11; x++) { 
    
    // Tone Bars
    xyloX = 100;
    if (mouseX > (xyloX*x/2 - 22.5) && mouseX < (xyloX*x/2 + 22.5) && mouseY > 400) {
      if (mouseIsPressed) { // If Clicking Bars
        fill(100,255,200); // Change Color to Green
       } else { // If Rolling Over Bars
         fill(255, 26, 106); // Change Color to Red
       } 
    } else { // If No Action
      fill(255 + x*7, 75 + x*2, 100 + x*15); // Keep Tone Bars Original Color
    }    
    rect(xyloX*x/2, 550, 45, height/2, 30, 30, 0, 0); // Create the Tone Bars
    
    // Round Nails
    for (let y = 2; y < 11; y++) { 
      fill(255, 230, 236); // Nails Color
      ellipse(xyloX*x/2, 450, 15, 15); // Nails
      // Numbers
      textSize(18);
      textAlign(CENTER);
      text(x-2, xyloX*x/2, 570);
    }
  }
}
​
/* This function to play the notes comes from this p5.js example, with some adjustment to work with the rest of this sketch: https://p5js.org/examples/hello-p5-song.html */
function mousePressed(event) { // Play Notes When Clicked
  if(event.button == 0 && event.clientX < 517 && event.clientX > 82 && event.clientY > 400) {
    // Map mouse to the key index
    let key = floor(map(mouseX, 82, 517, 0, notes.length));
    playNote(notes[key]);
  }
}
​
/* This function to play the notes comes from this p5.js example: https://p5js.org/examples/hello-p5-song.html */
function mouseReleased() { // Fade Out
  osc.fade(0,0.5);
}
​
function playNotes() { //note to self: find a way to shorten this
  if (millis() > 0 && millis() < 2000) { //1
    instruction(150);
  } else if (millis() > 2000 && millis() < 4000) { //6
    instruction(400);
  } else if (millis() > 4000 && millis() < 6000) { //2
    instruction(200);
  } else if (millis() > 8000 && millis() < 10000) { //1
    instruction(150);
  } else if (millis() > 10000 && millis() < 12000) { //4
    instruction(300);
  } else if (millis() > 12000 && millis() < 14000) { //2
    instruction(200);
  } else if (millis() > 16000 && millis() < 18000) { //0
    instruction(100);
  } else if (millis() > 18000 && millis() < 20000) { //5
    instruction(350);
  } else if (millis() > 20000 && millis() < 22000) { //6
    instruction(400);
  } else if (millis() > 24000 && millis() < 26000) { //1
    instruction(150);
  } else if (millis() > 26000 && millis() < 28000) { //4
    instruction(300);
  } else if (millis() > 28000 && millis() < 30000) { //7
    instruction(450);
  } else if (millis() > 32000 && millis() < 34000) { //1
    instruction(150);
  } else if (millis() > 34000 && millis() < 36000) { //7
    instruction(450);
  } else if (millis() > 36000 && millis() < 38000) { //1
    instruction(150);
  } else if (millis() > 40000 && millis() < 42000) { //0
    instruction(100);
  } else if (millis() > 42000 && millis() < 44000) { //5
    instruction(350);
  } else if (millis() > 44000 && millis() < 46000) { //7
    instruction(450);
  } else if (millis() > 48000 && millis() < 50000) { //1
    instruction(150);
  } else if (millis() > 50000 && millis() < 52000) { //6
    instruction(400);
  } else if (millis() > 52000 && millis() < 54000) { //2
    instruction(200);
  } else if (millis() > 56000 && millis() < 58000) { //1
    instruction(150);
  } else if (millis() > 58000 && millis() < 60000) { //7
    instruction(450);
  } else if (millis() > 60000 && millis() < 62000) { //2
    instruction(200);
  } else if (millis() > 64000 && millis() < 66000) { //1
    instruction(150);
  } else if (millis() > 66000 && millis() < 68000) { //6
    instruction(400);
  } else if (millis() > 68000 && millis() < 70000) { //0
    instruction(100);
  } else if (millis() > 72000 && millis() < 74000) { //1
    instruction(150);
  } else if (millis() > 74000 && millis() < 76000) { //6
    instruction(400);
  } else if (millis() > 76000 && millis() < 78000) { //5
    instruction(350);
  } else if (millis() > 80000 && millis() < 82000) { //1
    instruction(150);
  } else if (millis() > 82000 && millis() < 84000) { //4
    instruction(300);
  } else if (millis() > 84000 && millis() < 86000) { //6
    instruction(400);
  } else if (millis() > 88000 && millis() < 90000) { //1
    instruction(150);
  } else if (millis() > 90000 && millis() < 92000) { //6
    instruction(400);
  } else if (millis() > 92000 && millis() < 94000) { //7
    instruction(450);
  }
}
​
function instruction(rX) {
  fill(100,255,200);
  rect(rX, rY, 20, 20);
  if (rY < 600) {
    rY = rY + speed;
  } else {
    rY = 0;
  }
}
Cookies

Sketch Files

Console

Preview
