final project proposal

  i'm going to make a self portrait that have different emotions

*/

​

var slideNumber = 0;

var totalSlides = 4;

​

var description =

  "I'm going to  create a new self portrait project.  I'm going to add the relative sounds to the emotion on my project.";

​

var interaction =

  "The user will press the mouse to change the emotion and sound, the user also can use the slider to change the color of the background.";

​

var visuals = "The visuals will consist of p5 shapes that look like me.";

​

var selfImage;

​

var nextButtonX = 700;

var nextButtonY = 550;

var prevButtonX = 100;

var prevButtonY = 550;

var buttonWidth = 60;

var buttonHeight = 30;

​

function preload() {

  selfImage = loadImage("self.png");

}

​

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 Ruikun Zhao", 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);

​

    image(selfImage, 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--;

  }

}

​