let y = 0;

let button;

let backgroundIsMoving = false;

let screen = 1;

let fade2 = 0;

let fade3 = 0;

let start = false;

​

let a, b;

let speed = 0.1;

​

​

function preload() {

  cover = loadImage("assets/cover.png");

  //mountain = loadImage("assets/Asset 1.png");

  img = loadImage("assets/Artboard 1.png");

  mist = loadImage("assets/mist.png");

  font = loadFont('assets/Calistoga-Regular.ttf');

}

​

function setup() {

  createCanvas(650, 850);

  btn = createButton("Motion");

  btn.mousePressed(function () {

    DeviceOrientationEvent.requestPermission();

  });

​

  img.resize(0, 850);

​

  a = random(-200,1);

​

​

}

​

function draw() {

drawCover();

if(start == true) {

    noTint();

    background(220);

    image(img, x, 0);

    fill(255, 90);

    noStroke();

    textSize(12.5);

    text("next page >", width - 95, height - 30);

    //rect(width - 100, height - 50, 70, 30);

    print(x);

    changeBG();

    textAppear();

​

  for (let b = -200; b < height; b += 300) {

    createMist(b);

  }

​

​

    //setTimeout(fogReappear, 15000);

​

}

​

​

}

​

​

function drawCover(){

  cover.resize(0,850);

    clear();

    noTint();

    image(cover, 0, 0);

   fill(255, 90);

    noStroke();

  rectMode(CENTER);

    rect(width/2, height/2, 50,50);

  rect(width/2, height/2, 60,60);

​

  textSize(30);

  textAlign(CENTER);

  fill(255,200);

  textSize(11);

  text('press to read',width/2, height/2 -40);

  fill(255);

  textSize(30);

  textFont(font);

  text('Arts of Living on a Damaged Planet', width/2, height/2 -90);

}

​

function mouseClicked() {

  if (

    mouseX > width - 100 &&

    mouseX < width - 30 &&

    mouseY > height - 50 &&

    mouseY < height - 20 &&

    backgroundIsMoving == false

  ) {

    backgroundIsMoving = true;

    print("true");

  }

}

​

function mousePressed() {

  if (

    mouseX > width/2 - 25 &&

    mouseX < width/2 + 25 &&

    mouseY > height/2 - 25 &&

    mouseY < height/2 + 25 &&

    start == false

  ) {

    start = true;

  }

}

​

function createMist(b){

  image(mist,a,b);

  image(mist,a,b);

  image(mist,a,b);

a += speed

 if(a > 0 || a < -400){

    speed = -speed

  }

}

​

​

​

function changeBG() {

  if (backgroundIsMoving == true) {

    x -= 10;

  }

  if (x <= -500 && screen == 1) {

    backgroundIsMoving = false;

    screen = 2;

  }

​

  if (x <= -1000 && screen == 2) {

    backgroundIsMoving = false;

    screen = 3;

  } else if (backgroundIsMoving == true && screen == 3) {

    remove();

  }

}

​

function textAppear() {

  if (backgroundIsMoving == false && screen == 1) {

    textSize(15);

    textAlign(CENTER);

    textLeading(25);

    fill(255, fade2);

    text(

      "Introduction: Haunted Landscapes of the Anthropocene \nWhat Kinds of Human Disturbance Can Life on Earth Bear?",      width / 2,      160    );

    fade2 += 10;

  } else if (backgroundIsMoving == false && screen == 2) {

    textSize(15);

    textAlign(CENTER);

    textLeading(25);

    fill(255, fade2);

    text(

      "The winds of the Anthropocene carry ghosts—the vestiges and signs of past ways of life still charged in the present. This book offers stories of those winds as they blow over haunted landscapes. Our ghosts are the traces of more-than-human histories through which ecologies are made and unmade. ",

      (width - 500) / 2, 160, 500, 300);

    fade2 += 10;

  } else if (backgroundIsMoving == false && screen == 3) {

    textSize(15);

    textAlign(CENTER);

    textLeading(25);

    fill(255, fade3);

    text(

      "“Anthropocene” is the proposed name for a geologic epoch in which humans have become the major force determining the continuing liv-ability  of  the  earth.  The  word  tells  a  big  story:  living  arrangements that took millions of years to put into place are being undone in the blink of an eye. ",

      (width - 500) / 2, 160, 500, 300);

    fade3 += 10;

  }

}

​