final project proposal

12.4.22

​

  ///i'm going to make a sound sampler

  the sounds are going to be music notes

  user will hit keyboard keys to play samples

    each note will have its own note illustartion///

​

Michal Shahaf */

​

var slideNumber = 0;

var totalSlides = 4;

​

var description =

  "I'm going to continue working with my sound sampler project. In the project I am going to present a ׳virtual׳ piano that can be played. I will add several chords as well.";

​

var interaction =

  "Pressing any of the designated keyboard keys will start playing notes. In addition, buttons activated by a mouse press will trigger the playing of different chords.";

​

var visuals =

  "The visuals will contain P5 shapes simulating notes in a music notebook.";

​

var notesImage;

​

var nextButtonX = 700;

var nextButtonY = 550;

var prevButtonX = 50;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

var weight = 400;

​

function preload() {

  notesImage = loadImage("notes.jpeg");

}

​

function setup() {

  createCanvas(800, 600);

}

​

function draw() {

  background("white");

​

  fill(74, 35, 90);

​

  if (slideNumber === 0) {

    // project pitch intro

    textSize(60);

    textAlign(CENTER, CENTER);

    text("Final Project MMP210", width / 2, height / 2);

​

    textSize(20);

    text("by Michal Shahaf", width / 2, height / 2 + 100);

  } else if (slideNumber === 1) {

    // description

​

    textAlign(LEFT);

​

    textSize(40);

    text("Description", 50, 100);

​

    textSize(30);

    text(description, 50, 200, 600);

  } else if (slideNumber === 2) {

    // description

​

    textAlign(LEFT);

​

    textSize(40);

    text("Interaction", 50, 100);

​

    textSize(30);

    text(interaction, 50, 200, 600);

  } else if (slideNumber === 3) {

    // visuals

​

    textAlign(LEFT);

    textSize(40);

    text("Visuals", 50, 100);

​

    textSize(30);

    text(visuals, 50, 200, 600);

​

    // p5 notes:

    // 5 lines

    fill("black");

    stroke(30);

    for (var y = 350; y < 480; y += 30) {

      line(50, y, weight, y);

    }

​

    //Do:

    fill("black");

    circle(90, 520, 30);

    stroke(30);

    line(60, 520, 120, 520);

    //Mi:

    circle(170, 470, 30);

    //La:

    circle(240, 425, 30);

​

    image(notesImage, 500, 350, 200, 150);

  }

​

  // draw buttons

  button("Next", nextButtonX, nextButtonY);

  button("Prev", prevButtonX, prevButtonY);

}

​

function button(buttonText, x, y) {

  stroke(108, 52, 131);

  strokeWeight(2);

​

  if (

    mouseX > x &&

    mouseX < x + buttonWidth &&

    mouseY > y &&

    mouseY < y + buttonHeight

  ) {

    fill(243, 156, 18);

  } else {

    fill(125, 60, 152);

  }

​

  rect(x, y, buttonWidth, buttonHeight, 5);

​

  noStroke();

  fill("white");

  textAlign(LEFT, TOP);

  textSize(20);

  text(buttonText, x + 10, y + 5);

}

​

function mousePressed() {

  // check if mouse is inside button

​

  // next

  if (

    mouseX > nextButtonX &&

    mouseX < nextButtonX + buttonWidth &&

    mouseY > nextButtonY &&

    mouseY < nextButtonY + buttonHeight &&

    slideNumber < totalSlides - 1

  ) {

    slideNumber++;

  }

​

  // prev

  if (

    mouseX > prevButtonX &&

    mouseX < prevButtonX + buttonWidth &&

    mouseY > prevButtonY &&

    mouseY < prevButtonY + buttonHeight &&

    slideNumber > 0

  ) {

    slideNumber--;

  }

}

​