​

I'm going to combine the meme with sound and maybe a pattern page

​

bus image: https://images.rawpixel.com/image_png_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY4NC0wMTgtcF8xLnBuZw.png?s=a3aVeefuinge5Qi-HIcvNB917SmKYA-8huOOz9jhiu8

*/

​

var slideNumber = 0;

var totalSlides = 4; 

var description = "I'm going to create a project using the wheels on the bus sound";

​

var interaction = "The user with use different keys to change the pictures to the wheels of the bus sound and with each new picture it plays the sound part for what that picture represents.";

​

var visuals = "The visuals will consists of a bus and parts of the bus as mentioned in the song.";

​

var busImage;

​

var nextButtonX = 700; 

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  busImage = loadImage("bus.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(30);

    text("By: Loverta Brown", width/2, height/2 + 100);

  } else if (slideNumber === 1) {

    //description of project

    textAlign(LEFT);

    textSize(40);

    text("Description", 50 , 100);

    textSize(20);

    text(description, 50, 200, 500);

  }  else if (slideNumber === 2) {

    //description of project

    textAlign(LEFT);

    textSize(40);

    text("Interaction", 50, 100);

    textSize(20);

    text(interaction, 50, 200, 500);

  }  else if (slideNumber === 3) {

    //description of project

    textAlign(LEFT);

    textSize(40);

    text("Visuals", 50 , 100);

    textSize(20);

    text(visuals, 50, 200, 500);

    image(busImage, 0, 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("purple");

  }

  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--; // to go backwards

  }

}

​