final project proposal

  11.30.2022

  i'm going to make a typing game

  the letters will pop up on screen, either solo or in sets 

  user will need to press the correct key 

  each correct letter will increase score, with incorrect lowering the score

  score will be calculated at the end, and displayed along with accuracy in the top corner

*/

​

var slideNumber = 0;

var totalSlides = 4;

​

var description = "I'm going to mostly be starting a new project, slightly branched off of the pattern generator and soundboard.  I'm going to try to add in related audio, or bgm.";

​

var interaction = "The user will hit keys on the keyboard to match the corresponding letter(s) on screen.";

​

var visuals = "The visuals will consist of stylized, yet obvious, letters and a simple UI (maybe)as well as optional backgrounds.";

​

var frogImage;

​

var nextButtonX = 700;

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  frogImage = loadImage("frog.jpg");

}

​

function setup() {

  createCanvas(800, 600);

}

​

function draw() {

  background(220);

  fill(0);

  if (slideNumber === 0) {

    // project pitch intro

    textSize(60);

    textAlign(CENTER, CENTER);

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

    textSize(20);

    text("by Ben Rosenblum", 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) {

    // description

    textAlign(LEFT);

    textSize(40);

    text("Visuals", 50, 100);

    textSize(30);

    text(visuals, 50, 200, 600);

    // p5 frog

    // head

//     fill('green');

//     noStroke();

//     ellipse(200, 400, 200, 100);

//     // eyes

//     fill('rgb(255,75,0)');

//     ellipse(200 - 30, 400 - 20, 30, 40);

//     ellipse(200 + 30, 400 - 20, 30, 40);

//     fill(0);

//     ellipse(200 - 30, 400 - 20, 12, 35);

//     ellipse(200 + 30, 400 - 20, 12, 35);

//     fill('hotpink');

//     rect(200, 420, 40, 10, 5);

//     ellipse(200 + 40, 425, 20, 20);

    // image(frogImage, 350, 300);

  }

  // draw buttons

  button("Next", nextButtonX, nextButtonY);

  button("Prev", prevButtonX, prevButtonY);

}

​

function button(buttonText, x, y) {

  stroke(0);

  strokeWeight(2);

​

  if (mouseX > x && mouseX < x + buttonWidth &&

      mouseY > y && mouseY < y + buttonHeight) {

    fill('orange');

  } else {

    fill('lightblue');

  }

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

​

  noStroke();

  fill(0);

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

  }

}

​

​

​