​

var currentSlide= 1;

var totalSlides=4;

var nextSlideActive= false;

var precSlideActive= false;

var description = "In my final project I want to add the interactive comic we learned in class from week 12 and add sound to it. "

​

var interaction ="The user will be able to click on the right answer and a sound will play such as different cheerful sounds."

​

var graphicsExample;

​

function preload() {

  graphicsExample = loadImage('interactive.png');

}

​

​

function setup() {

  createCanvas(450, 400);

}

​

function draw() {

  background("rgb(173,195,192)");

  textAlign(CENTER,CENTER);

  textSize(40)

  textFont("Times New Roman");

  fill("rgb(7,0,1)")

  if( currentSlide == 1){

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

    text("by Britney Moreno", width/2, height/2 + 50);

  }

  if( currentSlide == 2){

    textSize(30);

    textFont("times New Roman");

    textAlign(LEFT)

   text(description, 50,100,340);

  }

  if( currentSlide == 3){

    textSize(30);

    textFont("times New Roman");

    textAlign(LEFT)

   text(interaction, 50,100,340);

  }

   if( currentSlide == 4){

     image(graphicsExample,0,0,500,500);

     fill("#152223")

    textSize(50);

    textFont("times New Roman");

    textAlign(CENTER);

   text("Graphics",width/2 , height/2 + 100);

​

   }

 nextSlideActive= button(350,350,60,20, "NEXT");

  prevSlideActive= button(220,350,60,20, "PREV");

}

​

function mousePressed(){

  if(nextSlideActive && currentSlide < totalSlides){

    currentSlide +=1

  }

  if(prevSlideActive && currentSlide < 1){

  currentSlide-= 1

}

}

​

// draws a button

function button(x, y, w ,h, txt){

  var isActive= false;

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

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

    isActive= true;

    fill("pink");

  } else {

    fill("white");

  }

  rect(x,y,w,h);

  textSize(h);

  fill(0);

  textAlign(LEFT, TOP);

  text(txt,x+2, y+2);

  // return button state to main program

  return isActive

}