​

var currentSlide = 1;

var totalSlides = 5;

var nextSlideActive = false;

var prevSlideActive = false;

​

​

/*-----------------slide 3------*/

var description = "Two different animated illustrations will be generated and saved upon the pressing of a button for each action."

​

var description1 = "Besides that there will be an illustration with mouseX, Mouse Y of a bird for each animation."

​

​

/* ----------SLIDE 4-----------*/

​

var description2 = "This is an ilustration/animation from one of our classes that I will use as the foundation for my project idea."

​

let carX = 0;

​

​

/* ------------------------------*/

​

var example;

​

​

​

function preload(){

  example = loadImage('example.jpg')

}

​

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

// FIRST SLIDE

  if (currentSlide == 1){

    background("#DAD4A2")

    textAlign(CENTER)

    textSize(40);

    textFont("Jersey 10");

    fill("#3F1C7C")

    text("MoodScape", width/2, height/2);

    textSize(20);

    text("by Rodrigo Cazuza", width/2, height/2 + 50);

  }

​

// SECOND SLIDE

  if (currentSlide == 2){

    background("#DAD4A2")

    textAlign(CENTER)

    textSize(20);

    textFont("Jersey 10");

    fill("#3F1C7C")

    text("My Project will combine aspects that were learned in our classes involving Interaction, Animation, Functions, Pattern, Sound and interactions.", 50, 100, 300, 300);

    textSize(20);

    text("by Rodrigo", width/2, height/2 + 75);  

  }

// THIRD SLIDE

  if (currentSlide == 3){

    background("#DAD4A2")

    textAlign(CENTER)

    textSize(20);

    textFont("Jersey 10");

    fill("#3F1C7C")

    text( description, 50, 100, 300, 300);

    textSize(20);

    text(description1, 50, 250, 300, 300);  

  }

// FOURTH SLIDE

   if (currentSlide == 4){

    background("#DAD4A2")

    textAlign(CENTER)

    textSize(30);

    textFont("Jersey 10");

    fill("#3F1C7C")

    text(description2, 50, 50, 300, 300 );

    //moving truck

    drawCar(carX, 200);

    carX += 2;

     if (carX > width) {

    carX = -200; }

       function drawCar(x, y) {

  fill("black");

  circle(x + 20, y + 160, 40);

  circle(x + 180, y + 160, 40);

  fill("#1B4D74");

  rect(x, y + 80, 200, 80);

  fill("#1B4D74");

  rect(x + 200, y + 100, 50, 60, 5);

  fill("#FCFCFC");

  rect(x + 220, y + 100, 30, 25, 5);

}

  }

//FITH SLIDE

  if (currentSlide == 5){

    background("#DAD4A2")

    textAlign(CENTER)

    textSize(20);

    textFont("Jersey 10");

    fill("#3F1C7C")

    text(description2, 50, 50, 300, 300 );

    image( example, 50, 140 , 300, 200)

  }

​

//------------- BUTTON--------------//

nextSlideActive = button(300, 350, 60, 30, "Next")

prevSlideActive = button(50, 350, 60, 30, "Prev")

}

​

//DRAWS A BUTTON AND RETURNS WHETHER IT IS ACTIVE

​

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

  //button activation

var isActive = false;

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

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

    isActive = true;

    fill('#CBC0DE');

  } else{

    fill("#3F1C7C");

  }

  //button style

  rect(x, y, w, h)

  textSize(20)

  fill(255)

  textAlign(LEFT, TOP);

  text(txt,x + 10,y + 7)

  return isActive;

}

​

function mousePressed (){

  if (nextSlideActive && currentSlide < totalSlides){

  currentSlide += 1;

  }

  if (prevSlideActive  && currentSlide > 1){

    currentSlide -= 1;

  }

}

​

​