var totalSlides = 5;

​

var description =

  " I want to create a interactive scene starting from a basic 'meet the artist image' I will be using audio and images to advance or make the interactive userface interesting. It can also be considered an interactive comic.";

​

var interaction =

  "The user can click on various parts of the image to play a sound, see another image or possibly a quick animation.";

​

var visuals =

  "I will create the 'meet the artist image' for the user to explore and click to their hearts content. I hope to use hand drawn images to share more about myself. The 'meet the artist image' will show a drawing of myself, list my dislikes and likes, pets and other things about myself. ";

​

var nextButtonX = 630;

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  Art = loadImage("meetartex.jpg");

}

​

function setup() {

  createCanvas(800, 600);

  textFont("Comic Sans MS");

}

​

function draw() {

  background("pink");

​

  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 Miriam Zepeda", 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);

​

  } else if (slideNumber === 4) {

    // description

​

    textAlign(LEFT);

​

    textSize(40);

    text("Example:", 50, 100);

     image(Art, 200, 200);

    Art.resize(400, 400);

​

  }

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

  }

}

​