//https://editor.p5js.org/rustyrobison/sketches/TFzek4T1v

​

var leftPupilX,leftPupilY;

var rightPupilX,rightPupilY;

​

var nextButtonX = 915-150;

var nextButtonY = 400-60;

var backButtonX = 20;

var backButtonY = nextButtonY;

​

var buttonW = 200;

var buttonH = 235;

​

var currentSlide = 1;

var totalSlides = 3;

​

var sound1;

​

function preload(){

  sound1=loadSound('footstep.wav');

}

​

function setup() {

  createCanvas(860, 640);

 leftPupilX=125;

  leftPupilY=200;

  rightPupilX=275;

  rightPupilY=200;

    r=random(255);

  g=random(255);

  b=random(255);

}

​

function draw() {

  background('lightblue');

  if(currentSlide==1){

  //Sun

  fill('gold');

  ellipse(50,40,180);

  //Tree

  fill('brown');

  rect(700,275,65,300);

  //Leaves

  fill('green');

  ellipse(730,200,250);

  //Ground/Dirt

  fill('darkred');

  rect(0,600,900,200);

  //Grass

    fill('green');

  rect(0,575,900,30);

  //Head

  fill('beige');

  ellipse(200,464,60);

  //Top

  fill(r,g,b);

  rect(183,490,35,60);

  //Arms

  fill('beige');

  rect(168,490,15,40);

  rect(218,490,15,40);

  //Gloves

  fill('black');

  rect(168,510,15,20);

  rect(218,510,15,20);

  //Left leg

  fill(r,g,b);

   rect(183,550,15,30);

  //Right leg

  fill(r,g,b);

  rect(203,550,15,30);

  //Left Eye

  fill('white');

  ellipse(186,460,15);

  //Right Eye

  fill('white');

  ellipse(213,460,15);

  //Black pupils

  fill('black');

  ellipse(leftPupilX+87,leftPupilY+270,5);

  ellipse(rightPupilX-37,rightPupilY+270,5);

     leftPupilX = map(mouseX,0,width,95,104,true);

  //we are taking +-25 pixels from the x value

  rightPupilX = map(mouseX,0,width,246,254,true);

  //We can clamp the maximum translated value by adding "true"

  leftPupilY = map(mouseY,0,height,188,194,true);

  rightPupilY = map(mouseY,0,height,187,194,true);

     button(nextButtonX,nextButtonY,'');

 } else if (currentSlide==2){

   background('navy');

     //Trees

  fill('brown');

  rect(300,275,35,300);

   rect(400,275,35,300);

     //Leaves

  fill('green');

    ellipse(405,270,190);

  ellipse(325,270,190);

   //House

   fill('beige');

   rect(550,370,300,800);

   fill('red');

   rect(680,475,40,100);

   fill('yellow');

   ellipse(710,525,8);

   fill('gold');

   rect(575,390,75,75);

   rect(745,390,75,75);

       //Ground/Dirt

  fill('darkred');

  rect(0,600,900,200);

     //Grass

    fill('green');

  rect(0,575,900,30);

     //Head

  fill('beige');

  ellipse(200,464,60);

  //Top

  fill(r,g,b);

  rect(183,490,35,60);

  //Arms

  fill('beige');

  rect(168,490,15,40);

  rect(218,490,15,40);

  //Gloves

  fill('black');

  rect(168,510,15,20);

  rect(218,510,15,20);

  //Left leg

  fill(r,g,b);

   rect(183,550,15,30);

  //Right leg

  fill(r,g,b);

  rect(203,550,15,30);

  //Left Eye

  fill('white');

  ellipse(186,460,15);

  //Right Eye

  fill('white');

  ellipse(213,460,15);

  //Black pupils

  fill('black');

  ellipse(leftPupilX+87,leftPupilY+270,5);

  ellipse(rightPupilX-37,rightPupilY+270,5);

     leftPupilX = map(mouseX,0,width,95,104,true);

  //we are taking +-25 pixels from the x value

  rightPupilX = map(mouseX,0,width,246,254,true);

  //We can clamp the maximum translated value by adding "true"

  leftPupilY = map(mouseY,0,height,188,194,true);

  rightPupilY = map(mouseY,0,height,187,194,true);

   button(nextButtonX,nextButtonY,'');

  }

​

  else if (currentSlide==3){

    background(148, 91, 47);

    //Floor Tiles

     for (var i = 0; i < width; i += 100) {

    line(i, 0, i, height);

    line(width, i, 0, i);

  }

    //Rug#1

    strokeWeight(3);

    fill('grey');

    ellipse(150,250,300);

    //Rug#2

    strokeWeight(1);

    fill(r,g,b);

    rect(0,500,900,140);

    //Mattress

    fill('white');

    rect(50,215,200,75);

    //Blanket

    fill('red');

    rect(100,215,150,75);

         //Head

  fill('beige');

  ellipse(200,464,60);

  //Top

  fill(r,g,b);

  rect(183,490,35,60);

  //Arms

  fill('beige');

  rect(168,490,15,40);

  rect(218,490,15,40);

  //Gloves

  fill('black');

  rect(168,510,15,20);

  rect(218,510,15,20);

  //Left leg

  fill(r,g,b);

   rect(183,550,15,30);

  //Right leg

  fill(r,g,b);

  rect(203,550,15,30);

  //Left Eye

  fill('white');

  ellipse(186,460,15);

  //Right Eye

  fill('white');

  ellipse(213,460,15);

  //Black pupils

  fill('black');

  ellipse(leftPupilX+87,leftPupilY+270,5);

  ellipse(rightPupilX-37,rightPupilY+270,5);

     leftPupilX = map(mouseX,0,width,95,104,true);

  //we are taking +-25 pixels from the x value

  rightPupilX = map(mouseX,0,width,246,254,true);

  //We can clamp the maximum translated value by adding "true"

  leftPupilY = map(mouseY,0,height,188,194,true);

  rightPupilY = map(mouseY,0,height,187,194,true);

   button(nextButtonX,nextButtonY,'');

​

}

}

function mousePressed(){

  if(mouseX > nextButtonX &&

     mouseX < nextButtonX+ buttonW &&

     mouseY > nextButtonY &&

     mouseY < nextButtonY + buttonH){

    currentSlide++;

    if(currentSlide>totalSlides){

      currentSlide = totalSlides;

    }

     if(mouseIsPressed && sound1.isPlaying()==false){

      sound1.play();

     }

  }

  if(mouseX > backButtonX&&

    mouseX < backButtonX+ buttonW &&

     mouseY > backButtonY &&

     mouseY < backButtonY + buttonH){

    currentSlide--;

    if(currentSlide<1){

      currentSlide = 1;

    }

  }

 console.log (mouseX,mouseY)

}

​

​

function button(x,y,buttonText){

  if(currentSlide==1){

  fill('lightblue');

  stroke('black');

  strokeWeight(0);

  }

  else if(currentSlide==2){

    fill('red');

    stroke('black');

    strokeWeight(0);

  }

  if(mouseX > x &&

    mouseX < x + buttonW &&

     mouseY > y &&

     mouseY < y + buttonH){

    fill('pink');

  }

 if(currentSlide==1){

  rect(x,y,buttonW,buttonH);

  strokeWeight(1);

  textSize(26);

  textAlign(LEFT,TOP);

  fill('black');

  text(buttonText,x+5,y+5);

 }

   if(currentSlide==2){

  rect(680,475,40,100);

      fill('yellow');

   ellipse(710,525,8);

  strokeWeight(1);

  textSize(26);

  textAlign(LEFT,TOP);

  fill('black');

  text(buttonText,x+5,y+5);

 }

}

​

​