let sprites = [];

let direction = 1; 

let step = 0;

let x;

let y;

let speed = 4.5;

let stepSpeed = 60;

let animationTimer;

​

let currentBackground = 1;

​

function preload() {

  spritesheet = loadImage("walking.png");

  mountain1 = loadImage("PRE_ORIG_SIZE-1.png");

  mountain2 = loadImage("PRE_ORIG_SIZE.png");

  mountain3 = loadImage("PRE_ORIG_SIZE-2.png");

  mountain4 = loadImage("PRE_ORIG_SIZE-3.png");

  summer1 = loadImage("Summer1.png");

  summer2 = loadImage("Summer2.png");

  summer3 = loadImage("Summer3.png");

  summer4 = loadImage("Summer4.png");

  summer5 = loadImage("Summer5.png");

  summer7 = loadImage("Summer7.png");

  summer8 = loadImage("Summer8.png");

  summer1end = loadImage("Summer1end.png");

​

  soundFormats('mp3');

​

  nature_sound = loadSound("naturesounds.mp3");

}

​

​

function setup() {

  createCanvas(innerWidth, innerHeight);

  imageMode(CENTER);

​

  // get the width and hieght of each sprite

​

  let w = spritesheet.width / 12;

  let h = spritesheet.height / 4;

​

// spritesheet functionality

​

  for (let y = 0; y < 4; y++) {

    sprites[y] = [];

    for (let x = 0; x < 12; x++) {

      sprites[y][x] = spritesheet.get(x * w, y * h, w, h);

    }

  }

​

  x = width / 2;

  y = height / 2;

​

  // resize 'summer' images 

​

  summer2.resize(width,0);

  summer3.resize(width,0);

  summer4.resize(width,0);

  summer5.resize(width,0);

  summer7.resize(width,0);

  summer8.resize(width,0);

  summer1.resize(width,0);

  summer1end.resize(width,0);

  mountain1.resize(width,0);

  mountain2.resize(width,0);

  mountain3.resize(width,0);

  mountain4.resize(width,0);

​

  // font and layout

  textFont("Courier New", 12);

  fill(255);

}

​

function draw() {

 background(255);

​

​

​

 if (!nature_sound.isPlaying()) {

  nature_sound.play();

}

​

  push();

  imageMode(CENTER);

    // change background 

​

    if (currentBackground === 1) {

      image(summer1,width/2,height/2-100) ;

      text("I've been at home for a while, I'll go for a walk by pressing the arrow keys", width/8, height/2+75);

    }  

    if (currentBackground === 2) {

      image(summer3,width/2,height/2-100);

    } 

​

    if (currentBackground === 3) {

      image(summer8,width/2,height/2-100);

    }

    if (currentBackground === 4) {

      image(mountain2,width/2,height/2-100);

      text('press ENTER to think', 100, 200);

      if( keyCode === ENTER) {

        displayText1();

      }

    }

​

    if (currentBackground === 5) {

      image(summer7,width/2,height/2-100);

    }

​

    if (currentBackground === 6) {

      image(summer5,width/2,height/2-100);

    }

​

    if (currentBackground === 7) {

      image(summer2,width/2,height/2-100);

      text('press ENTER to think', width/2, 100);

      if( keyCode === ENTER) {

        displayText2();

      }

    }

​

    if (currentBackground === 8) {

      image(summer4,width/2,height/2-100);

    }

​

    if (currentBackground === 9) {

      image(summer7,width/2,height/2-100);

    }

​

    if (currentBackground === 10) {

      image(summer8,width/2,height/2-100);

    }

​

    if (currentBackground === 11) {

      image(mountain1,width/2,height/2-100);

      text('press ENTER to think', 100, 100);

      if( keyCode === ENTER) {

        displayText3();

      }

    }

​

    if (currentBackground === 12) {

      image(mountain3,width/2,height/2-100);

    }

​

    if (currentBackground === 13) {

      image(mountain4,width/2,height/2-100);

    }

​

    if (currentBackground === 14) {

      text("I'm home, maybe I should do this in real life every once in a while.", 100, 100);

      image(summer1end,width/2,height/2-100);

    }

    pop();

​

    // movement 

  if (isKeyPressed == true) {

​

​

​

    if (keyCode == LEFT_ARROW) {

      direction = 1;

      x -= speed;

    }

    if (keyCode == RIGHT_ARROW) {

      direction = 2;

      x += speed;

    }

  }

​

  // change background 

​

  if (x > width) {

    x = 0;

    updateBackground(); 

  } else if (x < 0) {

    x = width;

    updateBackground2();

  }

​

  // Draw the character sprite

  image(sprites[direction][step], x, summer1.height-5);

​

​

}

​

​

function advanceStep() {

  step = (step + 1) % 12;

}

​

function updateBackground() {

  // Cycle through the backgrounds

  currentBackground = (currentBackground % 14) + 1;

}

function updateBackground2() {

  // Cycle through the backgrounds

  currentBackground = (currentBackground % 14) - 1;

}

​

​

function displayText1() {

​

  push();

    textSize(32);

    textAlign(CENTER);

    text("I wonder if anyone's reached the top", 500, 500);

  pop();

​

}

​

​

function displayText2() {

​

  push();

    textSize(32);

    textAlign(CENTER);

    text("clouds... nice", 500, 500);

  pop();

}

​

function displayText3() {

​

  push();

    textSize(24);

    textAlign(CENTER);

    text("if i was a mountain, idk how i'd feel about people climbing me", 500, 500);

  pop();

}

​

​

function keyPressed() {

  // walking animation and functionality 

  clearInterval(animationTimer);  

  animationTimer = setInterval(advanceStep, stepSpeed); 

}

​

function keyReleased() {

  // walking movement stops when a key is released

  clearInterval(animationTimer);

​

}